The Secrets of BBCode

Discussion in 'Guides & "How To"' started by Lycel, Jun 20, 2017.

Become a member to no longer see this ad. :)

  1. Lycel
    Offline

    Lycel Super Moderator Staff Member

    Super Moderator
    Messages:
    4,121
    [​IMG]
    Good morning, afternoon, evening, or night my dear Skyblockers.
    It has been brought to my attention that many people may not know the more advanced aspects of BBCode. In this, I aim to outline the specific uses of BBCode, but I will be unlikely to go over the basics. For an excellent basic guide by Fizz, click here. I'm writing in a vague, ranting paragraph structure, so I apologise if it's hard to read or stay attentive to.

    Background
    So, what is BBCode? Some people may want a little history and information on the language. If you're just here for the application of BBCode, feel free to skip this little section.
    BBCode is a lightweight markup language used across all sorts of platforms and websites. It's very common on forums and is the bread and butter of XenForo (the forum software of Skyblock Forums). The various tags are parsed by the website from our little square brackets to HTML, the language of most browsers (though it may be a different language if you're viewing this on your DS... for some reason...) before appearing as the beautiful formatting on your screen. I'm going to include what html parses the BBCode into after each paragraph, for those who are curious. Even if you use the tabs on the top of the chat box, it's merely adding the codes to the raw version of the document, which you can see through clicking the top right spanner. As an experiment, I'm typing this entire document, tags and all, in the BBCode editor.

    A little history on BBCode. It's been around for a fair amount of time. It was first released in 1998 in UBB (a forum software), and came into the public when it was included by phpBB, which was then used by many forums as an easier alternative to HTML coding in messages. BBCode stands for Bulletin Board Code, and yes, it is BBCode, not BB Code or bb Code. Skyblock does not exhibit all of the tags that BBCode has to offer (like tables, sadly), and even has some that aren't traditionally included, like the [plain] tags. I will only be going over the obscure ones that are found on Skyblock Forums.

    [Plain]
    This is by far my favourite BBCode tag. If you don't know what it does, you are truly missing out. [plain] and [/plain] allow BB code to not apply to whatever is in the tags. It allows you tell people what tags to use, for example, "Use [[plain]hide]ID[/hide[/plain]] tags for your transaction ID" will become "Use [hide]ID[/hide] tags for your transaction ID" - how efficient and professional of you! No more full stops, brackets or spaces in tags that confuse new users. I'll be using this particular aspect a lot in this thread - every time I want to show you [plain][/plain] I have to type [plain][plain][/plain][/plain], and yes, I had to have three tags to type that just then. Beautiful.

    This is not the only use of these tags, however. Ever tried to make a colon in brackets like this, (as so:), only to have it make a smiley, (as so:) ? Well, if you type [plain](as so:)[/plain], bam! Colon in brackets! Another little example is if you wish to write TL:DR, the ever useful "too long: didn't read". However, if you write it, you'll get a nasty surprise... TL:DR. No, I did not want to express my immense joy at how long this post is. So, just add some plain tags, [plain]TL:DR[/plain], and whamo! No more grinning.

    For my next trick... I shall be revealing a secret that up until now I have closely guarded. Ever wished to post a simple, short reply - perhaps "yes" or "12" to a thread - and been told your message is too short? Well, fret no more, you can type "yes [plain]" and bam - character limit ignored! Your reply will be a simple "yes", in the default colour and style of the forums.


    Just as a quick disclaimer, the [plain] tags do not remove formatting. They will isolate any formatting tags placed within the tags and instead of parsing it through to html, leave it as plain text. It will retain all of the formatting that you've defined outside of the tags. If you wish to remove formatting, you will have to press the T(x) button, or end all of your tags eg [/size][/font][/color] etc.
    HTML equivalent: <plaintext> and <plaintext>

    [Code], [HTML] and [PHP]
    [Code] and [PHP] are lesser known tags found on these forums. There isn't a particularly common use for these, but I'll explain them here nonetheless. [code] and [/code] creates a box, which is set to a default blue, in which your chosen text will be equally spaced. This is important in many coding languages and the reason why text in coding looks so blocky, as little characters like i, l, and punctuation are all far smaller than the "m-spaced" characters, like m (obviously), an m-dash, and an underscore. [Code] makes all of these spaced equally so that telling where spaces and brackets are, and where coding lines up significantly easier. It may be worth noting that formatting is retained within the box, and so if your code conflicts with the tags of BBCode, you may wish to include [plain] tags at the beginning of your code (just remember to end them, lest your [/code] tags don't work and your code never ends). The code boxes will also only continue on to the next line when you tell them to, meaning unless you press enter, your box will get a scroll bar.

    Most often, we're not going to be coding here on Skyblock forums. So, if you desire to use [code], you're probably using it for emphasis by putting your text in a big ol' blue box. For example, my thread on lockette (#spon) uses coding boxes to represent what one would write on a sign.

    Here is an example of what [code] looks like outside of plain tags.
    Code:
    Characters like i, l, m, and _ all have the same spacing... and they're in a pretty blue box.
    HTML equivelent: <pre> and </pre> (short for "Preformatted")

    Secondly, there are [PHP] and [/PHP] tags, which are the same as coding boxes (even spacing, pretty blue boxes), except that they will recognise the various arguments if your coding is in PHP, and give them colours, making the coding easier to read and understand. Par example:
    [PHP]echo: "Hello World!";[/PHP] =
    PHP:
    echo: "Hello World!";
    HTML equivalent: <code> and </code>
    Similarly, [html] and [/html] can be used to show HTML code, however unlike PHP, it does not appear to highlight the various sections of code, and is instead very similar to [code] tags. For example, [html]<img src="image.gif" alt="image" />[/html] makes:
    HTML:
    <img src="image.gif" alt="image" />

    Extra Bits
    There are a few little tags that may not be well known and yet do not warrant an entire section. [S] and [/s] are short for strikethrough, and lets you type words that appeared to be crossed out: I'm a mistake. They can allow for comedic little comments, so it's a handy code to know.
    HTML equivalent: <strike> and </strike>

    Notice, done through [notice] and [/notice] is a little-known code that creates a red and white box in which one can write particularly important notices. It's worth noting that unlike some of the other boxes on the forums, these ones have no spacing between the left side and the start of the text, so it may look odd. Here's a quick example of what a notice box looks like.
    It's useful to know for many people that "transparent" may be used as a colour. The default background for text is an off-white, and so if one truly wishes to hide text, it will still be slightly visible if they do so by making the text white. This will be even more apparent if the user has a custom theme for the forums. Instead, one can type [color=transparent]Secrets![/color] to make truly invisible text that can only be seen when the player highlights the page. For example:
    Clouds are made from marshmallow and bleached fairy floss
    The next one people do use, but how it works in BBCode may be less known. I won't bother putting enters so that this thread is super long, so I'll be putting slashes to represent new lines instead. Lists are created through [list][*]Hello[/list]. You can modify the type of list by doing [list=1][*]Hello[/list] for a numbered list, or [list][list][*]Hello[/list][/list] for a smaller and more indented list. In practice:

    1. One
    2. Two
    HTML equivalent: <ol> and </ol> (for ordered list)
      • One
      • Two
    HTML equivalent: <ul><ul> and </ul></ul> (for unodered list)

    I have more to add, but my brain is about done for now.
    Enjoy making beautiful threads!
    ~Lycel



    My sources - these are external links, however, I disapprove of plagiarism and therefore wish to list them.
    You may look at them for further reading if you wish.
    BBCode.org, bbcode users guide and tricks on implementing it
    BBCode - Wikipedia
    BB Codes | Skyblock Forums
    help › wiki: BBCode
    phpBB &bull; BBCode guide
    BBcodes Explained
    BB Code List - Dynamic Drive Forums
     
    • Like Like x 5
    • Useful Useful x 1
    Last edited: Dec 9, 2017
  2. Talia
    Offline

    Talia Senior Member

    Messages:
    7,449
    Thanks for this, Lycel!
     
    • Like Like x 1
  3. Wolfie
    Offline

    Wolfie Well-Known Member

    Messages:
    2,090
    Thank you so much for this! Amazing work :).
     
    • Like Like x 1
  4. 52Phenomenon
    Offline

    52Phenomenon Well-Known Member

    Messages:
    2,090
    Nice guide Lycel! :>
     
    • Like Like x 1
  5. James
    Offline

    James Helper Staff Member

    Helper
    Messages:
    4,529
    What a nice guide c:
     
    • Like Like x 1
  6. Laini
    Offline

    Laini Moderator Staff Member Premium

    Moderator
    Messages:
    2,658
    This is great! Thanks a lot! c:
     
    • Like Like x 1
  7. Pingu
    Offline

    Pingu Restricted

    Messages:
    6,246
    Woah I didn't see this until now and I love this so much thanks Lycel you've done it again cx
     
    • Friendly Friendly x 1
  8. BertBerry
    Offline

    BertBerry Senior Member

    Messages:
    6,955
    I shall bump this cause it really helped me to be honest. Especially the thing as i never knew anything about it until now.
     
    • Friendly Friendly x 1
  9. Lycel
    Offline

    Lycel Super Moderator Staff Member

    Super Moderator
    Messages:
    4,121
    Update. I've added [html], [notice], and [color=transparent]. Also, I cleaned up some typos.
     
  10. Caprincess
    Offline

    Caprincess Well-Known Member

    Messages:
    267
    Yes
     
    • Agree Agree x 1
  11. Lycel
    Offline

    Lycel Super Moderator Staff Member

    Super Moderator
    Messages:
    4,121
    Fixed a typo, and bumping this.
     
    • Like Like x 1
    • Cookie Cookie x 1
  12. Lycel
    Offline

    Lycel Super Moderator Staff Member

    Super Moderator
    Messages:
    4,121
    Giving this another bump. It's been a few months, so maybe there are new forum users who don't know the wonders of BBCode :>
     
  13. LegoCollecter14
    Offline

    LegoCollecter14 Active Member

    Messages:
    1,235
    Can I ask why you have Japanese food recipes in your title image?
     
  14. Lycel
    Offline

    Lycel Super Moderator Staff Member

    Super Moderator
    Messages:
    4,121
    I need to share my love of sushi with the world somehow.
     
    • Like Like x 1
  15. Frannn17
    Offline

    Frannn17 Active Member

    Messages:
    72
    Thank you, Lycel. I've confirmed you are indeed a nerd.
     
    • Like Like x 1
  16. Derpeh
    Offline

    Derpeh Active Member

    Messages:
    97
    Very informative! Thank you Lycel!
     
  17. archerexpert777
    Offline

    archerexpert777 Well-Known Member

    Messages:
    1,385
    Very informed and well written. Thanks Lycel :)
     
    • Friendly Friendly x 1
  18. Acceptation
    Offline

    Acceptation New Member

    Messages:
    26
    Thank you Lycel! This is extremely detailed and is going to help me out a lot in the future! Thanks.
     
    • Friendly Friendly x 1

Become a member to no longer see this ad. :)

Share This Page