[TUTORIAL] BBCodes - Making your posts shinier since 1998

[CreativeName]

This topic of mine is supposed to serve as a beginners tutorial and resource

for members, old and new, who'd like to delve into some of the delicacies of BBCode

---

Introduction

"Now, what's BBCode?", I hear some of you ask. Well, please, be so kind and move your mouse cursor over the word >> BBCode << and it will tell you... Have you done it? You wanna know how I did this? I will show you in a minute. This is what the thread is about.

Let me point out that this tutorial is designed for PC users. I'm currently operating under Firefox 36.0.1 and Win7. (Yeah, I know...)

Don't worry, I will by no means try to cover the entirety of the topic, but rather give you a rough overview of different options that you have. Moreover, let me stress upfront that I am not in any way, shape or form an expert regarding these matters; I'm just a novice having fun tinkering around with stuff. :) All of what I'm showing you is quite easy to pull off, actually.

Btw, if this kind of tutorial has been done before in the forums, please let me know. I couldn't find anything similar. If an admin should find this thread useful, I would be honored to have it pinned to the "Help"-forum. Just putting it out there. ;)

((Something else to bear in mind: English is not my primary language. Please excuse my somewhat crude phrasing.))

Now, without any further ado, let us start with the tutorial, shall we?

---

The Essentials

You can skip this part, if you so desire. There's nothing new here, really... The following red numbers refer to a quickly edited toolbar image. (Don't judge me. :P ) The numbers are all over the place, because I decided to number the tools consecutively to the following explanations:

When creating a post, you may have noticed a collection of buttons in the toolbar at the top of your text box. Of course, the majority of those tools are pretty self-explanatory. You can, for example,

(1) insert smileys :cool4: , (2) change the font, (3) size and (4) color of your text, or make it (5) bold, (6) italic, (7) underlined, (8) crossed out, (9) _subscripted, (10) ^{superscripted} or any combination of the above. The usual stuff.

In addition to that you can use the (11) search function ("Find") or the (12) search and replace function ("Replace"), which is particularly useful for editing longer posts. You can also (13) "Undo" or (14) "Redo" your actions, which can be a lifesaver if you messed up. Of course, there are a lot of shortcuts on your keyboard for these functions, such as CTRL+Z (Undo), but this is not the place to delve into this topic.

Aligning your body of text...

(15) left,...

(16) center or...

(17) right...

...is another handy feature for structuring or aesthetic purposes.

Or you can insert lists, either in...

• (18) bullet point form...
  • BTW, you can adjust the position of the cursor (indent) by...
    • using (19) "Increase Indent" or...
  • (20) "Decrease Indent"
• ...or, alternatively, there are (21) numbered lists, like this one here:

• Besides using (22) "Copy"...
• you also have different options to paste copied content, such as...
  • (23) default paste
  • (24) paste content "as plain text" (i.e. without any formatting) and...
  • (25) paste content "from Word" (i.e. from .doc, .docx files etc.)
• Last but not least, you can (26) link and (27) unlink to URLs ((more on that later)) as well as...
• insert (28) a default "Quote" tag and...
• insert (29) "Code", such as javascript, HTML, CSS and so on. This is something that I'm not familiar with myself, at least not enough to talk about it confidently in this tutorial. If someone who's more knowledgeable could elaborate on that, please, by all means, go ahead.

When unsure or testing code, don't forget to use the "More Reply Options" button next to the "Post" button. ((Or, alternatively, the "Preview Post" button when you're in editing mode.)) It lets you view the result of your post, i.e. how everyone else will see it. You can use it over and over again until you're satisfied with the final result.

[CreativeName]

Advanced

Now it starts to get a bit more interesting... There are 3 ominous buttons left which haven't even been mentioned, yet. They will be very useful for applying the things I want to show you.

Besides using normal text mode while typing a post, you can switch to (30) "BBCode Mode" by using the corresponding button directly in the top left corner of the toolbar. You can write codes in plain text mode, of course. However, BBCode Mode is especially useful when you're trying to use more complex BBCode features or combinations of them. You can also use it to see what certain functions look like in BBCode after inserting them in default text mode via button. Moreover, with BBCode Mode you're able to copy and paste everything (i.e. every formatting decision) you have made in a post and storage it in a .txt-file on your harddrive for future use, which I find particularly useful.

Right next to (30) is the (31) "Remove Format" button, which, in default text mode, allows you to clear every formatting decisions you have made to a body of text, be it color, font, URL link or what have you.

Directly right of (31) you'll find the (32) "Special BBCode" button. This is probably the most interesting and noteworthy feature I want to tell you about. By clicking on it, it opens up a menu where you can select a number of special BBCode functions in a drop-down box. After selecting one of the functions, a corresponding form pops up which lets you fill in various function fields. It's like an assistant / wizard for deploying BBCode features. Alternatively, you can also type these features manually in plain text mode or (30) BBCode Mode, of course.

The basic structure of BBCodes looks almost always like this:

[XXX]YYY[/XXX]

or this:

[XXX=YYY]ZZZ[/XXX]

A few beginners' examples of Codes:

bold:

[b]Insert text here[/b]

italic:

[i]Insert text here[/i]

underline:

[u]Insert text here[/u]

crossed out:

[s]Insert text here[/s]

_subscripted:

[sub]Insert text here[/sub]

^{superscripted}:

[sup]Insert text here[/sup]

color:

Code for the specific example:

[color=#68228B]color[/color]

Formula:

[color=Insert Hex Color Code here]Insert text here[/color]

Hex Color Codes can be obtained from various places around the web, such as this.

size:

Code for the specific example:

[size=5]size[/size]

Formula:

[size=Insert number of size here]Insert text here[/size]

fonts:

Code for the specific example:

[font=comic sans ms,cursive]fonts[/font]

Formula:

[font=Insert font here]Insert text here[/font]

Aligning text:

center

[center]Insert text here[/center]

right

[right]Insert text here[/right]

Lists:

Formula for Bulletin points:

[list]

[*]Insert text for the first bulletin point here[/*][*]Insert text for the second bulletin point here[/*][*]etc.[/*]

Formula for Numbered Lists:

[LIST=1][*]Insert text for the first bulletin point here[/*][*]Insert text for the second bulletin point here[/*][*]etc.[/*][/LIST]

Default Quote:

Insert text here

Formula:

[quote]Insert text here[/quote]

[CreativeName]

Special Codes

I will now show you a selection of special functions. This is the actual tutorial. For every feature I'll give you an example and the exact code of what I did as well as a generic formula and a few pointers / explanations. Keep in mind that most of these function can be deployed via (32) "Special BBCode" button. We start fairly easy and level up along the way...

0. Showing other members Code (without actually applying the code to a function)

This is the method I use for showing you the code I'm writing. When out of "BBCode Mode", just click on the (29) "Code" button and type in your code in the lower (bigger) field. No complicated menu selections required.

Insert code here

^ It looks like this. A box appears with your code in it.

Alternatively, just write your code in plain text mode with one or more spaces in between to distort the code.

Written in BBCode Mode, the function looks like this:

[ code=auto:0 ]Insert code here <--- Minus the two spaces in the first brackets.

However, when typing the code manually, you only need to write the following:

[ code ]Insert code here <--- Minus the two spaces in the first brackets.

Still, it doesn't matter if you write it like this; when posting, it automatically transforms back to the first example.

1. Embedding an url-link into your text

Simply select / highlight a body of text (word, phrase) in your text box and click on the (26) "Link" button. A menu pops up. Copy and paste your chosen link into the "URL" field.

Like this.

Code for the specific example:

[url=https://www.youtube.com/watch?v=5Krz-dyD-UQ]Like this[/url]

Formula:

[url=Insert Link Here]Text to embed[/url]

2. Link to a specific post in the forum

This can be done in exactly the same way. If you want to share a link to a specific post in the forum, select / highlight a body of text in your post and copy the link into the "URL" field.

Now, the link to a post can be obtained directly from the post itself. If you haven't noticed, there is a small button with a "#" symbol and a specific number in the top right corner of every post. Simply click on this button and you get the URL link.

Like this.

Code for the specific example:

[url=http://asoiaf.westeros.org/index.php/topic/57870-want-to-have-an-avataruser-pic-read-this-thread/?p=6789280]Like this[/url]

3. Customizing the headline of a Quote tag

I'm talking about this right here:

Hodor

I'd like to take a great big bite out of them Frey pies.

Codes for the specific examples:

[quote name="GRRM (SSM 2013)"]Hodor[/quote]

[quote name="No one ever"]I'd like to take a great big bite out of them Frey pies.[/quote]

Formula:

[quote name="Insert headline here"]Insert content here[/quote]

Please note that I didn't type the word "said" in the code for the headline. Usually, quote names refer to members on the board, that's why the additional word "said" is added automatically. AFAIK, it can't be removed.

Keep in mind that when quoting another user, there's also a specific post ID and timestamp involved, besides the user name. It looks like this:

[quote name="Insert user name here" post="Insert post ID here" timestamp="Insert timestamp here"]Insert quoted content here[/quote]

4. Spoiler tags

I guess you're pretty familiar with these, huh?

Code for the specific example:

[spoiler]I guess you're pretty familiar with these, huh?[/spoiler]

Formula:

[spoiler]Insert text here[/spoiler]

There's also the possibility of using a so-called "spoiler24" tag:

Spoiler

With this one, the word "spoiler" of the spoiler tag is written in default type rather than bold type.

Formula:

[spoiler24]Insert text here[/spoiler24]

Keep in mind that, contrary to quote tags, the title of the spoiler tag in itself (i.e. the word "spoiler") can't be edited, AFAIK. Believe me, I tried. You can make it bold, italic or underlined, though. But that's about it, I guess. Changing the color doesn't seem to work, either.

5. Horizontal rule / line

I've been using this throughout my OP, in case you haven't noticed. It's this line here:

---

Very neat for structuring / breaking up longer posts.

Code:

[hr]

Yep, it's that easy...

6. Acronym

This, of course, is the feature I've used right at the beginning of the thread. Just move your mouse cursor over the following text and a description box pops up.

Hey, I want to tell you something.

TPtwP

Codes for the specific examples:

[acronym="Shhh. (I'm Batman.)"]Hey, I want to tell you something.[/acronym]

[acronym="The Prince that was Promised"]TPtwP[/acronym]

Formula:

[acronym="Insert description here"]Insert abbreviation here[/acronym]

With this one, it's actually easier to use the (32) "Special BBCode" wizard rather than typing manually.

7. Member tag / link

Great for referencing or crediting another member on the board. If you move your mouse cursor over the member name, additional info pops up. Click on it and you will be redirected to the members page.

Ran

Code for the specific example:

[member=Ran]

Formula:

[member=Insert member name here]

8. Wiki tag / link

Useful if you want to quickly provide a link to an entry in the "Wiki of Ice and Fire" without having to look it up and obtain the actual link first. Just type in the title of an existing wiki entry.

Bloody Gate

Code for the specific example:

[wiki]Bloody Gate[/wiki]

Formula:

[wiki]Insert title of existing wiki entry here[/wiki]

9. Background color

Background color is orange.

Code for the specific example:

[background=#ff8c00]Background color is orange.[/background]

Formula:

[background=Insert Hex Color Code here]Insert text here[/background]

I reiterate, Hex Color Codes can be obtained from various places around the web, such as this.

Ok. I think that's it for now. :) I might add a few things here and there later down the line. If you have any questions, suggestions, corrections etc., please let me know. Cheers!

---

Beware: The OP is very likely to get out-of-date after a while, especially after major updates of the board.

Just something to keep in mind.