Welcome to Gaia! ::

Was this helpful?

Yes 0.54347826086957 54.3% [ 250 ]
No 0.026086956521739 2.6% [ 12 ]
GOLD >:D 0.4304347826087 43.0% [ 198 ]
Total Votes:[ 460 ]
1 2 3 4 5 >
User ImageUser Image




~ 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
User ImageUser Image




~ 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!!!
User ImageUser Image




~ 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
User ImageUser Image




~ 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!! ^ ^*

_
User ImageUser Image




~ 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......
User ImageUser Image




~ 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~!
User ImageUser Image




~ 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. ^^* )
User ImageUser Image




~ 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:
User Image

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


You can also change the alignment on images.

Right Alinged:

User Image






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



And Left Aligned:

User Image

(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.

User Image



[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.

User Image


[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
User ImageUser Image




~ 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.
  • User ImageUser Image




    ~ 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
    User ImageUser Image




    ~ 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~!) ^ ^
    User ImageUser Image



    ~ 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
    User ImageUser Image




    ~ 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
    User ImageUser Image




    ~ 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
    User ImageUser Image



    ~ 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.)

    Quick Reply

    Submit
    Manage Your Items
    Other Stuff
    Get Items
    Get Gaia Cash
    Where Everyone Hangs Out
    Other Community Areas
    Virtual Spaces
    Fun Stuff
    Gaia's Games