The Toolbar
In the main message area, you'll see the main toolbar along the top, and the smilies on the right side. Let's go through the toolbar first. HINT: If you place your cursor over the toolbar buttons, a helpful tooltip will pop up to tell you what it is.
Remove Text Formatting 
[hl]-[/hl]
This is the first icon in the toolbar, and looks like two "A"'s with a red "X" through them. This button removes any formatting from the selected text. Let's say you have some text which is bolded and colored and you would like to make it just plain text. Simply highlight the text, including the BB Code, and click the Remove Text Formatting button. This will remove all the BB Code from that highlighted text.
Fonts
[hl]-[/hl]
Next up is the Fonts drop-down box, which as you can guess changes the font of the text. When applied to text, it places a "FONT" tag on either side of the text, with the name of the particular font applied included in the first tag.
[FONT="Impact"]Example[/FONT]
results in:
Example
Sizes
[hl]-[/hl]
The Sizes drop-down box changes the size of the text. It places "SIZE" tags on either side of the text, with the number of the particular size included in the first tag.
[SIZE="3"]Example[/SIZE]
results in:
Example
Color 
[hl]-[/hl]
Next up is the Color drop-down box, which changes the color of the text to whatever you choose. It places the "COLOR" tag on either side of the text, with the specific color included in the first tag. You can edit this color to any color you wish by entering the hex color code preceded by the number sign in the first tag. For example, if you wish the text color to be white, you can enter "#ffffff" in the first tag. A guide to the hex code colors is HERE.
[COLOR="Green"]Example[/COLOR]
results in:
Example
Smilies Box 
[hl]-[/hl]
Next there is the Smilie drop down box, which duplicates the smilies on the side of the main message area. We'll cover smilies later.
Manage Attachments 
[hl]-[/hl]
The Manage Attachments button duplicates the button below the main message area, and we'll cover that later.
Undo/Redo 

[hl]-[/hl]
The Undo and Redo buttons work just like they do in Word and are self-explainatory.
Bold | Italic | Underline 


[hl]-[/hl]
Going down to the next row of buttons, you see the Bold, Italic, and Underline buttons, which do what you would think they do. They will place the "B", "I" or "U" tags on either side of the affected text.
[B]Example[/B] [I]Example[/I] [U]Example[/U]
results in:
Example Example Example
Align Left | Align Center | Align Right 


[hl]-[/hl]
These buttons obviously do what you think they would do. They do it by placing "LEFT", "CENTER" or "RIGHT" tags around the affected text.
[CENTER]Example[/CENTER]
results in:
Example
Ordered List 
[hl]-[/hl]
This button will create a numbered list from the highlighted text. It does this by placing the text in the "LIST" tag and preceding each bullet with an asterix. Each bullet has to be on a separate line to be a separate bullet.
[LIST=1][*]Example 1[*]Example 2[*]Example 3[/LIST]
results in:
- Example 1
- Example 2
- Example 3
Unordered List 
[hl]-[/hl]
This button does the same thing as a numbered list except it uses dots instead of numbers.
[LIST][*]Example 1[*]Example 2[*]Example 3[/LIST]
results in:
- Example 1
- Example 2
- Example 3
Decrease/Increase Indent 

[hl]-[/hl]
The Increase Indent button indents the text in a post by placing the text inside the "INDENT" tags. The Decrease Indent button removes an indent.
[INDENT]Example[/INDENT]
results in:
Example
Insert Link 
[hl]-[/hl]
The Insert Link inserts a hyperlink into your post by placing "URL" tags around text, with the actual URL inside the first tag. There are two ways to insert a link. You can highlight the text which will be linked, click the Insert Link button, enter the URL, and click OK. The Editor will do the rest. If you click the Insert Link without highlighting any text, enter a URL and click OK, the Editor will use the URL itself as the text for the link. If you want to change that, simply change the text inside the tags to whatever you wish.
[URL="http://www.google.com"]Example[/URL]
results in:
Example
Remove Link 
[hl]-[/hl]
The Remove Link button removes any link tags from your selected text.
Insert Email Link 
[hl]-[/hl]
This button works just like the Insert Link button, except it links to an email address instead of a URL. It places the "EMAIL" tag around the text with the email address in the first tag.
[EMAIL="someone@somewhere.com"]Example[/EMAIL]
results in:
Example
Insert Image 
[hl]-[/hl]
The Insert Image button inserts an image via a URL into your post. It does it by placing the "IMG" tag around the URL you enter. This is used to post an image stored on another site or web space. Simply click the button, enter the URL to the image and click OK.
Wrap Quote 
[hl]-[/hl]
This button places the selected text in a quote box, which is useful when copying other people's text to reply to it. It wraps the text in "QUOTE" tags. If you click the Quote button with no text selected, it will place the beginning and end tags in the main text area and you simply enter the text you wish to be in the quote between the tags. Alternatively, you can select the text you wish to be in the quote and click the Quote button. This will place the tags on either side of the text.
If you wish to include the name of the person whose quote you are using, you can add a "=" and the name in parantheses in the first tag. For example, you could add QUOTE="John Brown" in the first tag.
[QUOTE]Example[/QUOTE]
results in:
Wrap Code Tags 


[hl]-[/hl]
The last three buttons on the bottom part of the toolbar insert different types of code in a box. When you are making a post, you are essentially writing code for display. All these tags you have been learning about are actual code, BB Code. When you submit your post, your browser takes all that code, processes it and displays it according to the code you put in your post.
When you enter other types of web-based code, such as HTML or PHP code, your browser will process that code, giving you some unexpected results. That is where the Wrap Code Tags come in. If you wish to post a bit of code, maybe to help someone with their web page, you simply wrap the code in the appropriate tag, and it will display properly in a box, just like the Quote box. To do this, simply click the button for the code you wish to enter and enter the code between the two tags. Alternatively, you can select the code and then click the button which will place the tags on either side of the text.
[CODE]<table width="200">
<tr><td align="left">
<strong>Example</strong>
</td></tr></table>[/CODE]
results in:
Code:
<table width="200">
<tr><td align="left">
<strong>Example</strong>
</td></tr></table>
Increase/Decrease Size 

[hl][/hl]
These buttons, located at the top right corner of the message area, increase or decrease the size of the main message area.
Bookmarks