Sunday, September 16, 2007

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.

2 comments:

Net Tracking Internet Marketing said...

Hey, how would you insert a link with a custom link color?

Anonymous said...

I've seen once smooth color change, like line begins in one color and ends in another. Could you please write how to do this?