Reply to Thread
Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16

Thread: Forum Guide: Using BB tags

  1. #1
    Battle Hardened Contributor Jamdoggy's Avatar
    Join Date
    Jun 2012
    Location
    Halesowen, England
    Posts
    370
    World
    Sandycove

    Forum Guide: Using BB tags

    Jamdoggy's Guide to BB Codes
    Thanks to BB_Rawren, CL_Aquila, BB_Ravel and 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.
    . . .


    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
    [img]http://static1.wikia.nocookie.net/thesettlersonline/images/6/64/Flowerbed_red.png[/img] Line 1
    Line 2
    Line 3
    Line 4
    Line 5
    Displays:
    Line 1
    Line 2
    Line 3
    Line 4
    Line 5

    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:
    Example:
    [video]http://www.youtube.com/watch?v=40jFY7NWrkw[/video]
    Displays:

    . . .


    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:
    • 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:
    [list=1][*]Item 1[*]Item 2[*]Item 3[/list]
    Displays:
    1. Item 1
    2. Item 2
    3. 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.
    Example:
    Inline Thread Link: [thread]27212[/thread]
    Custom Thread Text: [thread=27212]My Thread[/thread]
    Inline Post Link: [post]250169[/post]
    Custom Post Text: [post=250169]My Post[/post]
    Displays:
    Inline Thread Link: https://forum.thesettlersonline.com/showthread.php?t=27212
    Custom Thread Text: My Thread
    Inline Post Link: https://forum.thesettlersonline.com/showthread.php?p=250169
    Custom Post Text: My Post

    . . .


    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:
    I said this
    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:
    Spoiler
    This information is hidden. Shhhh...

    . . .


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

    Last edited by Fexno; 30.10.15 at 11:15. Reason: Added smilies

  2. #2
    Battle Hardened Contributor Jamdoggy's Avatar
    Join Date
    Jun 2012
    Location
    Halesowen, England
    Posts
    370
    World
    Sandycove
    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

  3. #3
    Raving Rabbid matie2506's Avatar
    Join Date
    May 2012
    Location
    the netherlands
    Posts
    545
    World
    Sandycove
    nice one jamdoggy
    Retired settler, may 2012 - oktober 2017

  4. #4
    Raving Rabbid matie2506's Avatar
    Join Date
    May 2012
    Location
    the netherlands
    Posts
    545
    World
    Sandycove
    can u add the :

    example

    [spoiler] Spoilered text [/spoiler]

    Displays

    Spoiler
    Spoilered text
    Last edited by matie2506; 28.02.14 at 08:43.
    Retired settler, may 2012 - oktober 2017

  5. #5
    Battle Hardened Contributor Jamdoggy's Avatar
    Join Date
    Jun 2012
    Location
    Halesowen, England
    Posts
    370
    World
    Sandycove
    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...
    Last edited by Jamdoggy; 16.02.14 at 19:28.

  6. #6
    Ruler of the Land
    Join Date
    Apr 2013
    Posts
    1,563
    World
    Newfoundland
    May I suggest some special BB codes (for this forum) to add to your list? =)

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

  7. #7
    Battle Hardened Contributor Jamdoggy's Avatar
    Join Date
    Jun 2012
    Location
    Halesowen, England
    Posts
    370
    World
    Sandycove
    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...

  8. #8
    Ruler of the Land BB_Ravel's Avatar
    Join Date
    Nov 2011
    Posts
    2,852
    World
    Newfoundland
    Thank you, Jamdoggy, for doing all of this! I really think it will help a lot of players.

  9. #9
    Raving Rabbid matie2506's Avatar
    Join Date
    May 2012
    Location
    the netherlands
    Posts
    545
    World
    Sandycove
    Quote Originally Posted by Jamdoggy View Post
    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
    Retired settler, may 2012 - oktober 2017

  10. #10
    Architect of the Empire
    Join Date
    Jun 2012
    Posts
    959
    World
    Sandycove
    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.




    It's easy to overlook them but they include the complete BB Code List currently working in a specific forum and the Smilies 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.

Reply to Thread

Similar Threads

  1. [GUIDE] Fhearghus's forum guide for dummies
    By Fhearghus in forum Guides
    Replies: 23
    Last Post: 14.08.15, 09:45
  2. BEST BEGINNER GUIDE in this Forum
    By Gamla in forum Guides
    Replies: 1
    Last Post: 06.10.13, 11:00
  3. [Guide] Forum Avatars!
    By Sinister-King in forum Game Guides
    Replies: 5
    Last Post: 17.02.13, 19:57

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Ubisoft uses cookies to ensure that you get the best experience on our websites. By continuing to use this site you agree to accept these cookies. More info on our privacy.