Post by Dreanna Vargo on Oct 12, 2014 6:12:06 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
Example: This Font is Courier New
Result: This Font is Courier New
Font Size
Example: The following text is slightly bigger 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
Example: The following text is red.
Result: The following text is red.
Bold Text
Example: Bold
Result: Bold
Italic Text
Example: Italic
Result: Italic
Underline Text
Example: Underline
Result: Underline
Strikethrough Text
Example:Strikethrough
Result:Strikethrough
Superscript Text
Example: Monday the 13th
Result: Monday the 13th
Subscript Text
Example: H2O
Result: H2O
Justify Left
Example:
Result:
Justify Center
Example:
Result:
Justify Right
Example:
Result:
Justify Full
Example:
Result:
Tables
Example below is for a 2 column table with 2 rows, cellpadding of 3, cell spacing of 0, and a border:
Results:
Lists
Below is an example of a list with 3 items using a bullet point:
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. Just like the dividers that
separate each BBCode in this post.
Website Word Link Word Text
Example: ProBoards Support
Result: ProBoards Support
Email Link
Example: My Email Address
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![Alt Text]()
Example:
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
Example:
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
Example:
Result:
Quote
Example:
Result:
Spoiler [spoilers] [/spoilers]
Example: I thought the movie had a great ending...
Result: I thought the movie had a great ending...
Marquee / Moving Text
Example:
Result: This is a marquee at speed 2!
#
- 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
Example:
Result:
Note: The twitter ID can be found at the end of the tweet's URL. The above example was generated from this link: twitter.com/proboards/status/501843717456936962
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:
Source: www.proboards.com/user-guide/posting/supported-bbcode
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
Example: This Font is Courier New
Result: This Font is Courier New
Font Size
Example: The following text is slightly bigger 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
Example: The following text is red.
Result: The following text is red.
Bold Text
Example: Bold
Result: Bold
Italic Text
Example: Italic
Result: Italic
Underline Text
Example: Underline
Result: Underline
Strikethrough Text
Example:
Result:
Superscript Text
Example: Monday the 13th
Result: Monday the 13th
Subscript Text
Example: H2O
Result: H2O
Justify Left
Example:
This text is on the left.
Result:
This text is on the left.
Justify Center
Example:
This text is centered.
Result:
This text is centered.
Justify Right
Example:
This text is on the right.
Result:
This text is on the right.
Justify Full
Example:
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.
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.
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.
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:
| Row 1 column 1 | Row 1 column 2 |
| Row 2 column 1 | Row 2 column 2 |
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:
- List item 1
- List item 2
- List item 3
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. Just like the dividers that
separate each BBCode in this post.
Website Word Link Word Text
Example: ProBoards Support
Result: ProBoards Support
Email Link
Example: My Email Address
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
Example:
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
Example:
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
Example:
[b]this text will not be bold[/b] because it's in a code box.Result:
[b]this text will not be bold[/b] because it's in a code box.Quote
Example:
You miss 100% of the shots you don’t take. –Wayne Gretzky
Result:
You miss 100% of the shots you don’t take. –Wayne Gretzky
Spoiler [spoilers] [/spoilers]
Example: I thought the movie had a great ending...
It was so cool how that thing happened!
Result: I thought the movie had a great ending...
Marquee / Moving Text
Example:
Result: This is a marquee at speed 2!
#
- 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
Example:
Result:
Note: The twitter ID can be found at the end of the tweet's URL. The above example was generated from this link: twitter.com/proboards/status/501843717456936962
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:
Source: www.proboards.com/user-guide/posting/supported-bbcode
