Forums The Secrets of BBCode

Discussion in 'Suggested Guides' started by Lycel, Jun 20, 2017.

  1. Lycel
    Offline

    Lycel Senior Member

    Joined:
    Apr 27, 2014
    Messages:
    4,251
    IGN:
    Lycel
    [​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 6
    • Useful Useful x 4
    • Amazing Amazing x 1
    Last edited: Dec 9, 2017
  2. poggers
    Offline

    poggers Senior Member

    Joined:
    Jun 28, 2014
    Messages:
    7,218
    Thanks for this, Lycel!
     
    • Like Like x 1
  3. Wolfie
    Offline

    Wolfie Well-Known Member

    Joined:
    Jan 13, 2017
    Messages:
    2,008
    Thank you so much for this! Amazing work :).
     
    • Like Like x 1
  4. 52Phenomenon
    Offline

    52Phenomenon Super Moderator Super Moderator Events Manager

    Joined:
    Mar 18, 2017
    Messages:
    4,065
    IGN:
    52Phenomenon
    Nice guide Lycel! :>
     
    • Like Like x 1
  5. athyrix
    Offline

    athyrix Senior Member Premium

    Joined:
    Jul 31, 2016
    Messages:
    6,639
    What a nice guide c:
     
    • Like Like x 1
  6. laini
    Offline

    laini Ma'am Premium

    Joined:
    Aug 5, 2015
    Messages:
    4,158
    IGN:
    Prxcto
    This is great! Thanks a lot! c:
     
    • Like Like x 1
  7. Teeler
    Offline

    Teeler i am kenough

    Joined:
    Nov 2, 2014
    Messages:
    6,608
    IGN:
    TeelerSwift69
    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. bERYbERRY
    Offline

    bERYbERRY c000000000000000kies Builder Premium

    Joined:
    Mar 2, 2014
    Messages:
    10,372
    IGN:
    BertBerry
    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 Senior Member

    Joined:
    Apr 27, 2014
    Messages:
    4,251
    IGN:
    Lycel
    Update. I've added [html], [notice], and [color=transparent]. Also, I cleaned up some typos.
     
  10. Caprincess
    Offline

    Caprincess Active Member

    Joined:
    Nov 15, 2015
    Messages:
    253
    Yes
     
    • Agree Agree x 1
  11. Lycel
    Offline

    Lycel Senior Member

    Joined:
    Apr 27, 2014
    Messages:
    4,251
    IGN:
    Lycel
    Fixed a typo, and bumping this.
     
    • Like Like x 1
    • Cookie Cookie x 1
  12. Lycel
    Offline

    Lycel Senior Member

    Joined:
    Apr 27, 2014
    Messages:
    4,251
    IGN:
    Lycel
    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 Well-Known Member

    Joined:
    Jan 3, 2016
    Messages:
    1,214
    IGN:
    LegoCollecter14
    Can I ask why you have Japanese food recipes in your title image?
     
  14. Lycel
    Offline

    Lycel Senior Member

    Joined:
    Apr 27, 2014
    Messages:
    4,251
    IGN:
    Lycel
    I need to share my love of sushi with the world somehow.
     
    • Like Like x 1
  15. fran
    Offline

    fran pensive Premium

    Joined:
    Feb 16, 2016
    Messages:
    1,397
    IGN:
    franfiction
    Thank you, Lycel. I've confirmed you are indeed a nerd.
     
    • Like Like x 1
  16. hamburgertoes
    Offline

    hamburgertoes Well-Known Member

    Joined:
    Apr 5, 2014
    Messages:
    100
    Very informative! Thank you Lycel!
     
  17. archerexpert777
    Offline

    archerexpert777 Senior Member

    Joined:
    Aug 18, 2015
    Messages:
    2,837
    IGN:
    simparch777
    Very informed and well written. Thanks Lycel :)
     
    • Friendly Friendly x 1
  18. Acceptation
    Offline

    Acceptation Well-Known Member

    Joined:
    May 16, 2018
    Messages:
    71
    IGN:
    Acceptation
    Thank you Lycel! This is extremely detailed and is going to help me out a lot in the future! Thanks.
     
    • Friendly Friendly x 1
  19. Lycel
    Offline

    Lycel Senior Member

    Joined:
    Apr 27, 2014
    Messages:
    4,251
    IGN:
    Lycel
    Bumping
    (also I'm just testing out some post count stuff don't mind me)
     
  20. CloudCorp
    Offline

    CloudCorp Active Member

    Joined:
    May 9, 2017
    Messages:
    267
    IGN:
    CloudCorp
    Thankys lycel :) I spend half an hour on google :) Wish I knew this was here :)
     

Share This Page