Learn BBCode: Basics and Tricks (+ Color List)

Was this helpful?

Yes	55.6%	[ 370 ]
No	2.6%	[ 17 ]
GOLD >:D	41.8%	[ 278 ]
Total Votes:			[ 665 ]

[The Shunned Butterfly]

~ INTRODUCTION~

This is a basic introduction to BBCode, the codes used to change font color, size and style. There are buttons for most of these things, but this is a basic introduction.

There are several things you can change with BBCode. There's color changes, size changes, and format changes.

You don't have to do everything in order. Now you can start with a color change, then a format change, and the a size change and end starting with the format, then size and then color and the outcome won't be any different than if you did everything in order.

Sometimes BBCode can get tricky. If you have too many things going on, you might forget to "close" or "end" something and it doesn't turn out the way you want it to. sad

The trick I like to use is that what you start with you end with. For example, if you were to start with color, followed by size, and then a bold, you would close first with the bold, then the size, and lastly the color. That way, it is a bit easier. smile

Did you know you could use BBCode when posting a profile comment? Well, you can!! It's really fun, especially when you're wishing someone a Happy Birthday~!

If this doesn't make any sense to you, I hope it will soon. smile

Quick Links:
Format Changes
Size Changes
Color Changes
Color List
Alignment Changes
The Creative URL
Image Posting
Listing
Quoting
Coding
Changing Underline Color
Changing Strikethrough Color

[The Shunned Butterfly]

~ Format Changes ~

We'll start with Format changes. There are usually buttons for these when posting in the forums, so you don't have to memorize them. However it is useful to know when you're posting a profile comment or someplace else without the buttons.

This is to BOLD your text:

[b]Text Here[/b]

This is to ITALICIZE your text:

[i]Text Here[/i]

This is to UNDERLINE your text:

[u]Text Here[/u]

And lastly, this is to STRIKE THROUGH your text:

[strike]Text Here[/strike]

When inputing these codes, it doesn't matter if you use capital letters or not, the code is still accepted. What WILL matter is if you ever forget a bracket, or if you forget to "end" your code properly. (It happens to me sometimes that I forget the little "/" and the code doesn't work.) So make sure you have all your parts!!!

[The Shunned Butterfly]

~ Size Changes ~

Next up is size.

This is the default code Gaia uses:

[size=12]Gaia Online[/size]

Size 12 is default, thus you do not need to add a size 12 code when posting. By using and [/ size], without the parentheses, you can input any number between 0 to 24 to use next to the "=" and the font size will be changed.


Can you tell I change the size of my posts?

How about now?
biggrin  ▲size=25

[The Shunned Butterfly]

~ Color Changes ~

Next up, changing your color!!!!

This is the realy fun part, because there are quite a few colors to choose from~!

To change your color, use this code:

[color=red]Text Here[/color]

Here's what this would look like:
Text Here

For most colors, there is the option of darkening the text, such as 'Dark Red'. When using a color that has two words in it, you make the two words into one. You don't want to type in any spaces in your code because that breaks it (meaning it really won't work).

[color=DarkRed]Text Here[/color]

Here's what it should look like, if you didn't use a space:
Text Here

You can go to Tektek's website and use the color gradient tool to use all kinds of colors in your posts without getting carpal tunnel trying to type all of the colors!! ^ ^*

_

[The Shunned Butterfly]

~ Color List ~

Here's a list of the colors available to use on Gaia, courtesy of GraceC. There are basic colors such as black, blue, red, yellow, orange, green, purple, brown, and white.

Some of the colors may be too light, but they're there. They are much easier to see when highlighted. smile The colors are in alphabetical order, but don't forget that Ctrl+F is your best friend, especially when you need to find something fast!!

Alice Blue
Antique White
Aqua
Aquamarine
Azure
Beige
Bisque
Black
Blanched Almond
Blue
Blue Violet
Brown
Burly Wood
Cadet Blue
Chartreuse
Chocolate
Coral
Cornflower Blue
Cornsilk
Crimson
Cyan
Dark Blue
Dark Cyan
Dark Goldenrod
Dark Gray
Dark Green
Dark Khaki
Dark Magenta
Dark Olive Green
Dark Orange
Dark Orchid
Dark Red
Dark Salmon
Dark Sea Green
Dark Slate Blue
Dark Slate Gray
Dark Turquoise
Dark Violet
Deep Pink
Deep Sky Blue
Dim Gray
Dodger Blue
Fire Brick
Floral White
Forest Green
Fuchsia
Gainsboro
Ghost White
Gold
Goldenrod
Green
Green Yellow
Grey
Honey Dew
Hot Pink
Indian Red
Indigo
Ivory
Lavender
Lavender Blush
Lawngreen
Lemon Chiffon
Light Blue
Light Coral
Light Cyan
Light Goldenrod Yellow
Light Green
Light Pink
Light Salmon
Light Sea Green
Light Sky Blue
Light Slate Gray
Light Steel Blue
Light Yellow
Lime
Lime Green
Linen
Magenta
Maroon
Medium Aquamarine
Medium Blue
Medium Orchid
Medium Purple
Medium Sea Green
Medium Slate Blue
Medium Spring Green
Medium Turquoise
Medium Violet Red
Midnight Blue
Mint Cream
Misty Rose
Moccasin
Navajo White
Navy
Old Lace
Olive
Olive Drab
Orange Red
Orchid
Pale Goldenrod
Pale Green
Pale Turquoise
Pale Violet Red
Papaya Whip
Peach Puff
Peru
Pink
Plum
Powder Blue
Purple
Red
Rosy Brown
Royal Blue
Saddle Brown
Salmon
Sandy Brown
Sea Green
Seashell
Sienna
Silver
Sky Blue
Slate Blue
Slate Gray
Snow
Spring Green
Steel
Tan
Teal
Thistle
Tomato
Turquoise
Violet
Wheat
White
White Smoke
Yellow



(Don't forget to omit any spaces in the color name for your code, and also that capital letters don't make a difference.)


Another option for changing your colors is using a HEX Code Generator. With this generator (as well as with many others out there), you can simply pick a color and the site will provide a 6-digit number (or code) that stands for that specific color, which you can use extensively, such as in BBCode. smile


Tektek.org has a Gradient Text Generator that is simple to use. This is really convenient since you don't have to type every single color in. And you don't have to get carpal tunnel trying to.

**Sorry for any mistakes. I nearly went bananas doing the color list by hand. @_@ So... much... code......

[The Shunned Butterfly]

~ Alignment Changes ~

There are other forms to change your posts using BBCode. One of these ways is to align your posts in different ways.

You can Center Align.

[align=center]Text Here[/align]
or
[center]You can Center Align like this, too.[/center]

OR

[center]Text Here[/center]

►►►

You can Right Align.

[align=right]Text Here[/align]

And You can Left Align, which is the default alignment.

[align=left]Text Here[/align]

Using different alignments might help you achieve some cool, creative effects~!


Like this one~!

[The Shunned Butterfly]

~ The Creative URL ~

URLs are something that can easily be affected or changed by BBCode.

A normal, simple URL might look like this:
www.GaiaOnline.com


When you use BBCode with your URL, anything can happen.
What I like to do is use the "substitute" code for the long URL, to show a simple description of the URL/link.

Here is an example: Gaia Online

[url=http://www.gaiaonline.com/]Gaia Online[/url]

You can change the color of your new link, too.
Like this: Gaia Online

[url=http://www.gaiaonline.com/][color=red]Gaia Online[/color][/url]

But you may not like the blue underline under your colored link.
wink The solution is to underline your text: Gaia Online

[url=http://www.gaiaonline.com/][color=red][u]Gaia Online[/u][/color][/url]

You can use any color you like, or you can keep it simple. Either way, the resulting link will never fail.
(...unless you mess up the long link, when inputing "http://..." Then you might have a problem. ^^* )

[The Shunned Butterfly]

~ Image Posting ~

First things first, you need a place to host your images. Photobucket and TinyPic are some good sites, and there's plenty more out there that are free.

BBCode can be used to insert images by using the image code(s). Here's how to do it.

Simple image:

[IMG]*Desired Image Code (http://...) Here*[/IMG]

You can also change the alignment on images.

Right Alinged:

[ImgRight]*Desired Image Code (http://...) Here*[/ImgRight]

And Left Aligned:



(You need to use 'IMGLeft' if you want your text next to your image, like this. With just 'IMG' the text goes underneath the image.)

[ImgLeft]*Desired Image Code (http://...) Here*[/ImgLeft]

To center align an Image, you have to use the same alignment as you did for text, either [align=center] [/align] or [center] [/center]. I use [center][/center] because it's more convenient, but either one works.

[center][img]http://i445.photobucket.com/albums/qq175/cj075/DC/Smiley.jpg[/img][/center]

You can also make an image a link, as I have linked this image with PhotoBucket's homepage.

[IMG=*Desired Image Code (http://...) Here*][URL=*Desired URL Here (http://...)*][/URL][/IMG]

If you align and include text properly, sometimes you can get really cool effects. smile

[The Shunned Butterfly]

~ Listing ~

There are two different types of lists: ordered, which are numbered; and unordered, which are bulleted. Following are examples with codes.

Your unordered list would look like this:

• Item 1
  
• Item 2
  
• Item 3

Using this code:

[list][*] Item 1
[*] Item 2
[*] Item 3[/list]

Your ordered list would look like this, using numbers:

1. Item 1
   
2. Item 2
   
3. Item 3

Using this code:

[list=1][*] Item 1
[*] Item 2
[*] Item 3[/list]

Or like this, using letters:

• Item 1
  
• Item 2
  
• Item 3

Using this code:

[list=a][*]Item 1
[*] Item 2
[*] Item 3[/list]

(Please be aware that your lists may not show up properly when Previewing, but they will show up just fine in the final post when you Submit.)

(Also, letter lists may only work within a Guild or Clan. It does not appear to be working in the Forums. Sorry.)

Here's what a lettered list should look like, but this is a manual list, not using the code.

a. Item 1
b. Item 2
c. Item 3




UPDATE 02-22-10:
You can get an unordered list (

List) with the following code:

[*] Item 1
[*] Item 2
[*] Item 3

You do not need [ list ] or [/list ] for an unordered list. "[ * ]" automatically turns into a bullet. The direct code for the list indents your list, much like a functioning tab.

[The Shunned Butterfly]

~ Quoting ~

Another thing you can do with BBCode is Quote someone. There are two different ways to use the quote.

Cecilia Sakura-Hime

You can quote someone (or yourself) directly using their name, like so.

[quote="UserName Here"] Text Here [/quote]

(Don't forget the quotation marks around the username. It won't work otherwise.)

Quote:

Or you can simply leave it as a quote, like this. This may be preferred when the original author's name is unknown, rather than having "Unknown Wrote:" as a Quote's header.

[quote] Text Here [/quote]

[Username]

For usernames with brackets in their name, use this following code.

[quote="[Username]"]Use this code for usernames with brackets.[/quote]

Quotes can also be used with a Title instead of a UserName in the code, to serve a different purpose.
You can add any code you desire to your quote, so long as it is inside the quoting code. smile

Changing Colors inside the Quote

It only affects what's inside the quote if it is typed inside the quote code. smile

[The Shunned Butterfly]

~ Coding ~

Here's how to show off your super-cool codes to your friends so that it doesn't affect what you're writing. smile

[code]*Code goes here*

(It's what I've been doing this whole time~!) ^ ^

[The Shunned Butterfly]

~ Changing Underline Color ~

I discovered this by accident, and then I looked for more information on it and found it. Yay!

This is the code:

[color=Magenta][u][color=#FF0000] Text Here [/color][/u][/color]

The first Color Code is for the Underline Color, and the second is for the Text Color.
The second code has to be in HexCode or else it won't work. sad ← It does NOT have to be in HexCode since regular color codes work just as well, as it was recently brought to my attention. (Thanks, Roslind!)


This is quite useful for the URLs.


Haha~! Did you catch that link? Probably not, unless you were reading along with your mouse. That's what happens when your underline color is set to White. Fun, isn't it? You can do it with any colors you'd like. Make 'em look goofy, neat, or make 'em fun with white! It's all up to you. wink

[The Shunned Butterfly]

~ Changing Strikethrough Color ~

It works like this. See? Super fun!!!

[color=COLOR][strike][color=SecondCOLOR] Text Here [/color][/strike][/color]

I had to experiment with this a bit. I used the same code as the "Underline Color Change" but with the strikethrough. I can hardly believe it worked~! By the way, none of these colors have to be in HexCode, unless you want a very specific color, of course. smile

[The Shunned Butterfly]

~ Questions ~

I will gladly answer any questions you might have. I'll do my best to post any other codes, as well, so as to keep this post up to date.

I have realized that some codes don't work in some places. For example, the code for changing the underline color doesn't work in the Guilds. Lettered lists don't appear to work in the Forums. They just come up as bulleted (unordered) lists.

Thanks for reading~! wink

[The Shunned Butterfly]

~ HexCode ~

I must apologize. I referred to HexCode without much consideration to those of you who may be new, or don't exactly know what it is. I'm very sorry.

Well, Hexcode is a code for color. It starts with a number sign (#) and is followed by six alphanumeric characters (a-z and 0-9). 'Starting' with #000000 as Black and 'ending' with #FFFFFF as White. This code is used with the color code ( and ) in place of the color name. This code can be used to get either a color that is not in the Gaia "defaults" or to get a very specific color.

There are quite of HexCode generators out there. You can Google them and get a large list of results. I won't give any URLs here (sorry) because everyone's taste in programs is different and the sites you find may not be as helpful or easy for you to understand as others may be. Just look around and you'll eventually find one you come to like. (I didn't find one, so I just TekTek's Gradient Text Generator and copy and paste the colors from the boxes.)