Post by Dennie on Oct 12, 2017 19:14:53 GMT -7
BBCode is a coding system that allows you to add rich features to your posts and signatures. This includes text color and styling, ability to embed videos, add in word links, and etc.
To use BBCode, you will want to be in the BBCode mode when creating a post on the forum. You can do this on the message page by clicking the “BBCode” tab found in the bottom-left hand corner of the message area when composing a new post. You can also use BBCode in your signature area as well when modifying your profile. Below is a list of supported BBCode, and how they are used:
(on all examples I added a space. Take that out and what the example shows will be correct)
Font Face
Example: [ font face=""]This Font is Courier New[/font]
Result: This Font is Courier New
Font Size [ font size="#"] [/font]
Example: The following text is slightly [ font size="4"]bigger[/font] than the rest.
Result: The following text is slightly bigger than the rest.
Font Color [ font color="Color Code Here"] [/font]
Example: The following text [ font color="e61919"]is red[/font].
Result: The following text is is red.
Bold Text [ b] [/b]
Example: [ b]Bold[/b]
Result: Bold
Italic Text
Example: [ i]Italic[/i]
Result: Italic
Underline Text [ u] [/u]
Example: [ u]Underline[/u]
Result: Underline
Strikethrough Text [ s] [/s]
Example: [ s]Strikethrough[/s]
Result:Strikethrough
Superscript Text [ sup] [/sup]
Example: Monday the 13[ sup]th[/sup]
Result: Monday the 13th
Subscript Text [ sub] [/sub]
Example: H[ sub]2[/sub]O
Result: H2O
Justify Left [ div align="left"] [/div]
Example: [ div align="left"]This text is on the left.[/div]
Result:
Justify Center [ div align="center"] [/div]
Example: [ div align="center"]This text is centered.[/div]
Result:
Justify Right [ div align="right"] [/div]
Example: [ div align="right"]This text is on the right.[/div]
Result:
Justify Full [ div align="justify"] [/div]
Example: [ div align="justify"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt orci lorem, ac consequat magna vulputate at. Duis lacinia velit non massa porttitor, a porta nisi dignissim. Nulla scelerisque, augue ut porttitor commodo, lectus ex tempor nibh, quis venenatis neque ex ac ex. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum nibh urna, condimentum nec facilisis et, tempor id enim. Sed ac nibh ut sem auctor feugiat. Pellentesque malesuada lectus volutpat vehicula mattis. Praesent vitae imperdiet leo. Vivamus ornare et ante ac malesuada. Vestibulum leo mi, vestibulum quis purus vel, scelerisque finibus magna. Duis finibus sollicitudin augue, et consequat arcu aliquam a.[/div]
Result:
Blockquote [ blockquote] [/blockquote]
Example: [ blockquote]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt orci lorem, ac consequat magna vulputate at. Duis lacinia velit non massa porttitor, a porta nisi dignissim. Nulla scelerisque, augue ut porttitor commodo, lectus ex tempor nibh, quis venenatis neque ex ac ex. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum nibh urna, condimentum nec facilisis et, tempor id enim. Sed ac nibh ut sem auctor feugiat. Pellentesque malesuada lectus volutpat vehicula mattis. Praesent vitae imperdiet leo. Vivamus ornare et ante ac malesuada. Vestibulum leo mi, vestibulum quis purus vel, scelerisque finibus magna. Duis finibus sollicitudin augue, et consequat arcu aliquam a.[/blockquote]
Result:
Tables
Example below is for a 2 column table with 2 rows, cellpadding of 3, cell spacing of 0, and a border:
[ table][tbody]
[ tr]
[ td style="border: 1px solid #000; padding: 3px;"]Row 1 column 1[/td]
[ td style="border: 1px solid #000; padding: 3px;"]Row 1 column 2[/td]
[ /tr]
[ tr]
[ td style="border: 1px solid #000; padding: 3px;"]Row 2 column 1[/td]
[ td style="border: 1px solid #000; padding: 3px;"]Row 2 column 2[/td]
[ /tr]
[ /tbody][/table]
Results:
Lists
Below is an example of a list with 3 items using a bullet point:
[ ul type="disc"]
[ li]List item 1[/li]
[ li]List item 2[/li]
[ li]List item 3[/li]
[ /ul]
Result:
Note: To change the bullet icon, set the type from disc to circle, square, decimal, upper-alpha, lower-alpha, upper-roman, or lower-roman.
Horizontal Rule
Example: The horizontal rule generates a solid horizontal line that spreads from the left edge of your post to the right.
Website Word Link [ a href="http://URL HERE"]Word Text[/a]
Example: [ a href="http://support.proboards.com"]ProBoards Support[/a]
Result: ProBoards Support
Email Link [ a href="mailto:Example Email Address"] [/a]
Example: [ a href="mailto:noreply@proboards.com"]My Email Address[/a]
Result: My Email Address
Note: In order for the email link to function properly, you must have a default email application designated on your computer.
Insert Image [ img src="http://Image URL Here" alt="Alt Text"]
Example: [ img src="http://images.proboards.com/hotlink/forum_white_178x27.png" alt="Visit Our Forum!"]
Result:
Note: The Alt Text is what will display in place of the image if the image fails to load, or if a visitor is browsing with images disabled.
Insert Video [ video] [/video]
Example:
To use BBCode, you will want to be in the BBCode mode when creating a post on the forum. You can do this on the message page by clicking the “BBCode” tab found in the bottom-left hand corner of the message area when composing a new post. You can also use BBCode in your signature area as well when modifying your profile. Below is a list of supported BBCode, and how they are used:
(on all examples I added a space. Take that out and what the example shows will be correct)
Font Face
Example: [ font face=""]This Font is Courier New[/font]
Result: This Font is Courier New
Font Size [ font size="#"] [/font]
Example: The following text is slightly [ font size="4"]bigger[/font] than the rest.
Result: The following text is slightly bigger than the rest.
Font Color [ font color="Color Code Here"] [/font]
Example: The following text [ font color="e61919"]is red[/font].
Result: The following text is is red.
Bold Text [ b] [/b]
Example: [ b]Bold[/b]
Result: Bold
Italic Text
Example: [ i]Italic[/i]
Result: Italic
Underline Text [ u] [/u]
Example: [ u]Underline[/u]
Result: Underline
Strikethrough Text [ s] [/s]
Example: [ s]Strikethrough[/s]
Result:
Superscript Text [ sup] [/sup]
Example: Monday the 13[ sup]th[/sup]
Result: Monday the 13th
Subscript Text [ sub] [/sub]
Example: H[ sub]2[/sub]O
Result: H2O
Justify Left [ div align="left"] [/div]
Example: [ div align="left"]This text is on the left.[/div]
Result:
This text is on the left.
Justify Center [ div align="center"] [/div]
Example: [ div align="center"]This text is centered.[/div]
Result:
This text is centered.
Justify Right [ div align="right"] [/div]
Example: [ div align="right"]This text is on the right.[/div]
Result:
This text is on the right.
Justify Full [ div align="justify"] [/div]
Example: [ div align="justify"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt orci lorem, ac consequat magna vulputate at. Duis lacinia velit non massa porttitor, a porta nisi dignissim. Nulla scelerisque, augue ut porttitor commodo, lectus ex tempor nibh, quis venenatis neque ex ac ex. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum nibh urna, condimentum nec facilisis et, tempor id enim. Sed ac nibh ut sem auctor feugiat. Pellentesque malesuada lectus volutpat vehicula mattis. Praesent vitae imperdiet leo. Vivamus ornare et ante ac malesuada. Vestibulum leo mi, vestibulum quis purus vel, scelerisque finibus magna. Duis finibus sollicitudin augue, et consequat arcu aliquam a.[/div]
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt orci lorem, ac consequat magna vulputate at. Duis lacinia velit non massa porttitor, a porta nisi dignissim. Nulla scelerisque, augue ut porttitor commodo, lectus ex tempor nibh, quis venenatis neque ex ac ex. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum nibh urna, condimentum nec facilisis et, tempor id enim. Sed ac nibh ut sem auctor feugiat. Pellentesque malesuada lectus volutpat vehicula mattis. Praesent vitae imperdiet leo. Vivamus ornare et ante ac malesuada. Vestibulum leo mi, vestibulum quis purus vel, scelerisque finibus magna. Duis finibus sollicitudin augue, et consequat arcu aliquam a.
Blockquote [ blockquote] [/blockquote]
Example: [ blockquote]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt orci lorem, ac consequat magna vulputate at. Duis lacinia velit non massa porttitor, a porta nisi dignissim. Nulla scelerisque, augue ut porttitor commodo, lectus ex tempor nibh, quis venenatis neque ex ac ex. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum nibh urna, condimentum nec facilisis et, tempor id enim. Sed ac nibh ut sem auctor feugiat. Pellentesque malesuada lectus volutpat vehicula mattis. Praesent vitae imperdiet leo. Vivamus ornare et ante ac malesuada. Vestibulum leo mi, vestibulum quis purus vel, scelerisque finibus magna. Duis finibus sollicitudin augue, et consequat arcu aliquam a.[/blockquote]
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt orci lorem, ac consequat magna vulputate at. Duis lacinia velit non massa porttitor, a porta nisi dignissim. Nulla scelerisque, augue ut porttitor commodo, lectus ex tempor nibh, quis venenatis neque ex ac ex. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum nibh urna, condimentum nec facilisis et, tempor id enim. Sed ac nibh ut sem auctor feugiat. Pellentesque malesuada lectus volutpat vehicula mattis. Praesent vitae imperdiet leo. Vivamus ornare et ante ac malesuada. Vestibulum leo mi, vestibulum quis purus vel, scelerisque finibus magna. Duis finibus sollicitudin augue, et consequat arcu aliquam a.
Tables
Example below is for a 2 column table with 2 rows, cellpadding of 3, cell spacing of 0, and a border:
[ table][tbody]
[ tr]
[ td style="border: 1px solid #000; padding: 3px;"]Row 1 column 1[/td]
[ td style="border: 1px solid #000; padding: 3px;"]Row 1 column 2[/td]
[ /tr]
[ tr]
[ td style="border: 1px solid #000; padding: 3px;"]Row 2 column 1[/td]
[ td style="border: 1px solid #000; padding: 3px;"]Row 2 column 2[/td]
[ /tr]
[ /tbody][/table]
Results:
Row 1 column 1 | Row 1 column 2 |
Row 2 column 1 | Row 2 column 2 |
Lists
Below is an example of a list with 3 items using a bullet point:
[ ul type="disc"]
[ li]List item 1[/li]
[ li]List item 2[/li]
[ li]List item 3[/li]
[ /ul]
Result:
- List item 1
- List item 2
- List item 3
Note: To change the bullet icon, set the type from disc to circle, square, decimal, upper-alpha, lower-alpha, upper-roman, or lower-roman.
Horizontal Rule
Example: The horizontal rule generates a solid horizontal line that spreads from the left edge of your post to the right.
Website Word Link [ a href="http://URL HERE"]Word Text[/a]
Example: [ a href="http://support.proboards.com"]ProBoards Support[/a]
Result: ProBoards Support
Email Link [ a href="mailto:Example Email Address"] [/a]
Example: [ a href="mailto:noreply@proboards.com"]My Email Address[/a]
Result: My Email Address
Note: In order for the email link to function properly, you must have a default email application designated on your computer.
Insert Image [ img src="http://Image URL Here" alt="Alt Text"]
Example: [ img src="http://images.proboards.com/hotlink/forum_white_178x27.png" alt="Visit Our Forum!"]
Result:
Note: The Alt Text is what will display in place of the image if the image fails to load, or if a visitor is browsing with images disabled.
Insert Video [ video] [/video]
Example: