BBCode Guide and Tutorial

[DE Help Guide]

BBCode Guide and Tutorial

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.

[/b][/noubbc] will become Text[/ul]
For underlining use [u][/u], for example:

[/u][/noubbc] becomes Text[/ul]
To italicize text use [i][/i], eg.

[/i][/noubbc] would give Text[/ul]
To Strike through text:

[/s][/noubbc] would give Text[/ul]
To make the text glow:

[/noubbc] would give [glow=red,2,300]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:

[/noubbc] would give [shadow=red,left,300]Text[/shadow]

• The first section that says “red” indicates the colour 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:

[/move][/noubbc] would give Text[/ul]
To make text superscript:

[/sup][/noubbc] would give ^Text[/ul]
To make text subscript:

[/sub][/noubbc] would give _Text[/ul]
To align text to the left side of the post:

[/left][/noubbc]

• Note: This is the default, you will only need to use this is you have set other text to a different alignment.

[/ul]
To align text to the center of the post:

[/center][/noubbc][/ul]
To align text to the right side of the post:

[/right][/noubbc][/ul]
To put a horizontal line in the post to separate Text:

[/noubbc] would give[/ul]

---

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:

[/color][/noubbc] or [color=FF0000]Text[/color] will both output Text[/ul]
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:

[/size][/noubbc] will generally be text whereas [size=4]Text[/size] will be Text[/ul]
Can I combine formatting tags?
Yes, of course you can; for example to get someone’s attention you may write:

[/b][/color][/size][/noubbc] this would output LOOK AT ME![/ul]
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[/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

block. This method allows you to quote with a reference to a person or whatever else you choose to put. For example, to quote a piece of text DVM-501 wrote, you would enter:

[/quote][/noubbc] The resulting output will automatically add: DVM-501 wrote: before the actual text. Remember that you must include the quotation marks "" around the name you are quoting -- they are not optional.

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.

[/code]

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

to create a numbered list or alternatively

for an alphabetical list. As with the unordered list items are specified using [/li][li]. For example:

[ul]
[li] Text 1
[/li][li] Text 2
[/li][li] Text 3
[/li][/ul]

Will generate the following:

Whereas for an alphabetical list you would use:

[ul]
[li] Text 1
[/li][li] Text 2
[/li][li] Text 3
[/li][/ul]

Giving:

Creating Links
Linking to another site
BBCode supports a number of ways of creating URL links.

The first of these uses the [url=][/url] tag; whatever you type after the = sign will cause the contents of that tag to act as a URL. For example, to link to Dystopiatic Eco you could use:

[/url][/noubbc] This would generate the following link, Visit Dystopiatic Eco! The link will open in a new tab/window so the user can continue browsing the forums if they wish.
[/ul]
If you want the URL itself displayed as the link you can do this by simply using:

[/a][/noubbc] This would generate the following link: www.dystopiaticeco.proboards66.com.
[/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 www.dystopiaticeco.proboards66.com into your message will automatically lead to www.dystopiaticeco.proboards66.com being output when you view the message.

For e-mail address you must specify the e-mail with the tage [email][/email]:

[/email][/noubbc] which will output [e-mail].
[/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:

[/url][/img][/noubbc] is not correct which may lead to your post being deleted so take care.
[/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:

[/noubbc] As noted in the URL section above you can wrap an image in a tag if you wish, eg.

[url=http://www.dystopiaticeco.proboards66.com/][img src="http://guidesmedia.ign.com/guides/image/jak2_guide.jpg"][/url] would generate:


[/ul]