FreeLunchRoom - The #1 Freebie Trading Forum on the Internet! » Getting Down to Business » Member Tutorials

[gamegreen]

Thread formatting and BB code: a tutorial

This tutorial is all about how to format posts and threads on FLR, what BB code tags are and how to use the toolbar icons to insert links, images, and formatted text such as fonts, colors and sizes.

BB Code

FLR, like most other forums, uses BB code (short for Bulletin Board code) to accomplish formatting in all posts and private messages. Many a newbie is confused when they try to use html formatting in their posts and it doesn't work, html is not allowed in posts (or rather it doesn't work), so first I'll talk briefly about BB code.

BB code is basically a set of 'tags' used for formatting. A tag is a special character or set of characters that tell the forum how to format the text between the tags. You specify a tag by placing it in [] brackets, each tag has an opening and a closing tag. The best way to describe how this is done is to just look at an example. Lets look at the [b] tag. This is the tag that will bold text. This is how you use it:

[b]This text will be bolded[/b]

Notice the / in the closing tag, all closing tags have the / in them. The above example when viewed in a thread would have this result:

This text will be bolded

Some tags can utilize an option as well, this is done with the = sign. For instance the [color] tag is meaningless without specifying the color as an option like so:

[color=blue]This text is blue[/color]

Which would yield:

This text is blue

You can read the FLR BB Code List at the following link. It's a great place to learn how to properly use all of the BB codes available on FLR:

Free Lunch Room - BB Code List

You can read more about BB code at bbcode.org:

BBCode.org, bbcode users guide and tricks on implementing it.

Use the toolbar for convenient BB code formatting

Every type of formatting whether links, images, fonts or anything besides plain text is done with BB code tags (known as 'wrapping' the text with tags). Instead of having to remember and manually type out these tags, you can use the formatting toolbar that you see at the top of where you enter your posts to wrap text in the appropriate tags for you. The toolbar looks like this:



The icons and menus in this toolbar are designed to conveniently insert the proper BB code for you so you don't have to remember and type them out manually each time. The general procedure for applying an icon function to some text, is to first select or highlight the text you want formatted, then click on the appropriate icon. The selected text will be wrapped in the tags necessary to create the effect desired. (if that is confusing, see my description of text selection near the bottom of the tutorial). I'm going to briefly examine a few of the most important of these icons and their function below.

Fonts - Drop down menu where you can select different styles for text.

Sizes - Drop down menu where you can select different sizes for text.

- Allows you to choose different colors to apply to your text.

- Creates a link. Just highlight the text you want the link to have, click on the icon, then paste the link in the box that appears (paste over, or delete the "http://" that is in there by default). A word about links: anytime you type a URL in a message, the forum automatically puts the correct BB code tags around it to make it clickable, and the title for the web page will be used as the display text for the link in that case, so you don't have to use the icon or manually put the link between tags unless you wish to control the text that is displayed for the link.

- Inserts an image. Simply paste the URL for the image in the box that appears when you click the icon. Many people prefer to upload their images to somewhere like photobucket.com or imageshack.com, but you may place them anywhere on the internet where you have upload access.

- Bolds text

- Italicizes text

- Underlines text

- Centers text.

The other icons should be self explanatory by holding the mouse over them and a brief description will pop up describing the function.

Preview post

When you are composing or editing a post with a lot of formatting, you may wish to make frequent use of the 'Preview Post' button. This button will put up a preview of what your post will look like with all of the formatting you have done, then allow you to keep editing it.

Selecting or highlighting text

Confused about what highlighting or selecting text means? This just means you press and hold the mouse button down at the start of the text, and then drag the mouse through to the end of the text you want selected, then release the mouse button. The selected text may then have any one of the toolbar functions applied to it by clicking on the appropriate icon or drop menu while the text is selected.

WYSIWYG editing

There is also the option of changing your editor settings on the forum to the "WYSIWYG" style. (What You See Is What You Get). This allows you to see how your post will look as you are creating it. For more information about how to access and use this setting, here are some good links that deal with using this editing style to create a trade thread and signature:

http://www.freelunchroom.com/board/m...-pictures.html

http://www.freelunchroom.com/board/m...-pictures.html

Converters

There are various code converters available, such as this one:

Cool HTML to BBCode Converter v. 1.2

Or you can get an application that will apparently convert from word to html to BBcode, Moe Money made a post about it here (thanks for the prize MM!):

http://www.freelunchroom.com/board/g...ml#post2874018

---
Note: if you have useful BB code tips or tricks, by all means post them below! Also if you have any trouble with your threads or BB code questions, feel free to post them here and I'll try to give you a hand.

[monksmom]

Awww....how kewl:)

[IRONLady]

Perfect, just what I needed. Thank you so much !

[kar708]

I've learned a TON about BB code since I've been on FLR. A very cool thing to know! Thanks GG for posting this.

[CouldBFree]

Good info Gamegreen!!!

THANKS!!

[aries07]

Great post gg!! This was long overdue for many people do not know about BB code etc,so this will be a great help , thanks for putting this together , very well explained!

[pkinhawaii]

Great Thread Thanks

[joeys1976]

Great thread

[Chicago]

Not sure if everyone already knows this, but a quick and easy way to use the bold/italic/underline commands is to simply highlight the text and then press ctrl + b,i, or u.

So for example - ctrl + b made this whole line bold after I highlighted it.

I use this shortcut all the time so I thought I'd share!

This is for PC. Not sure about Macs.

[FreebiesNow]

Hey Gamegreen... Great Post! One question though... how did you get the codes to display correctly without actually performing the task they were supposed to ... like the bold example... why didn't the text in between the codes actually appear bolded? It doesn't appear that you used spaces. What's the secret? Many times, people try to explain about the [ y o u ] code, but when we type it, the FLR name gets substituted unless we add space or some other character. So you've got me wondering...

Thanks, Pamela