Forum Guide: Using BB tags

[Jamdoggy]

Jamdoggy's Guide to BB Codes
Thanks to BB_Rawren (http://forum.thesettlersonline.net/members/560840-BB_Rawren), CL_Aquila (http://forum.thesettlersonline.net/members/405497-CL_Aquila), BB_Ravel (http://forum.thesettlersonline.com/members/416938-BB_Ravel) and Fexno (http://forum.thesettlersonline.com/members/570540-Fexno), without whom, this thread wouldn't be here!
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.

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngContents
What are BB Codes?
Bold, Italics, Underline, Strikethrough and Highlight
Paragraph Justification
Paragraph Indent
Text Size
Text Colour
Adding Images
Commenting and Using Clear
Adding Videos
Making Lists
Creating Links
Links to Forum Posts
Navigation Links
Quoting Other People
Hiding Secrets and Spoilers
Tables
Quoting Source Code
Ignore/Output BB Codes
Smilies and Emoticons

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngWhat 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:

This text is in bold. 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:

This text is in bold. This is Bold and Italic This is Italic.
Incorrect:

This text is in bold. This is Bold and Italic This is Italic.

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngBold, Italics, Underline, Strikethrough and Highlight
These five BB Codes are quick and easy to use, and change the way text looks:
Examples:

This text is in bold.

This text is in italics.

This text is underlined.

This text is in strikethrough.

This text is highlighted.
Displays:

This text is in bold.

This text is in italics.

This text is underlined.

This text is in strikethrough.

This text is highlighted.

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngParagraph 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
tags are almost never used. Note that the tags use the American spelling of the word, "center".
Examples:

This is normal


This is left-justified


This is right-justified


This is centred
Displays:

This is normal


This is left-justified


This is right-justified


This is centred

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngParagraph Indent
You can indent a whole paragraph or section of text, simply be enclosing it in
tags:
Examples:

This is normal


This is indented



This is indented twice


Displays:

This is normal


This is indented



This is indented twice

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngText Size
The tags are slightly different, in that they require a value. This is done in the following way:
Examples:

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.
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.

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngText 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 (http://www.w3schools.com/cssref/css_colornames.asp):
Examples:

This is blue
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:

This is blue
This is dark magenta
Displays:

This is blue
This is dark magenta

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngAdding 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:
- Put an image in-line with the text (as if it were a character).
- Put an image floating to the left.
- 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 tags, but this limits you to one line of text at the side.
Example

http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.png Line 1
Line 2
Line 3
Line 4
Line 5
Displays:
http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.png Line 1
Line 2
Line 3
Line 4
Line 5
Example:

http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.pngLine 1
Line 2
Line 3
Line 4
Line 5
Displays:
http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.pngLine 1
Line 2
Line 3
Line 4
Line 5
Example:

http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.pngLine 1
Line 2
Line 3
Line 4
Line 5
Displays:
http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.pngLine 1
Line 2
Line 3
Line 4
Line 5

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngCommenting and Using Clear
One rather strange BB Code that appears to have no use whatsoever is the 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. This is invisible. This is visible
Displays:

This is visible. This is invisible. 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 and tags (see section above), you can jump to below the image at any time. Compare this example with the ones above:
Example:

http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.pngLine 1
Line 2skip to after image
Line 3
Line 4
Line 5
Displays:
http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.pngLine 1
Line 2skip to after image
Line 3
Line 4
Line 5

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngAdding 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:
Example:


http://www.youtube.com/watch?v=40jFY7NWrkw
Displays:

http://www.youtube.com/watch?v=40jFY7NWrkw

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngMaking 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 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 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
[b]Example:

Item 1 Item 2 Item 3
Displays:
Item 1 Item 2 Item 3

The second is a numerical list, which simply requires you to add a value to the opening list tag:
Example:


Item 1
Item 2
Item 3

Displays:

Item 1
Item 2
Item 3


Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngCreating 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 tags.
Example:

Inline Link: http://www.thesettlersonline.com/
Custom Text: The Settlers Online Homepage (http://www.thesettlersonline.com/)
Inline Email Link: me@here.com
Custom Email Text: Email Me (me@here.com)
Displays:

Inline Link: http://www.thesettlersonline.com/
Custom Text: The Settlers Online Homepage (http://www.thesettlersonline.com/)
Inline Email Link: me@here.com
Custom Email Text: Email Me (me@here.com)

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngLinks 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.
Example:

Inline Thread Link: 27212
Custom Thread Text: My Thread
Inline Post Link: 250169
Custom Post Text: My Post
Displays:

Inline Thread Link: 27212
Custom Thread Text: My Thread
Inline Post Link: 250169
Custom Post Text: My Post

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngNavigation 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 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:

Top of Page
Displays:

Top of Page
Now that you have an anchor, you can make a link to jump to it. This is done with the tags.
Example:

Return to Top
Displays:

Return to Top
Note that clicking the link in the 'jumpto' example above will jump to the aname example...

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngQuoting Other People
To add a quote, you just use
tags, but can optionally put the name of the person you are quoting:
Example:


I said this

Dave said this
Displays:


I said this

Dave said this

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngHiding Secrets and Spoilers
To hide information in a spoiler box, that requires the reader to click on it to make it visible, you use 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:

This information is hidden. Shhhh...
Displays:

This information is hidden. Shhhh...

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngTables
Tables cannot be used in BB-Code, as the code to make rows are cells isn't enabled. You can, however, use the tags to put contents into a dashed box, as has been used many times in this guide.
Example:

This is in a table/box
Displays:

This is in a table/box

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngQuoting 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:


This is a simple code box, with monospaced font and no syntax highlighting.

<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>


/* This is a PHP code box, with monospaced font and HTML syntax highlighting. */
function writeMsg()
{
echo "Hello world!";
}
writeMsg(); // call the function
Displays:


This is a simple code box, with monospaced font and no syntax hghlighting.


<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>


/* This is a PHP code box, with monospaced font and HTML syntax highlighting. */
function writeMsg()
{
echo "Hello world!";
}
writeMsg(); // call the function

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngIgnore/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 tags
Examples:

This shows how to do bold tags: [b]Bold Text
Displays:

This shows how to do bold tags: Bold Text

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

. . .
http://static1.wikia.nocookie.net/thesettlersonline/images/a/a9/Barr_lg.pngSmilies 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':
http://i1146.photobucket.com/albums/o523/Jamdoggy/TSO/Forum_smilies_1_zpsa7fec154.png

Back to Tophttp://static1.wikia.nocookie.net/thesettlersonline/images/f/f4/Baru.png

[Jamdoggy]

12th Feb 2014: Edited above post: Added 'Navigation Links' section
Re-arranged Contents section to match other sections
Added blue triangles before each header to make them stand out
Made each line in 'Contents' clickable, to jump to the correct section
Added 'Back to Top' link after each section

[matie2506]

nice one jamdoggy :)

[matie2506]

can u add the :

example

Spoilered text

Displays

Spoilered text

[Jamdoggy]

Wow, how did I miss that one? I use it all the time here and on other forums...
Will add it for you when I get a second spare! Thanks for the reminder :)

EDIT: OP now updated with spoiler tags...

[SmurfAsH]

May I suggest some special BB codes (for this forum) to add to your list? =)

Like ::R::R + ::M::M + ::S::S + ::E::E + ::B::B + ::LB::LB + ::A::XB + ::K::K + ::C::C ..

[Jamdoggy]

Technically, those aren't strictly BB Codes, but are 'smilies'.

I agree though that people reading this thread might want to know which smilies are available, so I've added them... :)

[BB_Ravel]

Thank you, Jamdoggy, for doing all of this! I really think it will help a lot of players. :)

[matie2506]

Wow, how did I miss that one? I use it all the time here and on other forums...
Will add it for you when I get a second spare! Thanks for the reminder :)

EDIT: OP now updated with spoiler tags...

You're welcome :)

[Iolanthe]

It's also worth noting that if you scroll to the bottom of a thread, or the bottom of any page where you can add something new; Post New Thread, the Go Advanced option in an existing thread, etc. there are shortcut links.

http://thesettlersonlinewiki.com/uploads/1009137023Forum_PageBottomLinks.JPG


It's easy to overlook them but they include the complete BB Code List (http://forum.thesettlersonline.com/misc.php?do=bbcode) currently working in a specific forum and the Smilies (http://forum.thesettlersonline.com/misc.php?do=showsmilies) so those are quick to find even for a Quick Reply.

The Tag Cloud can be fun to play with too. It's a little bare bones and the link isn't visible in every thread but it does exist and it tries and there's really no telling what it may turn up. :rolleyes:

[Jamdoggy]

Added [highlight], [clear] and [video] tags to the OP.

Huge thanks to BB_Rawren (http://forum.thesettlersonline.net/members/560840-BB_Rawren) for helping to get the [clear] tags copied over from the US forums, and thanks also to BB_Ravel (http://forum.thesettlersonline.com/members/416938-BB_Ravel) and Fexno (http://forum.thesettlersonline.com/members/570540-Fexno) for adding it here, and letting me know.

[Iolanthe]

No doubt it's an oversight but it might also be nice to give a nod to the earlier thread from .net and its creator: How to make fancypants posts with BB Code (http://forum.thesettlersonline.net/threads/19227-How-to-make-fancypants-posts-with-BB-Code)

[Jamdoggy]

Indeed, I learned a few things from CL_Aquila (http://forum.thesettlersonline.net/members/405497-CL_Aquila)'s post on the US forums, and it was my inspiration for my post. I thanked her a while ago in the thread you linked to. ;)

[Iolanthe]

Aye, hence the guess of "oversight". Generally the done thing is to cite one's sources in the finished product.

It is also just fun for an earlier author to see their work noted in new places if it roams, and less fun to stumble upon it unmarked. Though there is now a link from there to here there hasn't been even a standard citation here, which is a little unusual.

[BB_Ravel]

Added [highlight], [clear] and [video] tags to the OP.

Huge thanks to BB_Rawren (http://forum.thesettlersonline.net/members/560840-BB_Rawren) for helping to get the [clear] tags copied over from the US forums, and thanks also to BB_Ravel (http://forum.thesettlersonline.com/members/416938-BB_Ravel) and Fexno (http://forum.thesettlersonline.com/members/570540-Fexno) for adding it here, and letting me know.

BB_Rawren helped with some of the other tags also. So a HUGE thank you to her from me also. I will also give her the link to this thread. :)

[Iolanthe]

Clearly 'indirect' was not the way to go here.

Sources are also cited so we do not commit plagiarism, nor even appear to.

When a work is as heavily inspired by another as the original post was here the earlier piece should be referenced immediately. A frequently non-functioning link to a player profile posted a month on when the source material (http://forum.thesettlersonline.net/threads/19227-How-to-make-fancypants-posts-with-BB-Code) is readily available is, quite simply, a very odd choice.

While it would just have made sense to include the forum generated list of working BB code (http://forum.thesettlersonline.com/misc.php?do=bbcode) for no other reason than that it exists and updates automatically if anything changes, ever since a very slightly adapted bit directly from it has been added to the post it now needs to be cited.

It would probably be wise at this point to also include the Smilies (http://forum.thesettlersonline.com/misc.php?do=showsmilies) due in part to certain similarities of phrasing and just to cover all the bases.

The resistance and disregard shown in this thread for something as simple as appropriate attribution really is completely baffling.


NB: Links to the local forum list of BB codes and the alternate page for Smilies can be found, with some digging, in the forum FAQ (http://forum.thesettlersonline.com/faq.php) -> Reading and Posting Messages or, again, by scrolling to the bottom of any thread page.