Forum Guide: Using BB tags
Jamdoggy's Guide to BB Codes
The TSO Forums can be a confusing place for new players, and most first-time visitors will come to the forums to specifically post something, but may be nervous of formatting their text using BB-Code tags, as they don't really know how to use them. The aim of this post is to help those users to learn what they can and can't do, but even experienced forum users may learn a few tricks.
This guide will be designed to be easy to read, but for new forum users, I recommend reading it all.
. . .
Contents
. . .
What are BB Codes
BB Codes are used in forum posts to format the text. They are used like parentheses (brackets), which go around the text that you wish to be formatted. The BB Code is always in square brackets, with the first (opening) tag and second (closing) tag being the same, except that the closing tag has a slash. As an example, we will look at one of the most basic BB Codes, which makes bold text.
Example:[b]This text is in bold.[/b] This is not.
Displays:This text is in bold. This is not.
BB Codes can be nested within each other, but you should avoid overlapping codes:
Correct:[b]This text is in bold. [i]This is Bold and Italic[/i][/b] [i]This is Italic.[/i]
Incorrect:[b]This text is in bold. [i]This is Bold and Italic[/b] This is Italic.[/i]
. . .
Bold, Italics, Underline, Strikethrough and Highlight
These five BB Codes are quick and easy to use, and change the way text looks:
Examples:[b]This text is in bold.[/b]
[i]This text is in italics.[/i]
[u]This text is underlined.[/u]
[s]This text is in strikethrough.[/s]
[highlight]This text is highlighted.[/highlight]
Displays:This text is in bold.
This text is in italics.
This text is underlined.
This text is in strikethrough.
This text is highlighted.
. . .
Paragraph Justification
Paragraph Justification is whether your text is on the left or right of the page, or in the centre. By default, text is always left-justified, so in normal use, the [left][/left] tags are almost never used. Note that the tags use the American spelling of the word, "center".
Examples:This is normal
[left]This is left-justified[/left]
[right]This is right-justified[/right]
[center]This is centred[/center]
Displays:This is normal
This is left-justified
This is right-justified
This is centred
. . .
Paragraph Indent
You can indent a whole paragraph or section of text, simply be enclosing it in [indent][/indent] tags:
Examples:This is normal
[indent]This is indented[/indent]
[indent][indent]This is indented twice[/indent][/indent]
Displays:This is normal
This is indented
This is indented twice
. . .
Text Size
The [size][/size] tags are slightly different, in that they require a value. This is done in the following way:
Examples:[size=1]This text is size 1.[/size]
[size=2]This text is size 2.[/size]
[size=3]This text is size 3.[/size]
[size=4]This text is size 4.[/size]
[size=5]This text is size 5.[/size]
[size=6]This text is size 6.[/size]
[size=7]This text is size 7.[/size]
Displays:This text is size 1.
This text is size 2.
This text is size 3.
This text is size 4.
This text is size 5.
This text is size 6.
This text is size 7.
. . .
Text Colour
Colour should always be used sparingly, for emphasis - nobody wants to wade through a post that causes eye-strain. The BB Code for changing the colour of the text uses the American word, color. The actual color can be specified in two ways. The first is a simple keyword - a list of keywords is on the W3Schools site, here:
Examples:[color=blue]This is blue[/color]
Displays:This is blue
The second method allows more flexibility, as it requires a 'hash-code' for the colour. This is a 6-digit hexadecimal value, preceded by a hash, where the first two code digits signify the amount of red, the second two code digits are the amount of green, and the final two digits are the amount of blue (RRGGBB). Each digit pair can go up to FF (the max in hexadecimal, equal to 255 in decimal). Some colour hash-codes are shown at the same link as the colour keywords above. Note that #FFFFFF is white, and #000000 is black.
Examples:[color=#0000FF]This is blue[/color]
[color=#800080]This is dark magenta[/color]
Displays:This is blue
This is dark magenta
. . .
Adding Images
There are actually three different BB codes for adding immages to your posts. These have different results, depending on where you want your image to appear. Each set of codes requires the direct URL of an image between them. The three codes are:- [img][/img] - Put an image in-line with the text (as if it were a character).
- [ifl][/ifl] - Put an image floating to the left.
- [ifr][/ifr] - Put an image floating to the right.
Note that 'floating' images will allow you to place multiple lines of text at the side of the image, but the image can only be fixed on the left or right side of the page. If you want the image to appear away from the side, then you must use the [img][/img] tags, but this limits you to one line of text at the side.
Example:[ifl]http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.png[/ifl]Line 1
Line 2
Line 3
Line 4
Line 5
Displays:
Line 1
Line 2
Line 3
Line 4
Line 5
Example:[ifr]http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.png[/ifr]Line 1
Line 2
Line 3
Line 4
Line 5
Displays:
Line 1
Line 2
Line 3
Line 4
Line 5
. . .
Commenting and Using Clear
One rather strange BB Code that appears to have no use whatsoever is the [clear][/clear] tags. These actually removes what you put in them from your post, like using comments in programming - they are not even output to the browser hidden in the HTML code. Note that this will only work if there is something between the tags, and that anyone is able to see your comments if they quote your post.
Example:This is visible. [clear]This is invisible.[/clear] This is visible
Displays:This is visible.
This is visible.
Note that using these tags forces you onto a new line. This is where the code becomes more powerful. When used in conjunction with the [ifl][/ifl] and [ifr][/ifr] tags (see section above), you can jump to below the image at any time. Compare this example with the ones above:
Example:[ifl]http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.png[/ifl]Line 1
Line 2[clear]skip to after image[/clear]
Line 3
Line 4
Line 5
Displays:
Line 1
Line 2
Line 3
Line 4
Line 5
. . .
Adding Videos
It is possible to embed a video from various sources directly into your posts. Of course, YouTube is the most common source, but other sources may be possible. The following example embeds the 'BB Backstage' video for Easter 2013:
. . .
Making Lists
There are 2 types of list that you can make in BB Code, and they are done in very similar ways. The both use the [list][/list] tags around the whole list, and a single [*] tag before each list item. You do NOT need a closing tag for list items.
Also, note that the [b][*][b] tags can be at the start of a new line, or all on one line. This has no bearing on how the list looks.
The first is a basic bulletpointed list
Example:[list][*]Item 1[*]Item 2[*]Item 3[/list]
Displays:
The second is a numerical list, which simply requires you to add a value to the opening list tag:
Example:[list=1][*]Item 1[*]Item 2[*]Item 3[/list]
Displays:- Item 1
- Item 2
- Item 3
. . .
Creating Links
Adding a link to another website (or another post within the forum) is quite easily done. You can just output the page URL as a link, or have custom text that is clickable. Links to email addresses should use the [email][/email] tags.
Example:Inline Link: [url]http://www.thesettlersonline.com/[/url]
Custom Text: [url=http://www.thesettlersonline.com/]The Settlers Online Homepage[/url]
Inline Email Link: [email]me@here.com[/email]
Custom Email Text: [email=me@here.com]Email Me[/email]
Displays:Inline Link: http://www.thesettlersonline.com/
Custom Text: The Settlers Online Homepage
Inline Email Link: me@here.com
Custom Email Text: Email Me
. . .
Links to Forum Posts
The forum BB Codes also provide an easy way to put a link to a specific thread or post on the forums. The following examples all point to this post/thread. To get the thread number, just go to the first page of the correct thread, and look at your browser's URL bar - the number should be there. To get an individual post number, find the post in the thread, and at the top-right of the post is a number that shows where it is in the thread. Click on this number, and the page will reload with the post number in your browser's URL bar.
. . .
Navigation Links
If you make a long forum post, and want to allow users to click on items to jump elsewhere, this is done with 'navigation links'. The 'Contents' at the top of this post, and all the 'Back to Top' links work this way.
Firstly, you will need to create a point to jump to when the link is clicked, known as an 'anchor'. This is done with the [aname][/aname] tags. There must be something between these tags for it to work, although this can be an image. In this post, for example, the little blue triangles before each section header are the anchor.
Example:[aname=thetopofmypage]Top of Page[/aname]
Displays:Top of Page
Now that you have an anchor, you can make a link to jump to it. This is done with the [jumpto][/jumpto] tags.
Example:[jumpto=thetopofmypage]Return to Top[/jumpto]
Displays:Return to Top
Note that clicking the link in the 'jumpto' example above will jump to the aname example...
. . .
Quoting Other People
To add a quote, you just use [quote][/quote] tags, but can optionally put the name of the person you are quoting:
Example:[quote]I said this[/quote]
[quote=Dave]Dave said this[/quote]
Displays:
Quote:
Originally Posted by Dave
Dave said this
. . .
Hiding Secrets and Spoilers
To hide information in a spoiler box, that requires the reader to click on it to make it visible, you use [spoiler][/spoiler] tags. This is obviously useful for putting spoilers into your posts, that some people may not wish to accidentally read. If you use spoilers, then it is often a good idea to explain why they are there, giving the reader an informed choice on whether to open it.:
Example:[spoiler]This information is hidden. Shhhh...[/spoiler]
Displays:
. . .
Tables
Tables cannot be used in BB-Code, as the code to make rows are cells isn't enabled. You can, however, use the [t][/t] tags to put contents into a dashed box, as has been used many times in this guide.
Example:[t]This is in a table/box[/t]
Displays:
This is in a table/box
. . .
Quoting Source Code
Not used very often on the forums, it is possible to put programming source code, and even have your HTML or PHP scripts syntax highlighted:
Example:[code]This is a simple code box, with monospaced font and no syntax highlighting.[/code]
[html]<html><!--This is a HTML code box, with monospaced font and HTML syntax highlighting. -->
<head><title>My Web Page</title></head>
<body><img src="http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.png" alt="Red Flowerbed" \></body>
</html>[/html]
[php]/* This is a PHP code box, with monospaced font and HTML syntax highlighting. */
function writeMsg()
{
echo "Hello world!";
}
writeMsg(); // call the function[/php]
Displays:
Code:
This is a simple code box, with monospaced font and no syntax hghlighting.
HTML Code:
<html><!--This is a HTML code box, with monospaced font and HTML syntax highlighting. -->
<head><title>My Web Page</title></head>
<body><img src="http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.png" alt="Red Flowerbed" width="94" height="62"\></body>
</html>
PHP Code:
/* This is a PHP code box, with monospaced font and HTML syntax highlighting. */
function writeMsg()
{
echo "Hello world!";
}
writeMsg(); // call the function
. . .
Ignore/Output BB Codes
You may wish to 'ignore' BB Codes, so that they are shown in your post by readers. These tags have been used many, many times in this guide to output the BB Code tags that you've been reading. This is done with the [noparse][/noparse] tags
Examples:This shows how to do bold tags: [noparse][b]Bold Text[/b][/noparse]
Displays:This shows how to do bold tags: [b]Bold Text[/b]
. . .
Smilies and Emoticons
Emoticons are small images that express your current emotions, such as happiness, sadness or laughter. Smilies is a generic term that includes emoticons and other small icons that can be used to enhance your forum posts. The forums have a number of Settlers-related smilies that you can use.
The easiest way to access the smilies is in 'Full Editor' mode (not 'Quick Edit' mode) when you are writing a forum post. On the right of the screen, you will see just a few of the available icons, but you can click [More] link below those icons to view the full list in a pop-up window. To add an icon to your post, just click on it. This will add the smilie text into your post for you.
Alternatively, you can enter the smilie text manually. The most commonly used smilies are shown below as an example, but the full list is available any time you are using the 'Full Editor':
