How to Setup Your Forum Signature - Basics

Many forums allow users to add signatures to their profiles, those signatures then appear automatically in the end each of their posts.

You can use bbCode to put anything in your signature, plain text, links, images, etc. you must be careful of the rules of each forum, almost all limit the number of the different items in signatures to avoid spam or abuse.

No difference between bbCode use in posts or in signature, so first, for the formatting, I will refer you to the previous, & second, in the next post, will talk about where to locate signatures editors in the different kinds of forums.

Basic content edition lessons:

Basics: How Does bbCode Work?; How to Correctly Insert Tags.

Formatting of text: Bold / Italic / Underline; Colors; Fonts; Size; Alignment.

Inserting Live Links: Regular Links; e-Mails.

Insertion of Images: Part 1; Part 2; Part 3; Clickable Images; Alignment.

Others: Checkout the sidebar on the right.

Where to go to edit your signature?

That depends on the type of forum you're in, for the four most popular, see instructions here:

Edit Signature in Different Kinds of Forums

If you can't find there, post your questions as a comment to this post :)

Post Clickable Thumbnails Using ImageShack

I talked yesterday about a nice way to post thumbnails or previews of pictures in your forums posts to avoid the trouble that large images would cause if displayed directly in posts.

See the post here: How to Post Pictures Clickable Thumbnails on Forums

However that methods require some knowledge in images edition. That's why, let's see today a less complicated method.

First you need to upload your image to ImageShack.us, it's easy:

• Click HERE to go to ImageShack site
• You'll see three radio buttons to choose from: "image", "url", "video", choose "image".
• There's a "Choose..." button, click on it, browse your hard drive to locate your image then click "ok"
• If you don't already have an account with ImageShack, you'll be invited to enter your e-Mail address, enter a valid one so that you get your own account that is going to be very useful in the future
• You'll see also two boxes to check: "resize image?" & "remove size/resolution bar from thumbnail?" do not check any of them
• Last step: click the "host it" button to start upload process.

When the upload is finished you'll be presented to a page in which there are four HTML & BB codes one under each other, what interest us is the second one, the one titled "Thumbnail for forums (1)". (Not "Thumbnail for forums (2)"!!)

As an example, I uplaoded an image, & here's it's bbCode provided by ImageShack:

[URL=http://img339.imageshack.us/my.php?image=c7cl7.jpg]
[IMG]http://img339.imageshack.us/img339/1311/c7cl7.th.jpg[/IMG][/URL]

The code above is not correct because there's a line-break in it, I posted it in two lines, because it would break my blog layout if displayed in one line, your code should be in one line.

I won't explain what exactly mean the tags & other URLs in the code, if you want to know, it is very similar to what we saw in the 1st lesson: How to Post Clickable Thumbnails on Forums.

So what rest now, is just to go & paste your code in your forum message, the result will be this:

How to Post Pictures Clickable Thumbnails on Forums

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

If you're not familiar with images in bbCode, read images lesson in three parts: Part 1, Part 2 & Part 3.

Sometimes posting big images into your posts presents a problem, because large pictures are hard to load & often deform forums layouts & reduce their usability.

In the end of my post on Images Display Part 3, I talked about an alternative which is the use of [url] tags instead of [img] tag, this way only a link to the image & not the image itself is displayed in your final message.

In this lesson, let's talk about an other option: "Thumbnails".

Thumbnails are small previews of images, linked to the original full size pictures, that means, that instead of posting the original large image, you post a thumbnail or preview, on which users can click to see a new page open with the full sized image displayed on it.

If you are familiar with images edition, you can create your own thumbnails. All you need is to create a reduced size copy of an image, upload both to an images host & code them using bbCode, let's see an example:

Below is the URL of my original picture hosted on PhotoBucket (I made it clickable to let you see how it looks like):

http://i228.photobucket.com/albums/ee88/learn-bbcode/C7.jpg

& this is the link to an image which size is 30% of the original:

http://i228.photobucket.com/albums/ee88/learn-bbcode/C7-thumbnail.jpg

Now, we will follow the same steps we followed when we made a linked clickable image:

As we want to display the preview in the forum message, we first have to wrap it with [img] tag:

[img]http://i228.photobucket.com/albums/ee88/learn-bbcode/
C7-thumbnail.jpg[/img]

(don't have a line-break in your code, keep it in the same line!)

Result:



Now, to link to the original full sized picture, we have to wrap the code above with [url] tag, & to add an option to it which is the link to our picture:

[url=http://i228.photobucket.com/albums/ee88/learn-bbcode/C7.jpg]
[img]http://i228.photobucket.com/albums/ee88/learn-bbcode/
C7-thumbnail.jpg[/img][/url]

(again, the code has two line-breaks because of limitations in this bog's layout, but keep yours in one line)

To verify the result, click on the thumbnail below:




That's it! If your not familiar with images edition though, we'll see in the next lesson an easier way to post thumbnails: Post Clickable Thumbnails Using ImageShack :)

How to Quote Messages of Other Posters - bbCode Basics

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

The quote feature allows you to display in your post, a previous post, a part of it or any block of text, the quoted text will usually be shown in a frame in your final post to differentiate it from your own words.

The tag for quoting is [quote]. Now in the popular forums, you just need to click on a button to quote a previous post, or to copy then paste the quoted message or paragraph to he field in which you type your post, to select that text, then to click a button to make it between the starting tag [quote] & the end tag [/quote].

However, my aim here is to let you know how exactly tag work so that you can manually insert them without editors & also to customize them for your needs, as the automated systems have only basic plain usability.

Let's first do a simple quote, then use an option for more advanced quoting:

1. Example on a simple quote:

Nothing we don't already know about correct tags insertion:

[quote]This part is a quoted text.[/quote]
This part is not.

Will most likely look in your final post:

Quote:

This part is a quoted text.

This part is not.

2. Advanced quoting using options:

There are some options available in some forums scripts & not in others, but there's one common option, the one that let you specify the poster / author of the quoted text. This option is added as we add other options we already saw, i.e in the starting tag after the tag code & an "=" sign, the option itself will be the name of the poster / author of the quoted text (in fact you can type anything as the option).

Example:

[quote=Sandy]This is what wrote Sandy.[/quote]
This is my reply to it.

Will look in your final post depending on the forum you participate in:

Quote:

Originally Posted by Sandy This is what wrote Sandy.

This is my reply to it.

or:

QUOTE(Sandy)

This is what wrote Sandy.

This is my reply to it.

or:

Quote from: Sandy

This is what wrote Sandy.

This is my reply to it.

etc.

Note: Since I stated this blog, phpBB based forums are making me some troubles as they don't include some useful features in bbCode, or have some special codings.

If the advanced tutorial above doesn't work, maybe the forum in which you tried it on is a phpBB based forum (to be sure see: What Kind of Forum are You Using?), in this case, you have to wrap the option with quotation marks "".

Example:

[quote="Sandy"]This is what wrote Sandy.[/quote]
This is my reply to it.

Result:

Sandy wrote:

This is what wrote Sandy.

Any questions? drop a comment! :)

Advanced Use of Lists - Sub-Lists / Under-Lists Creation

We already talked about the basic posting of lists in two lessons: How to Create Simple Bulleted Lists & How to Post Advanced Ordered Lists.

Let's talk now about more advanced use of lists in bbCode. You are not limited in posting plain lists, you can combine tags with different option to get some advanced lists with sub-lists under them.

This might be a bit complicated, you may make some errors while creating your list, & may have to preview your messages before you publish them to check if all is correct. All the popular forums allow posts previews, so don't hesitate to use this feature to make sure you're posting a well formated message, or just for testing, why not? ;)

Let's see step by step how to make sub-lists:

As an example, we will create a list with main titles numbered using capital Roman digits, under them, lists with titles numbered using Arabic digits, and finally, a sub-sub-list that is alphabetic with lowercase letters.

Here's what we'll going to get in the end of this tutorial:

1. American Continent
   
   1. USA
      
      1. New York
      2. Los Angeles
      3. Miami
   2. Mexico
2. Africa
   
   1. Egypt
   2. Algeria
   3. Sudan
3. Europe
   
   1. Spain
   2. Switzerland

As we saw, unless with Simple Machines Lists, all others are made using two tags: the [list] tag & the [*] tag, let's first type the code for our main list containing continents, we will use the I option for it:

[list=I]
[*]American Continent
[*]Africa
[*]Europe
[/list]

Result:

1. American Continent
2. Africa
3. Europe

Nothing we don't already know till now, now, let's insert the code for the sub-lists of countries, there are countries under each continent, so we are going to add an under-list under each continent name, using the option 1 this time:

[list=I]
[*]American Continent
[list=1]
[*]USA
[*]Mexico
[/list]
[*]Africa
[list=1]
[*]Egypt
[*]Algeria
[*]Sudan
[/list]
[*]Europe
[list=1]
[*]Spain
[*]Switzerland
[/list]
[/list]

Notice how the first & second lists we added, had their starting tag [list] inserted just after the continent name it should be under, and their end tag [/list] put just before the next continent.

For the list under Europe, and as it's the last one, the end tag was inserted before the end tag of the main list of continents.

Result:

1. American Continent
   
   1. USA
      
   2. Mexico
2. Africa
   
   1. Egypt
   2. Algeria
   3. Sudan
3. Europe
   
   1. Spain
   2. Switzerland

Now, under USA, we have a list of cities ordered alphabetical, for that, we have to insert cities list with the option a (for lower-case letters), under the list of American countries, exactly between the [*]USA code & the [*]Mexico code:

[list=I]
[*]American Continent
[list=1]
[*]USA
[list=a]
[*]New York
[*]Los Angeles
[*]Miami
[/list]
[*]Mexico
[/list]
[*]Africa
[list=1]
[*]Egypt
[*]Algeria
[*]Sudan
[/list]
[*]Europe
[list=1]
[*]Spain
[*]Switzerland
[/list]
[/list]

We already saw the result, this:

1. American Continent
   
   1. USA
      
      1. New York
      2. Los Angeles
      3. Miami
   2. Mexico
2. Africa
   
   1. Egypt
   2. Algeria
   3. Sudan
3. Europe
   
   1. Spain
   2. Switzerland

Any questions? As always, drop a comment! :)

Posting Items Lists in Simple Machines Forums

Note: This lesson is about lists in Simple Machines based forums only. For regular help on lists insertions in bbCode, see: How to Create Simple Lists & How to Post Advanced Ordered Lists.

Not sure if your posts are on a Simple Machines powered board? See: What Kind of Forum are You Using?

In the forums based on Simple Machines script & software, posting lists is different from the other most popular ones.

First, ordered lists & the use of option with the [list] tag are not supported, so you can only post simple unordered lists.

Second, by default, a new tag [li] is used instead of the [*] tag for the items (or elements) in the lists, although [*] tag if used will give you the same result.

Let's see an example:

[list]
[li]List item.
[li]Another list item.
[li]And another one.
[/list]

Result in final post:

• List item.
• Another list item.
• And another one.

And the final difference in Simple Machines, is an addition: You can choose the symbols for your items by changing the default [li] tag. Those symbols can be a Disk, Circle or Square.

To make simple, let's see them all in an example:

[list]
[li]default - disc
[*]disc using [*] tag
[@]disc using [@] tag
[o]circle using [o] tag
[O]circle using [O] tag
[0]circle using [0] tag
[+]square using [+] tag
[x]square using [x] tag
[#]square using [#] tag
[/list]

Result:

• default - disc
• disc using [*] tag
• disc using [@] tag
• circle using [o] tag
• circle using [O] tag
• circle using [0] tag
• square using [+] tag
• square using [x] tag
• square using [#] tag

How to Post Advanced Ordered Lists - bbCode Basics

We learned in the previous lesson about the basic use of the [list] tag: How to Create Simple Bulleted Lists.

Now let's go more advanced using options to create ordered lists in bbCode for posts in forums discussions.

The options to use with the list tag are five:

1 - For a numbered list.

A - For an alphabetic with capital letters list.

a - For an alphabetic with lowercase letters list.

I - For a numbered with capital Roman numeral list.

i - For a numbered with small Roman numeral list.

Let's see examples for options 1, A & I:

1 Option - numeral list:

[list=1]
[*]List item.
[*]Another list item.
[*]And another one.
[/list]

Result:

1. List item.
2. Another list item.
3. And another one.

A Option - alphabetic with capital letters list:

[list=A]
[*]List item.
[*]Another list item.
[*]And another one.
[/list]

Result:

1. List item.
2. Another list item.
3. And another one.

I Option - numeral with capital Roman numeral list:

[list=I]
[*]List item.
[*]Another list item.
[*]And another one.
[/list]

Result:

1. List item.
2. Another list item.
3. And another one.

Note: If the instructions above don't work for you, you might be posting on a Simple Machines script based forum (to be sure read this: What Kind of Forum are You Using?), see spacial instructions on posting lists here: Posting Items Lists in Simple Machines Forums.

How to Create Simple Bulleted Lists - bbCode Basics

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

Let's talk about making lists in forums posts using bbCode, lists can be ordered or unordered, in this lesson will talk about the simplest kind: unordered or bulleted lists.

They are simple because they don't require an option, but only two tags:

The [list] tag: Wraps the entire list & doing that designates its limits.

The [*] tag: Inserted on the left of each item in the list. I have to specify that unlike other tags, this one has not an ending part & doesn't wrap the element or item.

Example:

[list]
[*]List item.
[*]Another list item.
[*]And another one.
[/list]

Result in your final message:

• List item.
• Another list item.
• And another one.

As a final note, I want to add that in some kinds of forums, you could simply type the elements you want to add to a list, each one in a line, select them all, click on a button in a provided bbCode Editor & all the tags are inserted automatically, rest then simply to publish your post.

But what if an element in the list was composed of 2 or more lines?

In this case you have two options:

1. To insert the tags manually (a [*] before any item starts).
2. To use the editor then modify it to fit the result needed.

Example of elements going on several lines:

[list]
[*]List item, 1st line.
2nd line.
[*]Another list item.
[*]And another one, 1st line.
2nd line.
3rd line.
[/list]

Result:

• List item, 1st line.
  2nd line.
• Another list item.
• And another one, 1st line.
  2nd line.
  3rd line.

Second lesson: Advanced Ordered Lists Posting.

Note: If the instructions above don't work for you, you might be posting on a Simple Machines script based forum, see spacial instructions on posting lists here: Posting Items Lists in Simple Machines Forums. For any help needed, please post a comment. :)

In Which Order Should Tags Be Inserted - Part 2: Link & Color Tags

I talked in the previous post about tags insertions, how to do it correctly & the restriction with the [img] tag, as it should always be the closest to the element (image URL) it wraps, see: In Which Order Should Tags Be Inserted - Part 1.

Let's talk now about restriction concerning the [url] & [color] tags:

1. [url] tag when wrapping a link without the use of an option:

To learn everything about [url] tag, check this post: Insertion of Live Links.

To do simple, & to get what I mean by [url] tag used with an option, see the example below (the link in red is the option):

[url=http://learn-bbcode.blogspot.com/]Learn Forums bbCode Secrets[/url]

Final look:

Learn Forums bbCode Secrets

While a [url] tag used without an option looks like this:

[url]http://learn-bbcode.blogspot.com/[/url]

Final look:

http://learn-bbcode.blogspot.com/

In the second example, & always when [url] tag wraps directly a link without use of option, & if you want to combine it with other tags, [url] tag must be the closest to the hyper-link it wraps, or else an error would occur in your final message.

Example:

[b][url]http://learn-bbcode.blogspot.com/[/url][/b] - Right

[url][b]http://learn-bbcode.blogspot.com/[/b][/url] - Wrong

2. [url] tag when used with an option:

a. [img] tag has to be closer to the image link:

I talked in detail about that in: In what order to insert tags - part 1.

b. [color] tag closer to the text wrapped:

Often, the use of options with [url] tag is made to be able to wrap text & make it clickable, i.e. linked to web-pages or sites, if additionally you want to give that text a spacial color, you need to use [color] tag (read about this tag here: How to Change Colors).

To be sure that your color will appear after you submit your post, the color tag have to be closer to the text wrapped than the [url] tag.

Example:

[url=http://learn-bbcode.blogspot.com/][color=red]Learn Forums bbCode Secrets[/color][/url] - Right

[color=red][url=http://learn-bbcode.blogspot.com/]Learn Forums bbCode Secrets[/url][/color] - Wrong

With the exception of the cases above, tags work fine when combined with [url] tag no matter in which order they are inserted.

In Which Order Should Tags Be Inserted - Part 1: Image Tag

In general tags can be inserted in any order as long as you respect the golden rule stating: "the tag opened first should be closed last".

In other terms, if two or more tags are used to format some text, there must be a tag that wrap this text, then another tag wrap both text & the previous tag & so on, finally we'll get a code composed of initial text & tags wrapping it. Then if you look at this code from left to right you'll see it starting with the starting part of some tag, & ending with the ending part of that same tag. Does this make sense? If not here's a previous detailed lesson with examples & all:

Generally if you respect that, it doesn't matter in which order tags come & wrap text, but there are some exceptions, they concern [img], [url] & [color] tags, in this lesson we'll talk about [img] tag:

[img] tag must always be the closest to the picture link!

We saw an example about that in the previous lesson:

[center][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/center] - Right

[img][center]http://www.google.com/intl/en_ALL/images/logo.gif[/center][/img] - Wrong

[img] tag has always to be in direct contact with the image it wraps or else an error happens in your final message.

We'll see later that [url] tag has a similar restriction, but even this last can't be closer to the picture link than [img] tag:

Example: (There shouldn't be a line-break in your code!)

Right:

[url=http://google.com/][img]http://www.google.com/intl/en_ALL/
images/logo.gif[/img][/url]

Wrong:

[img][url=http://google.com/]http://www.google.com/intl/en_ALL/
images/logo.gif[/url][/img]

How to Change Images Alignment in Posts

Let's go for more ways to format posts & see how to align pictures.

Images are in most of forums aligned by default on the left side, to change that you need to use one of three tags we already saw in a previous lesson, the [left], [center] & [right] tags, see their use with text here: How to Change Text Alignment.

To summarize, you use one of those tags at once to wrap your text (or image as we'll see):

[left] for left alignment, [center] to center an element & [right] to align an element on the right.

The use of those tags with images is not different than the use for text, you just need to combine them with the [img] tag (learn more about how to combine tags here: How to Correctly Insert Tags).

Examples:

Again let's use Google Logo image as an example:

http://www.google.com/intl/en_ALL/images/logo.gif

Wrap it with the [img] tag:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

Then according to if you want the image on the left, center or the right, wrap the whole with [left], [center] or [right] tags respectively:

[left][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/left]

[center][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/center]

[right][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/right]

That's all :)

Notes:

1. As with Fonts Change, unfortunately the guys from phpBB seem to think it useless to let users change text or images alignment, let's hope they fix that soon. With other popular forums platforms text alignment works fine: vBulletin, IP.Board & Simple Machines. To know if your posts are on a phpBB powered forum, see: What Kind of Forum are You Using?

2. When you combine tags, most of time, it doesn't matter in which order you insert them as long as the ones you open first are closed last & so on.

However, when you combine [img] tag with other tags, it must the closest to the image URL it wraps (i.e. directly in contact with it) or else you get an error ..

Example:

[center][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/center] - Right

[img][center]http://www.google.com/intl/en_ALL/images/logo.gif[/center][/img] - Wrong

How to Make Images Clickable - bbCode Basics

This is very useful in forums allowing their users to advertise their sites or businesses, as they can display banners in their posts or signatures, & link those images to their sites.

To make a picture clickable, you need two tags we already saw, the [url] tag (learn about it here: How to Insert Live Links) & the [img] tag we saw in detail in three lessons starting from this one: How to Insert Images in Posts - Part 1.

We learned also previously that two or more tags can be combined provided that the tag started first ends last (read more about that here: How to Correctly Insert Tags).


Now that you know all that, you may have guessed at least partly how to post a linked (or clickabl)e image. Here are the steps needed:

1. The use of [img] tag:

Wrap the image link with the [img] tag, let's use again Google Logo image (see it also HERE then HERE) as an example:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

Result:

2. The use of [url] tag:

OK! Now that we have our image link wrapped, we need to wrap the whole (link + tag) with the [url] tag & add the link we want to link the image to as an option.

Let's use Google.com (http://google.com/) as an example:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

to: (There shouldn't be a line-break in your code!)

[url=http://google.com/][img]http://www.google.com/intl/en_ALL/
images/logo.gif[/img][/url]

and finally:



Any questions? Please post a comment :)

Final Steps & How to Link to an Image - Display Image Part 3 - bbCode Basics

We saw an Intro on [img] tag in lesson one & How to find the links for pictures in lesson two.

Let's now use the tag & link to at last display our image, then will see how to post the link to an image without displaying it in post.

Final steps to display your images:

Once you get your Hyper-link / URL / Address, with one of the methods above, rest to wrap it with the [img] tag:

Example:

Let's use our Google Logo link as an example:

http://www.google.com/intl/en_ALL/images/logo.gif

Wrap it with the tag:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

The result is:

Alternative to the use of [img] tag for posting images:

Some times you just want to link to an image without displaying it, maybe it's too big or would make he thread in which you post hard to load or to read comfortably.

To do that, simply use [url] tag instead of [img] tag, images URLs don't differ at all from other web-pages URLs while applying [url] tag to them, so to know all the ways regarding the use of the [url] tag, go to this lesson: Instructions on Inserting Live Links.

Methods to Get Images Links - Display Image Part 2 - bbCode Basics

After the Intro on [img] tag & Hyper-links, now let's see in detail the two methods for getting the Hyper-links / URLs / Addresses for images:

1. How to get the link for an image published on the web?

Let's use Google Logo as an example:

Go to Google.com & right-click on the Logo ..

Now, if you use Internet Explorer browser, click on Proprties in the menu, in the box that will popup, you'll see the link for the Logo that you'll have to copy, in our example, the link should be similar to this:

http://www.google.com/intl/en_ALL/images/logo.gif

If your browser is Opera or Firefox (click to see why Firefox is recommended), once you right-click on the Logo, you'll see in the menu an option to "copy image address", click on it & the image will automatically be copied to the clipboard, then you just paste it using "Ctrl + v" into your message.

However, this method of linking directly to images hosted on other sites (Google.com in our examples), is not recommended, as it consumes resources from those site, & in some cases you simply won't get your image displayed. Fortunately we have another option :) Here it is:

2. Hosting your images (uploading to the Internet):

There are many sites that offer images hosting, the most popular are ImageShack & PhotoBucket.

Once you register for free with them, those photos hosts allow you to upload images from your computer to them then give you the links to post safely in your forums entries.

They even give you links wrapped with bbCode tags so that you have only to copy & paste into your posts.

How to host images you find on the Internet?

For that you have to download the pictures to your PC first, then to upload to your image host.

Next: Part 3 - Final Steps to Insert Images + How to Link to an Image without Displaying it in Post.

How to Insert Images in Forums Posts - Intro - bbCode Basics

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

The ability of inserting pictures into your messages is a very nice and useful feature in bbCode, images can be displayed without the need to upload them to the site in which you post, here I must precise that only few forums allow pictures & files uploads, except for avatars maybe ..

To display an image you need two things: the tag [img] and the URL or Hyper-link of the image ..

1. How to use the [img] tag?

In a way it's similar to the use of the [url] tag, you need to wrap the URL or Hyper-link of the image.

You must know, that as each web-page or site has its own unique URL, also any image or file published in the web has a unique Hyper-link.

2. How to get images Hyper-links?

There are two methods depending on if the picture is from Internet or a personal photo on your computer .. in the first case you can use the original link of the picture, in the 2nd case, you must host your image (i.e. upload it to an "Images Host").

The two methods in detail in the second lesson: Methods to Get Images Links - Display Image Part 2.

How to Change Text Alignment - bbCode Basics

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

Most of time, the text in forums discussions is aligned on the left, but you can change the alignment in your posts, for decoration, when submitting in some language that's written from right to left, or for any other reason.

There are three tags for text alignment:

[left] - Text left aligned.

[center] - Text centered.

[right] - Text right aligned.

The tags are applied to text as with other tags, they have to wrap the part of your text you want to change the alignment (read How to Correctly Insert Tags).

Examples:

[left]This text is left-aligned.[/left]

[center]This text is centered.[/center]

[right]This text is right-aligned.[/right]

In order, the three lines above will look in your final message:

This text is left-aligned.

This text is centered.

This text is right-aligned.

What to add? Hmm ..

1. That it's useless to combine two or all three alignment tags, that would only help to get an undesired result (more about combining tags HERE).

2. As with Fonts Change, the guys from phpBB think it's useless to let users align text as they wish, let's hope they fix that soon. With other popular forums platforms text alignment works fine: vBulletin, IP.Board & Simple Machines.

3. If you're not sure what software the forum you're part of uses read: What Kind of Forum are You Using?

4. Click here to know how to align pictures.

How to Make an e-Mail Address Clickable - bbCode Basics

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

If an e-Mail address is clickable, a click on it would by default, in most of browsers, open a box from your default e-Mail client (Outlook Express, Thunderbird or any other) to let you compose a message for the address you clicked on.

For linking to an e-Mail you have two option:

1. To use the [url] Tag:

We learned about linking to web pages using the [url] tag here: Instructions on Inserting Live Links.

You can use the same instructions to link to e-Mails, the only difference is that the address have to be preceded by this code: "mailto:"

Examples:

[url]mailto:johndoe@mail.com[/url] - johndoe@mail.com

[url=mailto:johndoe@mail.com]Send a mesage to John Doe[/url] - Send a mesage to John Doe

2. Linking to e-Mails using [email] tag:

This tag was made especially for e-Mails links, using it you won't need to add the "mailto:" code.

The [email] tag then, works the same way the [url] tag works for Hyperlinks as seen HERE.

Examples:

[email]johndoe@mail.com[/email] - johndoe@mail.com

[email=johndoe@mail.com]Send a mesage to John Doe[/email] - Send a mesage to John Doe

Instructions on Inserting Live Links - bbCode Basics

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

By "live links", I mean links in which you can click to go to a different page or website.

Now, in most of forums, you just paste your Hyperlink or URL, submit the message and it's automatically converted to a clickable link, but anyways, let's see how to do that manually + some more very useful options.

The tag for links is this:

[url]

Let's use this blog URL "http://learn-bbcode.blogspot.com/" as an example, the code will be:

[url]http://learn-bbcode.blogspot.com/[/url]

Result:

http://learn-bbcode.blogspot.com/

No problem till now, but what if you want a part of your text being clickable? Something like "Click Here" or ''Go Here" or just a name of a site or anything else?

For that you have to add an option, here, the option will be the Hyperlink itself, & the tags will wrap the text you want to be clickable.

Now, as an example, I'll use my blog title "Learn Forums bbCode Secrets" & its URL of course:

[url=http://learn-bbcode.blogspot.com/]Learn Forums bbCode Secrets[/url]

Will look in your final message:

Learn Forums bbCode Secrets

Next lesson: How to Link to an e-Mail Address

How to Change Text Size - bbCode Basics

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

The tag for changing the text size of your message is the following:

[size]

As we saw with the [color] tag & the [font] tag, you need to add an option to [size] tag to choose the size.

Setting options for text size is a bit more complicated, as different forums kinds use different codes for sizes, let's look at the most used communities scripts & the codes used on them:

Note: If you don't know what software is used in the community you're part of, checkout this: What Kind of Forum are You Using?

1. phpBB

Numeral codes are used for sizes, starting from 1 and ending by 29, 12 generally is the default size, then a small text size is a size using an option < 12 and a big size uses > 12 option.

Note: If you use a bigger number than 29 as an option, you'll get an error in your final messages.

Examples:

[size=9]Small Text[/size] - Small Text

[size=12]Normal Text[/size] or Normal Text - Normal Text

[size=18]Bigger Text[/size] - Bigger Text

2. Simple Machines

Similar to phpBB exept these points:

1. To the numeral codes, you have to add "pt" for point, so that instead of [size=9] you type [size=9pt]
2. The default text size would be 10 & not 12 as in phpBB
3. If you specify a bigger code than 29, you won't get an error in your final message but the bigger size available (i.e. 29).

Examples:

[size=9pt]Small Text[/size] - Small Text

[size=10pt]Normal Text[/size] or Normal Text - Normal Text

[size=18pt]Bigger Text[/size] - Bigger Text

3. vBulletin

There are two options:

1. Numeral: Starts from 1 & goes till 7, so if you give the option a bigger value than 7, you get a size "7".
   
   The default value is 2
   
   Examples:
   
   [size=1]Small Text[/size] - Small Text
   
   [size=2]Normal Text[/size] or Normal Text - Normal Text
   
   [size=3]Bigger Text[/size] - Bigger Text


2. + or -: Starts from -2 and goes till +4, bigger value than +4 will get you a +4 size.
   
   Examples:
   
   [size=-2]Small Text[/size] - Small Text
   
   [size=-1]Normal Text[/size] or Normal Text - Normal Text
   
   [size=+1]Bigger Text[/size] - Bigger Text

4. IP.Board:

Only supports the numeral option in vBulletin boards, codes are 1 to 7 (you get same results adding a "+"), a wrong option code results in a size 3 text (?!)

Examples:

[size=1]Small Text[/size] or [size=+1]Small Text[/size] - Small Text

[size=2]Normal Text[/size] or [size=+2]Normal Text[/size] or Normal Text - Normal Text

[size=3]Bigger Text[/size] or [size=+3]Bigger Text[/size] - Bigger Text

Choose a Font For Your Forum Post - bbCode Basics

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

Let's talk about how to change the default font in your discussions boards messages.

The tag used for fonts is [font], and as with the [color] tag, you need to specify an option, which is a code representing the font of your choice.

However, fonts choice is limited in bbCode, as is the case with HTML, that's because HTML - & bbCode after converted to HTML once you post your message - I said, HTML calls the fonts from users computers, and depending on each computer, more or less fonts would be installed, that's why HTML calls only few widely used fonts.

Here is the list of codes for the fonts used in bbCode:

Examples of codes & their final look for 21 fonts:

[FONT=Arial]Custom Font[/FONT] - Custom Font

[FONT=Arial Black]Custom Font[/FONT] - Custom Font

[FONT=Arial Narrow]Custom Font[/FONT] - Custom Font

[FONT=Book Antiqua]Custom Font[/FONT] - Custom Font

[FONT=Century Gothic]Custom Font[/FONT] - Custom Font

[FONT=Comic Sans MS]Custom Font[/FONT] - Custom Font

[FONT=Courier New]Custom Font[/FONT] - Custom Font

[FONT=Fixedsys]Custom Font[/FONT] - Custom Font

[FONT=Franklin Gothic Medium]Custom Font[/FONT] - Custom Font

[FONT=Garamond]Custom Font[/FONT] - Custom Font

[FONT=Georgia]Custom Font[/FONT] - Custom Font

[FONT=Impact]Custom Font[/FONT] - Custom Font

[FONT=Lucida Console]Custom Font[/FONT] - Custom Font

[FONT=Lucida Sans Unicode]Custom Font[/FONT] - Custom Font

[FONT=Microsoft Sans Serif]Custom Font[/FONT] - Custom Font

[FONT=Palatino Linotype]Custom Font[/FONT] - Custom Font

[FONT=System]Custom Font[/FONT] - Custom Font

[FONT=Tahoma]Custom Font[/FONT] - Custom Font

[FONT=Times New Roman]Custom Font[/FONT] - Custom Font

[FONT=Trebuchet MS]Custom Font[/FONT] - Custom Font

[FONT=Verdana]Custom Font[/FONT] - Custom Font


Warning: Unfortunately, while the fonts work well on communities based on vBulletin , IP.Board & Simple Machines forums softwares, they are not supported by phpBB boards "yet". Checkout the following post to know if you're using a phpBB powered forum: What Kind of Forum are You Using?

How to Correctly Insert Tags - bbCode Basics

I've mentioned this in other lessons, but better to talk about it in detail.

Often you need to combine several tags in some part of the text to change different aspects of it (color, style & font for example), in this case, it's important to close the first tag opened last, so that it wraps the text to format & also all the tags inserted after it,or else you may get some unpredictable results.

To understand better, let's first talk about some basics:

To get the effect needed on text, tags have to wrap this text, that's why they are inserted in two parts, the first, the "opening tag" in the beginning of the content and the second, the "closing tag", in the end of the content.

The closing tag differ from the opening tag by a "/" symbol (forward slash) added into it, let's see an example:

For the tag used to give strong emphasis to the text, we have:

[B] - Opening Tag

[/B] - Closing Tag

Use to wrap text:

This part is plain, [B]this part is bold[/B] & this is plain.

Result:

This part is plain, this part is bold & this is plain.

Now how to combine tags?

Better to use an example:

Let's say we want our text Bold & Blue (more about colors HERE), we have two options to insert tags:

This way:

This part is plain, [B][color=blue]this part is bold & blue[/color][/B] & this is plain.

Or this way:

This part is plain, [color=blue][B]this part is bold & blue[/B][/color] & this is plain.

In both the result is the same, the following:

This part is plain, this part is bold & blue & this is plain.

Always the first tag opened is the last one closed!

Then the following two examples are wrong:

This part is plain, [B][color=blue]this part is bold & blue[/B][/color] & this is plain.

This part is plain, [color=blue][B]this part is bold & blue[/color][/B] & this is plain.

Those kinds of combinations may give the needed results sometimes (which, I agree, is the most important), but still it's a wrong coding and often will mess up your posts.

Changing Forums Messages Colors - bbCode Basics

We talked about text style Bold, Italic, Underline, let's talk now about colors!

Usually the text in Forums has a default color that depends according to the theme, background color etc, but you're allowed to change the colors of your messages completely or partly using bbCode.

To change color is easy, you just need the tag [color] to wrap your text, but here, there's something else to set in addition to the starting tag [color] & the end tag [/color], I talked generally about this additional element in my intro:

... tags can have various options, for example for different colors, text sizes, etc.

certainly the [color] tag alone won't change the text color, it needs an option to specify the desired color, the option is added into the opening tag after a "=" sign, so that it looks like this:

[color=option]

Now, what to put instead of the word "option" in the sample above?

Each color in HTML has a code, those are used in bbCode as well.

For the basic colors, & even some more complicated, you can simply put color's name as the code,

You have one word names: Black, Grey, White, Blue, Green, Red, Yellow, Orange, Brown, Purple, Sienna, Navy, Indigo ...

& some composed names: DarkGreen, SeaGreen, DarkOliveGreen, DarkSlateBlue, SandyBrown ...

You can always use the editors that most of forums offer to select the color you want with one click after you select the part of your message you want to colorize.

Now what about the millions of other colors?

Each color has its own unique code of six characters that can be used into the [color] tag. For example the code for Blue is 0000ff, in the [color] tag, you type the symbol "#" before it, so that:

[color=#ooooff]This is Blue[/color]

and

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

Will give us the same result:

This is Blue

Want to add more style?A Bold & Blue text for instance? Easy:

[B][color=#ooooff]This is Blue[/color][/B] or [color=#ooooff][B]This is Blue[/B][/color] (Always the first opened tag closed last, checkout: How to Correctly Insert Tags)

Will look:

This is Blue

Checkout THIS for a list of 216 colors called "web safe", each is displayed in two lines, but you should type it in one line & preceded with the symbol "#" as shown in the example above.

For the many other colors, you can find & select the codes in Photoshop or other graphics editors, or you might use Pixie, a great little Freeware, get it from HERE.

Posts Formatting: Bold, Italic, Underline - bbCode Basics

The most basic & most used text formatting on forum are probably Bold & Italic styles, Underline is less used but it's similar to the two others, that's why I included it in this lesson.

All three are pretty simple to use, let's have a look at the, if you read the Intro, I said this:

bbCode is composed of a number of tags, are composed of square brackets [...] & a code inside (instead of dots) that makes any tag different from others.

The codes that interest us are B for Bold, I for Italic & U for Underline, the tags then are:

[B] - Bold

[I] - Italic

[U] - Underline

let's see another part of bbCode intro

The tags have to wrap your content in order format it, that's why a tag is always inserted twice: in the beginning then in the end of the text you need to format, with a little difference, the tag in the end have to include the character "/" (forward slash)

[...]Your Content[/...]

So, if you want to format a word, phrase, paragraph or a whole article, just wrap it with the desired tag:

[B]Bold[/B] will look: Bold

[I]Italic[/I] will look: Italic

[U]Underline[/U] will look: Underline


Nothing simpler, & in some popular kinds of forums, most of time you don't need to type the tags, only to select your text, click on a button & it's wrapped automatically.

Now a last thing, if you want to add more than one style to your text, simply add more tags, but remember always the tag you open first should be closed last (as explained in detail HERE), you would some times get some unpredictable results ... examples:

Wrong: [B][I]Your Text[/B][/I]

Right: [B][I]Your Text[/I][/B]

How Does bbCode Work? - bbCode Basics

If you are familiar with HTML, bbCode will appear much simpler to you, it uses different codes but works basically the same way.

bbCode is composed of a number of tags, are composed of square brackets [...] & a code inside (instead of dots) that makes any tag different from others.

The tags have to wrap your content in order format it, that's why a tag is always inserted twice: in the beginning then in the end of the text you need to format, with a little difference, the tag in the end have to include the character "/" (forward slash)

[...]Your Content[/...]

In addition, tags can have various options, for example for different colors, text sizes, etc.

This was just an intro, will next start with the basic use of some tags, then go for more advance use. :)

A New Blog Has Born!

Hello!

So this is ANOTHER blog of mine started, this time I'll be posting information on forums especially on the code used on most of boards to format text in posts "bbCode", a simplified form of HTML I dare to say, then easier to learn.

Well, I didn't make this blog to teach you bbCode from A to Z, but to solve some problems you may encounter & to make things easy to understand (I hope).

Stay Tuned! :)