Post by Pickle on Nov 17, 2008 15:11:15 GMT
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 ubbcd 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]Text[/b] will become Text
For underlining use [u][/u], for example:
[u]Text[/u] becomes Text
To italicize text use [i][/i], eg.
[i]Text[/i] would give Text
To Strike through text:
[s]Text[/s] would giveText
To make the text glow:
[glow=red,2,300]Text[/glow] would give [glow=red,2,300]Text[/glow]
Note: Glow is only compactable with Internet Explore 7. If you are using another browser the effect will not be visible.
To make a shadow:
[shadow=red,left,300]Text[/shadow] would give [shadow=red,left,300]Text[/shadow]
Note: Shadow is only compactable with Internet Explore 7. If you are using another browser the effect will not be visible.
To move or marquee the text:
[move]Text[/move] would give
To make text superscript:
[sup]Text[/sup] would give Text
To make text subscript:
[sub]Text[/sub] would give Text
To align text to the left side of the post:
[left]Text[/left]
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:
[center]Text[/center]
To align text to the right side of the post:
[right]Text[/right]
To put a horizontal line in the post to separate Text:
[hr] would give
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=red]Text[/color] or [color=FF0000]Text[/color] will both output Text
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=1]Text[/size] will generally be text whereas [size=4]Text[/size] will be Text
Can I combine formatting tags?
Yes, of course you can; for example to get someone’s attention you may write:
[size=4][color=red][b]LOOK AT ME![/b][/color][/size] this would output LOOK AT ME!
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.
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 [quote=""][/quote] 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 i wrote, you would enter:
[quote="Pickle™"]The text i wrote would go here[/quote][noubbc] The resulting output will automatically add: Pickle™ 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 [noubbc][quote][/quote] tags. When you view the message it will simply show: Quote: before the text itself.
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.
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]
[/li][li]
[/li][li]
[/li][/ul]
This would generate the following list:
Creating an Ordered list Note: Ordered lists are currently unavailable on Proboards®
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 The Occult Lodge you could use:
[url=http://thetowerlibrary.proboards.com]Visit The Tower Library![/url] This would generate the following link, Visit The Tower Library! The link will open in a new tab/window so the user can continue browsing the forums if they wish.
If you want the URL itself displayed as the link you can do this by simply using:
[a href="http://thetowerlibrary.proboards.com"]http://thetowerlibrary.proboards.com[/a] This would generate the following link: thetowerlibrary.proboards.com
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.thetowerlibrary.proboards.com into your message will automatically lead to www.thetowerlibrary.proboards.com being output when you view the message.
For e-mail address you must specify the e-mail with the tage [email][/email]:
[email]kgrimes@live.co.uk[/email] which will output kgrimes@live.co.uk
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=http://thetowerlibrary.proboards.com][img] [a href="http://img396.imageshack.us/img396/8718/djvpmcmdmhlw9.jpg"]http://img396.imageshack.us/img396/8718/djvpmcmdmhlw9.jpg[/a] [/url][/img] is not correct which may lead to your post being alterd so take care.
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!), you can host pictures on sites such as www.ixdrive.co.uk or www.imageshack.us. To display an image, you must surround the URL pointing to the image with [img][/img] tags. For example:
[img src="http://img396.imageshack.us/img396/8718/djvpmcmdmhlw9.jpg"] As noted in the URL section above you can wrap an image in a [a href=""][/a] tag if you wish, eg.
[url=http://thetowerlibrary.proboards.com/][img src="http://img396.imageshack.us/img396/8718/djvpmcmdmhlw9.jpg"][/url] would generate:
You will noticed that the picture is now clickable.
If you need any other help regarding UBBC codes just ask
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 ubbcd 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]Text[/b] will become Text
For underlining use [u][/u], for example:
[u]Text[/u] becomes Text
To italicize text use [i][/i], eg.
[i]Text[/i] would give Text
To Strike through text:
[s]Text[/s] would give
To make the text glow:
[glow=red,2,300]Text[/glow] 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.
To make a shadow:
[shadow=red,left,300]Text[/shadow] 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.
To move or marquee the text:
[move]Text[/move] would give
To make text superscript:
[sup]Text[/sup] would give Text
To make text subscript:
[sub]Text[/sub] would give Text
To align text to the left side of the post:
[left]Text[/left]
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:
[center]Text[/center]
To align text to the right side of the post:
[right]Text[/right]
To put a horizontal line in the post to separate Text:
[hr] would give
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=red]Text[/color] or [color=FF0000]Text[/color] will both output Text
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=1]Text[/size] will generally be text whereas [size=4]Text[/size] will be Text
Can I combine formatting tags?
Yes, of course you can; for example to get someone’s attention you may write:
[size=4][color=red][b]LOOK AT ME![/b][/color][/size] this would output LOOK AT ME!
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.
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 [quote=""][/quote] 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 i wrote, you would enter:
[quote="Pickle™"]The text i wrote would go here[/quote][noubbc] The resulting output will automatically add: Pickle™ 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 [noubbc][quote][/quote] tags. When you view the message it will simply show: Quote: before the text itself.
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.
echo "This is some code"
All formatting used within [code][/code] tags is retained when you later view it.
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]
[/li][li]
[/li][li]
[/li][/ul]
This would generate the following list:
- text1
- text2
- text3
Creating an Ordered list Note: Ordered lists are currently unavailable on Proboards®
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 The Occult Lodge you could use:
[url=http://thetowerlibrary.proboards.com]Visit The Tower Library![/url] This would generate the following link, Visit The Tower Library! The link will open in a new tab/window so the user can continue browsing the forums if they wish.
If you want the URL itself displayed as the link you can do this by simply using:
[a href="http://thetowerlibrary.proboards.com"]http://thetowerlibrary.proboards.com[/a] This would generate the following link: thetowerlibrary.proboards.com
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.thetowerlibrary.proboards.com into your message will automatically lead to www.thetowerlibrary.proboards.com being output when you view the message.
For e-mail address you must specify the e-mail with the tage [email][/email]:
[email]kgrimes@live.co.uk[/email] which will output kgrimes@live.co.uk
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=http://thetowerlibrary.proboards.com][img] [a href="http://img396.imageshack.us/img396/8718/djvpmcmdmhlw9.jpg"]http://img396.imageshack.us/img396/8718/djvpmcmdmhlw9.jpg[/a] [/url][/img] is not correct which may lead to your post being alterd so take care.
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!), you can host pictures on sites such as www.ixdrive.co.uk or www.imageshack.us. To display an image, you must surround the URL pointing to the image with [img][/img] tags. For example:
[img src="http://img396.imageshack.us/img396/8718/djvpmcmdmhlw9.jpg"] As noted in the URL section above you can wrap an image in a [a href=""][/a] tag if you wish, eg.
[url=http://thetowerlibrary.proboards.com/][img src="http://img396.imageshack.us/img396/8718/djvpmcmdmhlw9.jpg"][/url] would generate:
You will noticed that the picture is now clickable.
If you need any other help regarding UBBC codes just ask