Post by UnknownAngeloX on Feb 1, 2017 6:26:13 GMT
BBCode Guide and Tutorial
All credit goes to DVM-501
What is BBCode
Define BBCode
BBCode or UBBC is an abbreviation for Universal Bulletin Board Code, the lightweight markup language used to format posts in many message boards. It is also called "forum codes." The available tags are usually indicated by rectangular brackets surrounding a keyword, and they are parsed by the message board system before being translated into a markup language that web browsers understand, usually HTML or XHTML.
Text Formatting
How to format text for bold, underline, italic, etc.
BBCode includes tags to allow you to quickly change the basic style of your text. This is achieved in the following ways:
To make a piece of text bold enclose it in [b][/b], eg.
For underlining use [u][/u], for example:
To italicize text use [i][/i], eg.
To Strike through text:
To make the text glow:
- The fist section that says "red" indicates the colour of the glow
- The second section that says "2" indicants the size of the text
- The last section that says "300" indicates the brightness of the glow
Note: Glow is only compactable with Internet Explore 7. If you are using another browser the effect will not be visible.[/ul]
To make a shadow:
- The first section that says “red” indicates the color of the shadow
- The second section that says “left” indicates the direction of the shadow
- The last section that says “300” indicates the brightness of the shadow
Note: Shadow is only compactable with Internet Explore 7. If you are using another browser the effect will not be visible.[/ul]
To move or marquee the text:
To make text superscript:
To make text subscript:
To align text to the left side of the post:
- Note: This is the default, you will only need to use this is you have set other text to a different alignment.
To align text to the center of the post:
To align text to the right side of the post:
To put a horizontal line in the post to separate Text:
How to change the text color and size
To alter the color or size of your text the following tags can be used. Keep in mind that how the output appears will depend on the viewers browser and system:
Changing the color of text is achieved by wrapping it in [color=][/color]. You can specify either a recognized color name (eg. red, blue, yellow, etc.) or the hexadecimal triplet alternative (eg. #FFFFFF, #000000, etc.) For example, to create red text you could use:
Changing the text size is achieved in a similar way using [size=][/size]. This tag is dependent on the template you are using but the recommended format is a numerical value, starting at 1 (Very small), the default is set at 2, and we don’t recommend going beyond 8 (very large). For example:
Can I combine formatting tags?
Yes, of course you can; for example to get someone’s attention you may write:
We don't recommend you output lots of text that looks like this, though! Remember that it is up to you, the poster, to ensure that tags are closed correctly. For example, the following is incorrect: Text[/quote][/u]
Quoting and outputting fixed-width text
Quoting text in replies
There are two ways you can quote text: with a reference or without.
When you utilize the Quote function to reply to a post on the board you should notice that the post text is added to the message window enclosed in a
The second method allows you to blindly quote something. To utilize this enclose the text in [quote][/quote] tags. When you view the message it will simply show: Quote: before the text itself.[/ul]
Outputting code or fixed width data
If you want to output a piece of code or in fact anything that requires a fixed width with a Courier-type font, you should enclose the text in [code][/code] tags, eg.
All formatting used within [code][/code] tags is retained when you later view it.[/ul]
Generating lists
Creating an Unordered list
BBCode supports two types of lists, unordered and ordered. They are essentially the same as their HTML equivalents. An unordered list ouputs each item in your list sequentially one after the other indenting each with a bullet character. To create an unordered list you use [ul][/ul] and define each item within the list using [/li][li]. For example:
[ul]
[li] Text 1 [/li]
[li] Text 2 [/li]
[li] Text 3 [/li]
[/ul]
This would generate the following list:
- Text 1
- Text 2
- Text 3
Creating an Ordered list Note: Ordered lists are currently unavailable on Proboards®
The second type of list, an ordered list gives you control over what is output before each item. To create an ordered list you use
[ol=1]
[li] Text 1 [/li]
[li] Text 2 [/li]
[li] Text 3 [/li]
[/ol]
Will generate the following:
Whereas for an alphabetical list you would use:
[ol=a]
[li] Text 1 [/li]
[li] Text 2 [/li]
[li] Text 3 [/li]
[/ol]
Giving:
Creating Links
Linking to another site
BBCode supports a number of ways of creating URL links.
The first of these uses the [a href=][/a] tag; whatever you type after the = sign will cause the contents of that tag to act as a URL. For example, to link to Hangout Area you could use:
[/ul]
If you want the URL itself displayed as the link you can do this by simply using:
[/ul]
Additionally Proboards® features something called Magic Links which will turn any syntactically correct URL into a link without you needing to specify any tags or even the leading http://. For example typing hangoutarea.proboards.com/ into your message will automatically lead to hangoutarea.proboards.com/ being output when you view the message.
For e-mail address you must specify the e-mail with the tage [email][/email]:
[/ul]
As with all the BBCode tags you can wrap URLs around any of the other tags such as [img][/img], [b][/b], etc. As with the formatting tags it is up to you to ensure the correct open and close order is following. For example:
[/ul]
Showing images in posts
Adding an image to a post
BBCode incorporates a tag for including images in your posts. Two very important things to remember when using this tag are: many users do not appreciate lots of images being shown in posts and second, the image you display must already be available on the Internet (it cannot exist only on your computer, for example, unless you run a webserver!). There is currently no way of storing images locally with Poboards®. To display an image, you must surround the URL pointing to the image with [img][/img] tags. For example:
[a href="http://hangoutarea.proboards.com/"][img src="http://guidesmedia.ign.com/guides/image/jak2_guide.jpg"][/a] would generate:
[/ul]
