(No, in this post, I won't be using my normal colored font. I have a lot of code to cover here, so it'd only get in the way. Also, this post is pretty long, but if you're new it's definitely worth it. Onward, all!)

Check out the list of BBCode-friendly colors here!
And check out how polls on IRG work here!

The system that IRG uses to format posts -- aside from our wonderful emoticons, of course -- is a system established by the creators of phpBB, titled BBCode. If you're familiar with how HTML tags work, BBCode shouldn't be much of a problem to figure out. But for those who need a tutorial, here's a fairly comprehensive guide to mastering BBCode here on IRG. Any forum that operates using phpBB or punBB (the latter of which powers this forum) can make use of all the BBCode you see here in IRG.

You've probably noticed the buttons above the emotions. From left to right, they are labeled B, I, U, S, http://, Img, Code, Quote, mp3 and YouTube. The buttons are there only for those who don't want to enter BBCode directly or can't remember the tags themselves. Once you know a BBCode tag, you can apply it to any other forum that uses BBCode, which is pretty neat.

The first four are boldface, italics, underline and strikethrough, respectively. To use the buttons, highlight the text you wish to format and press the button. If you want to put something in these formats, the tags will look like this:

[b]stuff in boldface[/b]
[i]stuff in italics[/i]
[u]underlined stuff[/u]
[s]struckthrough stuff[/s]

But if you want to apply both boldface and italics to the same block of text, the rule of HTML tags applies; namely, "First said ends last." Or, in other words, you'd do it like this:

[b][i]stuff to be formatted[/i][/b]

Notice that the italics are ended before the boldface ends. If you apply the italics before the boldface, then the boldface must end before the italics. These four tags don't need to be applied in the order they appear on the buttons, but it can help when doing some serious formatting.

The next button is the link tag (the one that says "http://"). This is best used for linking sites and (for you deviants and fic writers out there), deviantART accounts to nifty SKU works and Fanfiction.Net stories. It can be used one of two ways. Either you use it like this: http://forums.ohtori.nu/ or like this. The first example is used as such:

[url]http://forums.ohtori.nu/[/url]

and the second is used as such:

[url=http://forums.ohtori.nu/]In the Rose Garden[/url] forums

The Img button allows you to directly link images from anywhere on the Internet. Whether it's the Empty Movement Gallery, your Photobucket or Imageshack account, you use the same code. Remember, though, that you have to follow the rules for linking images that Gio and Yasha laid down, and beware of bandwidth leeching -- where you link an image directly from a site but get an entirely different image to discourage wasting the host's available bandwidth!

[img]http://i138.photobucket.com/albums/q280/BioKraze/RoseDuels/Series_ep09_055.jpg[/img]

The above code will produce the following result:


(Because of new Gallery frustrations, mainly to do with my lack of savvy and lack of patience, I'm hotlinking the image from my Photobucket account. Normally, Giovanna allows us to direct-link images from the Empty Movement Gallery here on IRG, but I don't feel like wrestling with the new system, to be frank. Sorry, Gio! Should the rules change, I will update this as necessary.)

The next button is the Code button, which is useful for demonstrating BBCode tags, HTML tags and also for producing ASCII Art, since the font it uses is Courier New, 10 point. In every case where it says "Code" in an indented box, I've used the Code tag to demonstrate the other tags. Because the forum won't let me "nest" Code tags within each other, basically you highlight the stuff to be encased in Code tags and click the "Code" button once. If you want to see how the Code tags work in this tutorial, quote this post but don't reply to it -- just click the words "Go back" next to the Preview button. Changing the square brackets to curly ones here, the BBCode for the complete Code tag is {code}{/code}.

Another oft-used button is the Quote button. If you're quoting a long passage, posting a quote somebody in real life said, or just need to provide a way to say that the words you're typing are not your own, use the Quote function. It works in multiple ways:

Either you can quote anonymously...

BioKraze wrote:

...or you can quote somebody from the forums!

Bio wrote:

You can even shorten someone's name if they're better known one way...

Utena Tenjou wrote:

...or you can quote people from fiction!

To use the Quote function anonymously, use the following code:

[quote]stuff to be quoted[/quote]

And if you want to insert a name, use this code (my name is being used here as an example):

[quote=BioKraze]stuff that BioKraze said[/quote]

One of our two newest buttons is the MP3 button. Which...does pretty much exactly what it says on the tin. Throw a link to an MP3 file on the Internet between the tags and you've got a nifty little playback function with stop, pause, play and, I believe, volume adjustment and seek adjustment. Embedded MP3s look like this...


...and are coded like so...

[m_p_3 url=full URL of the MP3 to link and embed]
(delete the underscores to get the full tag, MP3s embed even within Code tags!)

(AFAIK, this is the only BBCode tag on IRG that, like some HTML tags, has no closing tag. Just plug it in and go on thy way. )

The last button (but definitely not the last tag!) is the YouTube button which, like the MP3 button, embeds a YouTube video into your post. Be smart about this, though, and don't be a dick with what you post. This is mainly for posting SKU AMVs you've made or other SKU-related stuff, not for trolling us. Embedded YouTube videos look like this...


(Look ma, no credits! Also, I solemnly swear I didn't make this.)

...and are coded like so...

[youtube]full URL of the YouTube video to embed[/youtube]

The last tag, and possibly the coolest one, is the Color tag. Using it, you can make your posts prettier by choosing a color that you like, or even taking a color you like from an art program for use! There are two applications for the Color tag. You can use a standard color like red, blue or indigo, or you can use unique colors like chocolate and coral! The code for the colors I just used are such:

[color=red]red color[/color]
[color=indigo]indigo color[/color]
[color=blue]blue color[/color]
[color=chocolate]chocolate color[/color]
[color=coral]coral color[/color]

Or, if you're inventive, you can use red-green-blue hexadecimal values to create your own colors. Say you wanted a color whose values in red, green and blue were 128 (out of 0 to 255), 64 and 255 respectively. The hexadecimal values for each color are 80, 40, and FF, respectively. To create this color, you'd input this code:

[color=#8040FF]remember to place the pound sign before the numbers. It's RRGGBB, and capitalization of hexadecimal letters A through F is optional![/color]

(Incidentally, this neonish purple will be what that code would create.)

If you need help converting decimal to hexadecimal, call up Windows Calculator and select Scientific mode. Input the number in decimal, then click on the select option that says "Hex." It'll instantly convert the number from decimal to hexadecimal. Click "Dec" (decimal) to revert. The other two -- octal and binary, or "Oct" and "Bin" -- are completely useless for BBCode.

And (highlight)if you have spoilers that you need to keep hidden, like if you're revealing the climax of a new movie or book(end highlight), then use the following BBCode to make your posts vanish like the wind! (Update: As of 13 February 2014, Yasha has announced that we have to use white to spoiler-fy stuff, because all available code mods either function poorly or interfere with existing code mods. We have a button, but all it does is throw in a preset color tag with white. One less thing to remember, I suppose?)

[color=white]spoilers to be protected from the naked eye[/color]

Remember that ALL tags will continue to apply their formatting until they've been "closed" -- that is, you include the closing tag where you want the tag to stop applying its formatting. And always remember, first said ends last. I'll use an example from one of the RP games going on...

[color=royalblue][b]username[/b]>text to be said
[b]username[/b]>text to be said[/color]

It may be easier to copy and paste the first line like such, though...

[color=peru][b]username[/b]>text to be said[/color]
[color=peru][b]username[/b]>text to be said[/color]

Now, for the unhappies: the stuff that doesn't work, even if you've seen it someplace else.

The text alignment and font size tags don't work in any capacity, from recent testing I've done. (Update! Strikethrough finally works! See the first couple paragraphs for the details!) Some forums support changing the font size in a post, while others support text realignment in a post. IRG is not one of these forums; it's because IRG uses a special version called punBB, which I've heard is a lot easier to modify for your purposes, and is much more secure than phpBB. Sadly, this means that any such "dead" tags used in a signature or post will be equally lifeless unless Gio (or Yasha, as of 22 July 2013) mods the holy hell out of the code to allow it.

That's about it as far as BBCode tags go for IRG. If there are any more tags you've independently tested in IRG to be useful or if you have any new default colors for the Color tag, feel free to include them here so that we can all share the wealth of knowledge! And remember, also, that all tags can be used in PMs, whether or not you see the buttons for them!

NOTICES:
* Yasha has gone on record as saying that, no matter what else happens to IRG's code, font size will NEVER be part of it. Coming from forums which allow text resizing, I couldn't agree with this executive veto more.

EDITS: Added how to use the Code tag itself at Syora's request! (21 July 2009)
Added clarification on closing formatting tags (14 September 2009)
Added list of "dead" tags (10 December 2009)
Updated dead tag list (19 March 2011)
Cleaned the list up slightly and corrected errors (17 November 2012)
Added link to the color list from yesterday's new post, reformatted some things (23 July 2013)
Updated new buttons (strikethrough, MP3, YouTube), updated dead tag list, added link to polling walkthrough (20 September 2013)
Corrected some things that needed it (16 October 2013)
Updated image demo because Gallery3 and because Saionji and Touga fans. (17 October 2013)

Last edited by BioKraze (02-13-2014 09:49:54 PM)