Post by ProBoards Help Guide on Aug 28, 2014 14:44:32 GMT -8
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:
Font Face [font face="Font Name Here"] [/font]
Example: [font face="courier new"]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.
# - Use a number between 1 and 7, where 1 is the smallest and 7 is the largest font size.
Font Color [font color="Color Code Here"] [/font]
Example: The following text [font color="e61919"]is red[/font].
Result: The following text is red.
Bold Text [b] [/b]
Example: [b]Bold[/b]
Result: Bold
Italic Text [i] [/i]
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 [hr]
Example: The horizontal rule generates a solid horizontal line that spreads from the left edge of your post to the right. Just like the dividers that separate each BBCode in this post.
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="https://storage.proboards.com/homepage/images/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: [video]https://www.youtube.com/watch?v=2CNd6OGdMO8[/video]
Result:
Note: There are a range of video providers that are supported. Click the
button on the posting page for a list of supported providers.
Insert Code (creates a standout code box)[code] [/code]
Example: [code][b]this text will not be bold[/b] because it's in a code box.[/code]
Result:
Insert Code in line of text [noubbc] [/noubbc]
Example: [noubbc][b]this text will not be bold[/b] and can be in line with text.[/noubbc]
Result:
The sample of [b]this text will not be bold[/b] and can flow with in a line of text.
*Note: [noparse] [/noparse] tags can be used in the same way.
Quote [quote] [/quote]
Example: [quote]You miss 100% of the shots you don’t take. –Wayne Gretzky[/quote]
Result:
Spoiler [spoiler] [/spoiler]
Example: I thought the movie had a great ending...
[spoiler]It was so cool how that thing happened![/spoiler]
Result: I thought the movie had a great ending...
Marquee / Moving Text [marquee scrollamount=”#”] [/marquee]
Example: [marquee scrollamount=”2”]This is a marquee at speed 2![/marquee]
Result:
# - You can enter any number here depending on how fast you want the marquee to scroll. A lower number will scroll at a much lower speed than a higher number.
Embed a Tweet from Twitter [twitter url="COPY LINK TO TWEET"]
Example: [twitter url="https://twitter.com/proboards/status/501843717456936962"]
Result:
Note: The URL for the tweet can be found by clicking the more arrow in the upper right hand corner of the tweet. Select "Copy Link to Tweet". Do not choose "Embed Tweet" unless you are placing the tweet on a custom page or in a layout template. The Embed Tweet code will not work in a post.
Advanced Post Styling
You can use BBCode to completely stylize the look of your post to make it stand out more. This should only be used by advanced users that are familiar with traditional CSS. You can view examples and find out more about styling your posts here.
While the above lists the BBCode individually, you can combine two sets of BBCode to do things like make a bold colored text, have an image link, and etc. Below is an example of how you would setup an image link:
[a href="http://support.proboards.com"][img src="https://storage.proboards.com/homepage/images/hotlink/forum_orange_178x27.png" alt="Button"][/a]
Result:
Source: www.proboards.com/forum-help-guide/bbcode
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:
Font Face [font face="Font Name Here"] [/font]
Example: [font face="courier new"]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.
# - Use a number between 1 and 7, where 1 is the smallest and 7 is the largest font size.
Font Color [font color="Color Code Here"] [/font]
Example: The following text [font color="e61919"]is red[/font].
Result: The following text is red.
Bold Text [b] [/b]
Example: [b]Bold[/b]
Result: Bold
Italic Text [i] [/i]
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 [hr]
Example: The horizontal rule generates a solid horizontal line that spreads from the left edge of your post to the right. Just like the dividers that separate each BBCode in this post.
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="https://storage.proboards.com/homepage/images/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: [video]https://www.youtube.com/watch?v=2CNd6OGdMO8[/video]
Result:
Note: There are a range of video providers that are supported. Click the
button on the posting page for a list of supported providers. Insert Code (creates a standout code box)[code] [/code]
Example: [code][b]this text will not be bold[/b] because it's in a code box.[/code]
Result:
[b]this text will not be bold[/b] because it's in a code box.Insert Code in line of text [noubbc] [/noubbc]
Example: [noubbc][b]this text will not be bold[/b] and can be in line with text.[/noubbc]
Result:
The sample of [b]this text will not be bold[/b] and can flow with in a line of text.
*Note: [noparse] [/noparse] tags can be used in the same way.
Quote [quote] [/quote]
Example: [quote]You miss 100% of the shots you don’t take. –Wayne Gretzky[/quote]
Result:
You miss 100% of the shots you don’t take. –Wayne Gretzky
Spoiler [spoiler] [/spoiler]
Example: I thought the movie had a great ending...
[spoiler]It was so cool how that thing happened![/spoiler]
Result: I thought the movie had a great ending...
It was so cool how that thing happened!
Marquee / Moving Text [marquee scrollamount=”#”] [/marquee]
Example: [marquee scrollamount=”2”]This is a marquee at speed 2![/marquee]
Result:
# - You can enter any number here depending on how fast you want the marquee to scroll. A lower number will scroll at a much lower speed than a higher number.
Embed a Tweet from Twitter [twitter url="COPY LINK TO TWEET"]
Example: [twitter url="https://twitter.com/proboards/status/501843717456936962"]
Result:
Note: The URL for the tweet can be found by clicking the more arrow in the upper right hand corner of the tweet. Select "Copy Link to Tweet". Do not choose "Embed Tweet" unless you are placing the tweet on a custom page or in a layout template. The Embed Tweet code will not work in a post.
Advanced Post Styling
You can use BBCode to completely stylize the look of your post to make it stand out more. This should only be used by advanced users that are familiar with traditional CSS. You can view examples and find out more about styling your posts here.
While the above lists the BBCode individually, you can combine two sets of BBCode to do things like make a bold colored text, have an image link, and etc. Below is an example of how you would setup an image link:
[a href="http://support.proboards.com"][img src="https://storage.proboards.com/homepage/images/hotlink/forum_orange_178x27.png" alt="Button"][/a]
Result:
What is "Lightly Parsed BBCode"?
If you've made any changes inside your admin panel, you may have come across a field that accepts "Lightly Parsed BBCode", such as when configuring a Custom Profile Field. For fields like this, it simply means that more potentially-intrusive functions of BBCode are not available, like the ability to embed a video, insert a quote, or create a spoiler.
When you see "Light-BBCode Parsed" it doesn't refer to a specific set of allowed BBCode tags, but rather indicates that for that field specifically, some functions are disabled.
In general, though, the following functions are supported for fields labeled "Light-BBCode Parsed" :
- Bold
- Underline
- Italic
-Strikethrough
- Superscript
- Subscript
- Links
- Preformatted Text
- Monospaced Text
When you see "Light-BBCode Parsed" it doesn't refer to a specific set of allowed BBCode tags, but rather indicates that for that field specifically, some functions are disabled.
In general, though, the following functions are supported for fields labeled "Light-BBCode Parsed" :
- Bold
- Underline
- Italic
-
- Superscript
- Subscript
- Links
- Preformatted Text
- Monospaced Text
Source: www.proboards.com/forum-help-guide/bbcode