A Guide to BBCode

• jump to:
• introduction
• text formatting
• quoting and outputting fixed width text

• generating lists
• creating links
• showing images or videos in posts

Introduction

What is BBCode?

BBCode is a special implementation of HTML. Whether you can actually use BBCode in your posts on the forum is determined by the administrator. In addition, you can disable BBCode on a per post basis via the posting form. BBCode itself is similar in style to HTML: tags are enclosed in square braces [ and ] rather than < and > and it offers greater control over what and how something is displayed. Depending on the template you are using you may find adding BBCode to your posts is made much easier through a clickable interface above the message area on the posting form. Even with this you may find the following guide useful.

Text Formatting

How to create bold, italic and underlined text

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]

  example: [b]Hello[/b]

  output: Hello

• For underlining use [u][/u]

  example: [u]Good Morning[/u]

  output: Good Morning

• To italicise text use [i][/i]

  example: This is [i]Great![/i]

  output: This is Great!

Can I combine formatting tags?

Yes, of course you can; for example to get someones attention you may write:

[b][i][u]LOOK AT ME![/u][/i][/b]

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. For example, the following is incorrect:

[b][u]This is wrong[/b][/u]

Quoting and outputting fixed-width text

Quoting text

There are three ways you can quote text:

• To quote text, use the [quote][/quote] tags. This results with the quote being displayed in a separate highlighted block which stands out to the reader.

  Here is an example of a message using a simple quote:

  [quote]The reports of my death are greatly exaggerated[/quote] -Mark Twain

• To indicate a reference to a quote, you can add a 'user' attribute to the tag:
  [quote user=""][/quote].   For example:

  [quote user="Mark Twain"]Be careful about reading health books. You may die of a misprint.[/quote]

  This will result with the text Mark Twain wrote: above your highlighted quote

• When you use the Reply button to reply to a post, your should notice that reply automatically includes a [quote][/quote] block like the one in this example:

  [quote postid="42" user="MarkTwain"]There is no sadder sight than a young pessimist.[/quote]

  As you can see, a reply quote adds an additional "postid" attribute that references the original post. This will result in MarkTwain wrote: appearing as a link to that post.

  While entering your reply, you can trim irrelevant portions of the original post, but any intentional mis-quoting is frowned upon, and may result in a probation of your forum privalges.

Generating lists

Creating an Un-ordered 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 [list][/list] and define each item within the list using [*]. For example, to list your favorite colours you could use:

[list]
[*]Red
[*]Blue
[*]Yellow
[/list]

This would generate the following list:

• Red
• Blue
• Yellow

Creating an Ordered list

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 [list=1][/list] to create a numbered list. As with the unordered list items are specified using [*]. For example:

[list=1]
[*]Go to the shops
[*]Buy a new computer
[*]Swear at computer when it crashes
[/list]

will generate the following:

1. Go to the shops
2. Buy a new computer
3. Swear at computer when it crashes

Creating Links

Linking to another site

BBCode supports a number of ways of creating URIs, Uniform Resource Indicators better known as URLs.

• 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 www.woot.com you could use:

  [url=http://www.woot.com/]Visit Woot[/url]

  This would generate the following link: Visit Woot

  You will notice the link opens in a new 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:

  [url]http://www.woot.com/[/url]

  This would generate the following link: http://www.woot.com/

• Additionally BBCode features something called Magic Links which will turn any syntatically correct URL into a link without you needing to specify any tags or even the leading http://. For example typing www.woot.com into your message will automatically result in www.woot.com being displayed when the message is viewed.

• The same thing applies equally to email addresses; you can either specify an address explicitly, like:

  [email]no.one@domain.adr[/email]

  which will output no.one@domain.adr

  Also, you can just type: no.one@domain.adr into your message and it will be automatically converted when viewed.

As with all the BBCode tags you can wrap URLs around any of the other tags such as [img][/img] (see next entry), [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://www.host.com/] [img]http://www.host.com/logo.jpg[/url][/img]

is not correct which may lead to your post being deleted so take care.

Showing images or videos 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 BBCode. To display an image, you must surround the URL pointing to the image with [img][/img] tags. For example:

[img]http://www.woot.com/images/forums/monkey-hat.png[/img]

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

[url=http://www.woot.com/]
[img]http://www.woot.com/images/forums/monkey-hat.png [/img][/url]

would generate:

Adding a YouTube video to a post

We've added a special feature for you to shock and awe the community with:
You can now embed YouTube videos into your posts! This is done using the [youtube=VideoID][/youtube] tags. For example:

[youtube=1YYF-45T0R4][/youtube]

this would embed this video: