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! :)