The BBCode Thread

Discussion in 'Site Discussions & Suggestions' started by Densetsu, Jan 9, 2010.

Jan 9, 2010

The BBCode Thread by Densetsu at 2:49 PM (6,461 Views / 1 Likes) 35 replies

  1. Densetsu
    OP

    Former Staff Densetsu Pubic Ninja

    Joined:
    Feb 2, 2008
    Messages:
    3,435
    Location:
    Wouldn't YOU like to know?
    Country:
    United States
    EDIT (09 Nov 2012): As you can see, this thread is now a clusterf*ck. But fear not! There's a help page for BB code tailored specifically to the XenForo version of the 'Temp! Clicky-clicky.

    <a href="http://gbatemp.net/index.php?s=&act=legends&CODE=bbcode" target="_blank"><b><!--sizeo:4--><span style="font-size:14pt;line-height:100%"><!--/sizeo--><div align="center">GBAtemp BBCode</div><!--sizec--></span><!--/sizec--></b></a><div align="center">(Click for Additional Tags Not Found On This Post)</div>

    <div style="text-align: justify;">I made this topic in order to clarify some of the less-used BBCode tags on this forum. All too often I have seen people attempt to embed video in a post and end up not doing it correctly, even though it's quite simple to do. I myself have had (and still have) some questions about how to use BBCode, so this topic aims to assist GBAtemp n00bs and veterans alike. Most of these tags come from the <a href="http://i50.tinypic.com/2j4y6hk.png" target="_blank">BB Code Help</a> button, but there are a few extra ones in this topic not found in the BB Code Help, as well as explanations for others where I thought the explanation was somewhat lacking. <a href="http://i45.tinypic.com/11ahicz.png" target="_blank">The rest</a> are self-explanatory and pretty much n00b-proof.</div>
    <b>Feel free to use this thread to ask BBCode-related questions and test out your BBCode skillz. Don't be that 'temper who doesn't know how to embed videos! If anyone has any creative uses for BBCode, contributions are welcome. Thanks <a href='http://gbatemp.net/member.php?name=tj_cool' target=_blank title='View profile for member tj_cool'}>tj_cool</a> for all your help!</b>

    <a name="acronym"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Acronym Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->OMG<!--c2--></div><!--ec2--><blockquote><b>Result:</b> <acronym title='oh my gorsh'>OMG</acronym>
    The Acronym tag is intended to help people understand what an acronym means by simply hovering your mouse over it; however <acronym title='an idiot'>you</acronym> can probably come up with more <acronym title='fun, abusive, sadistic'>creative</acronym> uses for it.</blockquote>

    <a name="anchor"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Anchor Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><!--c2--></div><!--ec2--><blockquote><b>Result:</b> <a name="x"></a> <i>(invisible)</i>
    The Anchor tag will be invisible on a post, and seems to do nothing. In fact, the Anchor tag is only half of a two-part set, requiring the Anchor Link tag in order to function. Let's leave this tag for now and come back to it later after we have examined the Anchor Link tag.</blockquote>

    <a name="biu"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Bold, Italics, Underline Tags</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->text, text, text<!--c2--></div><!--ec2--><blockquote><b>Result:</b> <b>text</b>, <i>text</i>, <u>text</u>
    These tags are no-brainers, but as this guide is meant to help BBCode n00bs and for the sake of completeness, I've included them here. It goes without saying, but of course you may format your text by combining tags to get <i><b>bold italics</b></i>, <u><b>bold underline</b></u>, <i><u>underlined italics</u></i>, and <u><b><i>underlined bold italics</u></b></i>. You can combine these tags with the Acronym tag above to get <acronym title='oh my gorsh'><i><b>OMG</b></i></acronym>.</blockquote>

    <a name="s"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Strikethrough Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->text<!--c2--></div><!--ec2--><blockquote><b>Result:</b> <strike>text</strike>
    Why use this tag when you can just edit your post and delete your mistakes? Who knows? Most of the time I see this used, the "mistake" is intentional. Like when I say that you're <strike>a douchebag</strike> awesome. As usual, this can be combined with other tags to format your text. For instance, you can have <strike><u><b><i>crossed-out underlined bold italics</u></b></i></strike>. I use that tag combo <strike><i><b><u>all the time</u></b></i></strike> never.</blockquote>

    <a name="sup"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Superscript Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->E = mc2<!--c2--></div><!--ec2--><blockquote><b>Result:</b> E = mc<sup>2</sup>
    Because without this tag, the nuclear phenomenon known as "mass defect" could not possibly be true! E ≠ 2mc. Can be <sup><b><u>combined</u></b></sup> with other tags.</blockquote>

    <a name="sub"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Subscript Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->H2O<!--c2--></div><!--ec2--><blockquote><b>Result:</b> H<sub>2</sub>O
    No self-respecting person of science would write water as H2O. That's just silly. Can be <sub><b><i>combined</i></b></sub> with other tags. You can even combine the Subscript tag with the Superscript tag to get text that's sort of <sub><sup>halfway between</sup></sub> <sup>superscript</sup> <sub><sup>and</sup></sub> <sub>subscript</sub>, though I don't know why anyone would ever want to do that.</blockquote>

    <a name="spoiler"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Spoiler Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->
    Warning: Spoilers inside!
    <!--c2--></div><!--ec2--><blockquote><b>Result:</b>
    Warning: Spoilers inside!
    Use this to prevent your fellow 'tempers from viewing text that could potentially give away secrets about a movie/game/book, thus spoiling any future chance of the 'temper having enjoyed it, and earning you enemies on these forums. For example, do not click the following if you've never played <i>Final Fantasy VII</i> and intend to play it someday:
    Warning: Spoilers inside!
    </blockquote>

    <a name="title"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Titled Spoiler Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->
    Spoiler Title
    <!--c2--></div><!--ec2--><blockquote><b>Result:</b>
    Spoiler Title
    A variant of the Spoiler tag, this changes the default text "<b>WARNING: SPOILER INSIDE</b>" on a spoiler. You can use it to give the reader a hint as to the nature of the spoiler hidden within. For example:
    Warning: Spoilers inside!
    Did you click it anyway? If that spoiled the plot for you, it's your own damn fault.

    But really, who <i>doesn't</i> click on the spoilers?</blockquote>

    <a name="p"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Paragraph Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->

    text

    <!--c2--></div><!--ec2--><blockquote><b>Result:</b> <p align=" " class="none">text</p>Used when you want to set a block of text apart from the rest of your post, whether for <a href="http://gbatemp.net/index.php?showtopic=89197&st=1350&p=2297235&#start" target="_blank">organizational reasons</a>, religious convictions or whatever. Note in the code that there is a space between the equals sign and the right bracket. Don't forget to insert the space, or it won't work. </blockquote>

    <a name="color"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Color Tags</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->text, text, text, text, text, text, text<!--c2--></div><!--ec2--><blockquote><b>Result:</b> <!--coloro:red--><span style="color:red"><!--/coloro-->text<!--colorc--></span><!--/colorc-->, <!--coloro:orange--><span style="color:orange"><!--/coloro-->text<!--colorc--></span><!--/colorc-->, <!--coloro:yellow--><span style="color:yellow"><!--/coloro-->text<!--colorc--></span><!--/colorc-->, <!--coloro:green--><span style="color:green"><!--/coloro-->text<!--colorc--></span><!--/colorc-->, <!--coloro:blue--><span style="color:blue"><!--/coloro-->text<!--colorc--></span><!--/colorc-->, <!--coloro:indigo--><span style="color:indigo"><!--/coloro-->text<!--colorc--></span><!--/colorc-->, <!--coloro:violet--><span style="color:violet"><!--/coloro-->text<!--colorc--></span><!--/colorc-->
    Of course, you have access to a much wider range of colors when you're writing a post and you use the <a href="http://i45.tinypic.com/11ahicz.png" target="_blank">editing tools at the top</a>, but when you just want to type out the tag and can't be bothered to memorize the HTML value for red (#FF0000), simply using the name of the color will suffice. In other words, the following two tags have the exact same effect: <!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->text
    text<!--c2--></div><!--ec2-->It should be noted that the <a href="http://www.pagetutor.com/common/bgcolors1536.png" target="_blank">6-character hexadecimal values for colors</a> are derived as follows:
    The first two characters correspond to <!--coloro:#FF0000--><span style="color:#FF0000"><!--/coloro-->red<!--colorc--></span><!--/colorc-->.
    The middle two characters correspond to <!--coloro:#00FF00--><span style="color:#00FF00"><!--/coloro-->green<!--colorc--></span><!--/colorc-->.
    The last two characters correspond to <!--coloro:#0000FF--><span style="color:#0000FF"><!--/coloro-->blue<!--colorc--></span><!--/colorc-->. (Thanks <a href='http://gbatemp.net/member.php?name=tj_cool' target=_blank title='View profile for member tj_cool'}>tj_cool</a>!)</blockquote>

    <a name="invisible"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Invisible Text Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->text
    text
    text<!--c2--></div><!--ec2--><blockquote><b>Result:</b>
    <!--coloro:white--><span style="color:white"><!--/coloro-->text<!--colorc--></span><!--/colorc--> (highlight to reveal)
    <!--coloro:#FFF--><span style="color:#FFF"><!--/coloro-->text<!--colorc--></span><!--/colorc--> (highlight to reveal)
    Have you ever needed to write a secret ninja message? Well, now you can!</blockquote>

    <a name="youtube"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Embed Youtube Video Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->[youtube]52V5MlEqBOc[/youtube]<!--c2--></div><!--ec2--><blockquote><b>Result:</b>
    <object width="425" height="355"><param name="movie" value=""></param><param name="wmode" value="transparent"></param><embed src="" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
    Even some GBAtemp vets seem to have trouble with this one every once in a while. On YouTube's website, the description box to the the right of every video contains a URL with a direct link to the video. For the video above, the URL is:<!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--> embed the video, you just want to copy the part after the equal sign (in this case "52V5MlEqBOc") and paste it in between the YouTube tags.</blockquote>

    <a name="ytspoiler"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>Embed YouTube Video within a Titled Spoiler Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->
    Be a Ninja in 30 Seconds
    <!--c2--></div><!--ec2--><blockquote><b>Result:</b>
    Be a Ninja in 30 Seconds
    Just as I said earlier, tags can usually be combined to create additional effects. This is just a more sophisticated example. It's like <b><i>bold italics</i></b> on crack.</blockquote>

    <a name="flashspoiler"></a><!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><i><b>
    Embed Flash within a Titled Spoiler Tag</b></i><!--sizec--></span><!--/sizec--><hr /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->
    Ninja Brawl
     
    Margen67 likes this.


  2. prowler

    Member prowler Sony

    Joined:
    Jul 14, 2009
    Messages:
    9,473
    Location:
    Ragol
    Country:
    United Kingdom
    Nice guide [​IMG]
    I didn't know some of the BBCode's on here.

    And you actually used spoilers in the spoiler tags [​IMG]
     
  3. ProtoKun7

    Global Moderator ProtoKun7 GBAtemp Time Lord Regenerations: 3

    Joined:
    Jan 3, 2009
    Messages:
    7,480
    Location:
    Gallifrey
    Country:
    United Kingdom
    A lot of these tags I did already know about, but nice to see them collected in a guide like this [​IMG] More comprehensive than the BBcode Help button in the reply area.
     
  4. Davess

    Member Davess On the list :D (Thanks Haflore)

    Joined:
    Mar 15, 2009
    Messages:
    693
    Location:
    __________________ Posts: 9326
    Country:
    Canada
    Thanks! I wanted to know how to do the box one [​IMG] [​IMG]
     
  5. soulx

    Member soulx GBAtemp Legend

    Joined:
    Apr 4, 2009
    Messages:
    10,130
    Country:
    Canada
    Great thread.

    The problem is, now everybody will know who the ninja is. [​IMG]
     
  6. ProtoKun7

    Global Moderator ProtoKun7 GBAtemp Time Lord Regenerations: 3

    Joined:
    Jan 3, 2009
    Messages:
    7,480
    Location:
    Gallifrey
    Country:
    United Kingdom
    We already knew, his name is [​IMG]

    Damn it!
     
  7. soulx

    Member soulx GBAtemp Legend

    Joined:
    Apr 4, 2009
    Messages:
    10,130
    Country:
    Canada
    The new members won't know who Densetsu3000 is.

    And, let's keep it that way. [​IMG]
     
  8. Sonicslasher

    Member Sonicslasher In Law we trust.

    Joined:
    Dec 5, 2005
    Messages:
    2,230
    Location:
    Richmond, VA
    Country:
    United States
    Don't Forget about these tags[/p]
    Code:
    [P= ][/P]
     
  9. Minox

    Supervisor Minox Spytech Employee

    Joined:
    Aug 27, 2007
    Messages:
    5,615
    Country:
    Sweden
     
  10. Sonicslasher

    Member Sonicslasher In Law we trust.

    Joined:
    Dec 5, 2005
    Messages:
    2,230
    Location:
    Richmond, VA
    Country:
    United States
    Oh, mah bad D:
     
  11. ProtoKun7

    Global Moderator ProtoKun7 GBAtemp Time Lord Regenerations: 3

    Joined:
    Jan 3, 2009
    Messages:
    7,480
    Location:
    Gallifrey
    Country:
    United Kingdom
    Could've happened to anyone.[/p]
     
  12. soulx

    Member soulx GBAtemp Legend

    Joined:
    Apr 4, 2009
    Messages:
    10,130
    Country:
    Canada
    Why isn't this awesome tutorial stickied?

    I demand an answer!
     
  13. DeMoN

    Member DeMoN GBAtemp Guru

    Joined:
    May 12, 2004
    Messages:
    7,647
    Country:
    United States
    Awesome thread. A lot of these BBcodes should have buttons but they don't. [​IMG]
     
  14. Hatsu

    Banned Hatsu Someone's been killing, eh?

    Joined:
    Oct 19, 2009
    Messages:
    2,143
    Location:
    __________________ Warn: 50%
    Country:
    Australia
    Thanks! I think that guide was a tiny bit over the top. [​IMG]
     
  15. tj_cool

    Supervisor tj_cool Stuff

    Joined:
    Jan 7, 2009
    Messages:
    9,941
    Location:
    This planet
    Country:
    Belgium
    Nice guide
    Although I already knew all of them [​IMG]

    Maybe you can add with the color tags that it uses RGB (in hex): first 2 numbers/letters are the amount of red, the middle 2 are green and the right ones the blue.

    The paragraph BBcode (here named textbox BBcode) seems to be used a lot nowdays
    I wonder why it wasn't used that much before (besides from mods, who use the html version: )

    I must warn you when you use it though
    Theres a bug that removes a piece of your post if you combine it with thumbnail tags (which are not in this list).
    An example can be found in my GBAtemp tutorial (quote the first post and see that a part from the post disappears on the top). Just so ya know [​IMG]

    Its not even your guide, lol
     
  16. Hatsu

    Banned Hatsu Someone's been killing, eh?

    Joined:
    Oct 19, 2009
    Messages:
    2,143
    Location:
    __________________ Warn: 50%
    Country:
    Australia
    That's why it's so stupid. [​IMG]
     
  17. tj_cool

    Supervisor tj_cool Stuff

    Joined:
    Jan 7, 2009
    Messages:
    9,941
    Location:
    This planet
    Country:
    Belgium
    Here's even more info about the colors:

    Some people probably know this already, but you don't need to use 6 characters for colors
    You can also use 3:
    Code:
    [color=#F00]text[/color]
    will also result in red text
    As you can see, the first character equals the first two characters of the 6 char notation, and so on. Of course, it'll only work for colors that use 3 blocks of 2 times the same character
    another example: #99dd22 can be replaced with #9d2 as they both result in this color

    For the rest, these are the official 16 color names:
    aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
    Of course you can use other colors too (and there's enough of them)
     
  18. Densetsu
    OP

    Former Staff Densetsu Pubic Ninja

    Joined:
    Feb 2, 2008
    Messages:
    3,435
    Location:
    Wouldn't YOU like to know?
    Country:
    United States
    Thanks for all the info, tj_cool!

    I was wondering, do you know how they do the headings for all the flashcart reviews? Like the ones for "Introduction" and "Packaging and Contents" in the Acekard 2 review.

    I usually just "Quote" a post and look at the code if I want to find out, but since the reviews get locked there's no way for me to do it [​IMG]
     
  19. Hatsu

    Banned Hatsu Someone's been killing, eh?

    Joined:
    Oct 19, 2009
    Messages:
    2,143
    Location:
    __________________ Warn: 50%
    Country:
    Australia
    The problem is, that those parts of reviews are written in HTML, which only staff members can use.
     
  20. Densetsu
    OP

    Former Staff Densetsu Pubic Ninja

    Joined:
    Feb 2, 2008
    Messages:
    3,435
    Location:
    Wouldn't YOU like to know?
    Country:
    United States
    Damn...thanks anyway Hatsu!
     

Share This Page