The Editor Guide

[Mikki]

The Editor Guide

The Editor is the main tool for posting and private messages. It is easy to use, yet very functional and powerful. This guide will show you how to use it to its full potential.

Using the Editor is like using Microsoft Word to create a letter with many of the same tools. Some work the same, but others work differently. HINT: It is helpful to have another browser open to the Editor while reading this.


About BB Code
[hl][/hl]
Select a bit of text, highlight it and click on the Bold button (B). You have just made your text bold, but instead of the text being bold, you should now see some funny stuff on either side of your text. You should see a "B" in brackets before the text, and a "/B" in brackets after the text. This silly looking stuff is BB Code, and it is essentially markup code which, when you submit your post, tells your browser to bold the text that is inside the tags. The tags work in pairs, one tag on each each side of the text. The beginning tag generally contains info and the end tag always has a "/" in it.

As you utilize more features of the Editor, you'll see all kinds of crazy stuff in your post. All of this BB Code is what makes your post look cool when it's submitted. You'll learn what all this stuff does as you get more experienced, but I'll go through it here so it's not so confusing.

With all of the text features, you can either highlight the text you wish to format and click the button you wish, or you can click the button first and then enter the text you wish to format inside the two tags.

Since anything in the main text area is plain text, you can edit the text and tags alike. If you bolded some text but forgot a letter, instead of redoing the formatting, you can simply move the letter inside the tags so it's bolded as well. You can even format your text by just typing it in along with the tags without even clicking any buttons. You can get quite creative when editing the BB Code manually like this, give it a try!

You can apply more than one type of formatting to a section of text. For example, if you highlight a section of text and then click on the Bold button, the Italic button, and then choose a color, all formatting will be applied to the text. It will simply place the text inside each of the bold, italic and color tags.

Example


Title
[hl][/hl]
Above the main message area you'll see the Title box. You can enter a title here which will become the title of the thread you are creating or show at the top of your post when submitting a reply. This is useful for giving a quick answer to precede the text in your post.

[Mikki]

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:

1. Example 1
2. Example 2
3. 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:

Example

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:

<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.

[Mikki]

Smilies
[hl]-[/hl]
Smilies are fun little icons which you can use to show your emotion at different points in your post. You can choose a smilie from the Smilie drop-down in the toolbar or choose one from the Smilie box on the right side of the message area. Also, you can type the code for the smilie directly in your post once you learn each smilie's code. Simply click on the smilie you wish to see the code for and see what it looks like when it is inserted in your post.

Smilies can help set the mood for your post, which could aid in preventing your post being taken the wrong way. If you make a statement that could be taken either positively or negatively, using a smilie can show which direction you are going.

:) ;) :D
results in:



Post Icons
[hl]-[/hl]
The Post Icons, which are listed at the bottom of the main message area, will be displayed beside the thread title in the thread list of a forum. They can help set the mood for the thread. For instance, if your thread is a question, you can use the question mark smilie. If you thread in important info, choose the exclamation smilie.

[Mikki]

Additional Options

Miscellaneous Options
[hl]-[/hl]
The Show Your Signature checkbox determines whether your signature will show under that post or not. If you are posting many posts in succession, such as posting a bunch of holiday photos, you can uncheck this box so there isn't as much of a break between your posts.

The Automatically Parse Links In Text checkbox determines whether the Editor will automatically place the "URL" tags around text it considers to be a URL. For instance, if you type in www.google.com, the Editor will automatically make a link that uses that text for display and the link.

The Disable Smilies In Text checkbox forces the browser to show the BB Code for the smilie instead of the image.


Attach Files
[hl]-[/hl]
When you click on the Manage Attachments button, a box pops up where you can upload an image and also includes a table showing the various filetypes you can upload and their max sizes allowed.

To attach a file, simply click on the Browse button to find the file you wish to upload on your computer, or enter the URL of the file. Then simply click the Upload button.


Thread Subscription
[hl]-[/hl]
Use this drop-down box to choose whether you wish to Subscribe to the thread or get notified when someone posts in it. Subscribed threads are listed in your User CP for convienence.

[Mikki]

Using the Editor can be as simple or powerful as you like. You can do all of the basic things simply by using the buttons as described above, and never even bother with the BB Code. Or you can use the Editor to its full potential and create visually stunning posts.

And of course, the beauty of using a forum is that if you have a question about something not covered in this guide, you can simply post up and ask!