Welcome to Gaia! ::

Did the "visual aid" help you?

Yes. 0.86273647162341 86.3% [ 1961 ]
No. 0.13726352837659 13.7% [ 312 ]
Total Votes:[ 2273 ]
1 2 3 4 5 6 ... 70 71 72 > >>
UPDATE || View Misc. Codes post to figure out how to make
your own hover image buttons! *points to links below*

User Image
User Image
User Image
User Image
User Image
User Image
User Image
User Image
User Image
User Image
User Image
User Image
User Image
User Image
User Image
User Image

User Image - Blocked by "Display Image" Settings. Click to show.
User Image
#STEPONE{ s e t t i n g s ;}

There are two versions of editting Gaia CSS: Classic and Current. (*Note: Classic
used to be called 'Old School') This guide will only discuss Classic profiles not
V2 which is the much newer system.

My Gaia > Account Settings > Preferences

    User Image

    * Image is clickable. Directs you to your preferences

    Also, in this area you can choose to make your profile viewable to the public
    or whom can comment your profile. : )

#STEPONE{ r e m e m b e r;}

From here on out you will put your codes in the theme section
be your best friend for the next few hours.

My Gaia > Account settings >
Profile Theme


    User Image

    User Image

    * Image is clickable. Directs you to your theme settings

Your content and body text or images must be inserted into the about me section ::

My Gaia > Account settings >
About Me

    User Image

    *Image is clickable. Directs you to your about me settings.

    WHY IS THIS SO IMPORTANT? So you ask me why I bother even
    mentioning this, because I've seen it so many times when people just put
    their text in the theme. IT WONT WORK! ONLY CSS CODES, K? The about
    me section is for the text about yourself and whatever crud you want.
    Images of yourself, icons, nekkid Ichigo, or just anything that turns you on.

#STEPONE{ f a m i l i a r i z e ;}

    It's imperative that you know which
    sections you are dealing with. If you wanted to change the background for your
    about me section, you would need to know the class tag for that section.
    So, in that case, it would be #about. It would be the same for if you trying to
    change the size of your multimedia. You would need to know the main tag
    would be the #multimedia tag. If you are trying to change specific parts
    within the section, it would be something like #about .???

User Image
#STEPTWO{ b e h i n d t h e s c e n e s;}


I M P O R T A N T!

As mentioned in the post above, if you read it. You have to know which
section you are handling. I don't know how to stress that much to you.
You MUST know the main class you are dealing with to get you started.
If you want to a specific thing altered, you'll have to refer to the sub-classes.
Usually, when gaia names it it's really simple.

Let's say your avatar in the profile. It would be in the main class of #profile
with the avatar you want changed; hence, the introduction class tag would
be #profile .avatar.

NOTE There are usually in most cases periods in front
of the sub-class you want altered. Rarely, the pound sign (#) exemplified
with altering the status bar. (#profile #bar)

It's pretty simple, baby.
I'm here to show introduce to you all the sub-classes and main classes you'll
be attacking with much passion.

There may be some lacking especially with the details & profiles,
because I omit them in my profiles...all... the.. time.

So, after we figure this which section you need to alter. We'll move on
to the attributes to alter your baby. You can use it for all sections, yes? <3

HEADSUP :: I used the 'block' theme, so it's easier for you
to see the sections I'm talking about. x) Please stay with the custom

User Image
[contains your avatar, items you are wearing and status bar]
I will not go into detail about how to customize your buttons because I don't use them,
and I think it's easier to create your own using your about section. ;_;

kokoko#profile {insertattributeshere;}
kokokoThis is the OVERALL code for your section. It allows
kokokoyou to have control with the border and background color
kokokoof the box. I will introduce the properties that demonstrate
kokokohow to stick backgrounds in the back.

User Image User Image

#profile {xxx;}
#profile h2 {xxx;}
#profile #bar {xxx;}
#profile .items {xxx;}
#profile .avatar {xxx;}
#profile .message {xxx;}

User Image
[contains the content you write in your about me section, three links (viewpostsetc) and
the opportunity of creating many sections (advanced).]
Until you have fully understand the fundamentals of gaia
CSS, I personally don't recommend learning how to create new sections, YET. YES!
It's possible... you'll get there! ; 3

OHNYA; REMEBER you post your content in the about me area
NOT in the theme. Theme only holds CSS codes where we discussed the
classes and sub classes on this second post.

kokoko##about {insertattributeshere;}
kokokoGenerally, the "meat" of the whole profile. Consists of the view posts,
kokokoview guilds and view store links. Allows you to type cool mumbo.
kokokoIf advanced, very capable of creating multiple sections that
kokokoexpands creativity.

User Image User Image

#about {xxx;}
#about h2 {xxx;}
#about .links {xxx;}


User Image

User Image User Image

#details {xxx;}
#details h2 {xxx;}
#details #info {xxx;}
#details #stats {xxx;}
#details h3 {xxx;}
#details hr {xxx;}
#details dl {xxx;}
#details dd {xxx;}


User Image

User Image User Image

#friends {xxx;}
#friends h2 {xxx;}
#friends #find_friends_banner {xxx;}
#friends #friendGroup li {xxx;}
#friends #friendGroup img {xxx;}


User Image
This contains your journal. Out of all the sections we mentioned so far, this,
the friends and signature section are the least used. : O

#journal {xxx;}
The journal is one of the useless sections in the profile. xO;; Uhm.

User Image User Image

#journal {xxx;}
#journal h2 {xxx;}
#journal .links {xxx;}
#journal .journal-date {xxx;}


User Image
The wishlist can be selected if you got to the marketplace and find the item you like and
click on a link that looks like this:

User Image

...and then change the status of each item in your account > wishlist section.

User Image

#wishlist {xxx;}
The main section of the overall section. This controls the background, borders
and etc. of the entire box.

User Image User Image

NOTE: The img will not be introduced even if it is a sub class for all images.
Will be explained in full detail later on in the guide when combining codes, but for
the purposes of introducing it to you. I included it.

#h2 h2 {xxx;}
#wishlist .items img {xxx;}


User Image

Many people create their own playlist or get some random video from
Youtube. This section controls it all. For kicks and giggles, since people
generally use youtube, I will help you add a colored player.

(NOTE: I will direct you to guides that discuss how to create your own player.)

This is how you fix up your multimedia then we'll worry about positioning
this section later. If you are in a rush, ctrl+f and type in positioning.

User Image User Image

#multimedia {xxx;}
#multimedia h2 {xxx;}
#multimedia embed, #multimedia object {xxx;}

Click here to change your multimedia because the link to that section has gone missing.
Click here to alter the color of your Youtube player


User Image
User Image

#comments {xxx;}
Controls the overall section.


#comments h2 {xxx;}
Header for the comments section

#comments .alert_container a {xxx;}
Contains your add comments and view comments. The "a" here stands for the link.
If we just left it as "#comments .alert_container" it wouldn't work because you
have to specify the link.

#comments #alerts_banner {xxx;}
Viewable to you only. If it is bothering you, just add the "display:none;" attribute
(taught later) in between the squiggly doodles.

#comments p{xxx;}
Viewing ### of ### Comments. The "p" here is a subclass for the text. This allows
you to alter the color/size of the text.

CAPTION 1 (within the blue highlights)

#comments .caption{xxx;}
Covers the overall section for the first caption bubble

#comments .caption .date{xxx;}
The date for the first caption bubble

#comments .caption a{xxx;}
Your (first caption bubble) commentor's link name

#comments .caption .message{xxx;}
The message for your first caption

#comments .avatar .message{xxx;}
First caption writer's avatar

CAPTION 2 (within the orange/red highlights)

#comments .caption2{xxx;}
Covers the overall section for the second caption bubble

#comments .caption2 .date{xxx;}
The date for the second caption bubble

#comments .caption2 a{xxx;}
Your (second caption bubble) commentor's link name

#comments .caption2 .message{xxx;}
The message for your second caption

#comments .avatar .message{xxx;}
Second caption writer's avatar

User Image

"Another common browser compatibility is rounded corners on captions
and comments in Old School. The developers designed the captions
using "pseudoclasses" that IE doesn't support. So if you design your profile
in IE, you won't see these little rounded corner images, but anyone using
any other browser will.
" - taken from the FAQs & Resources (Saeline)

So, to remove the "round" corners just chug and plug this:
.caption:before, .caption:after, .caption2:before, .caption2:after {display:none;}

To get rid of the pointing thing sticking out, just omit the background for
your message because that's where it is.

#comments .message {background-image:none;}

To change the color of the border you simply need to know which overall caption
you want (either 1 or 2) then change it with the border attribute. : ) Something like this:
#comments .caption {border:#px solid colorhere;}


User Image
#gaia_header {xxx;} (The black bar running across the page)

    There is a different post dedicated to this section.
    Please scroll down.


User Image

#extendedProfileBody #header h1 {xxx;}

User Image
    This section is mainly used to change the header image. By doing so, all you have
    to do is combine attributes to allow you to change it. This section also holds the 'nasty
    gray line' to omit that all you have to do is disable your borders... which... will... also
    be taught later.

    For now, just remember this is the main class you need to know to alter the header. : )

    You must specify the width and height of an image. Also, you must disable
    the borders as well. It would look something like this:

    #extendedProfileBody #header1 {background-image:url('URLIMAGEHERE');width:###px;height:###px;border:0px;}

    The attributes within the brackets will be described later.


User Image

User Image

content {xxx;}

    Includes everything below your #extendedProfileBody #header h1
    (the house looking thing). This includes your about, profile, signature
    and just everything under it.

    Users generally have a background image and set the content to a certain height.
    The gray line appears in this section and also the #extendedProfileBody #header h1.
    To remove it, refer to the border attributes. Just know it's a part of this class.


User Image

User Image

#site {xxx;}

    This includes everything on the site including the #extendedProfileBody
    #header h1 and the #content. If you omit this section, everything will be gone
    except for the gaia header. (<--- do not do this)

    Users generally use this main class to position the WHOLE site to
    the center or right which can be easily done with positioning.(margins)


User Image

User Image

body {xxx;}

    By default, it is the baby blue background on all standard profiles.
    This allows you to change the overall scrollbar of the page or add a background
    to the overall page. This means you can change the crappy blue to
    something that matches your layout.


User Image
#STEPTHREE{ s u b c l a s s e s ;}

h2 – header of the section

img – controls the images within a main class (think of images of your wishlist items with that section)

p – controls any paragraph text

li (list) – just know it’s a list! xD

ul (unordered list) – mainly used in custom sections

ol (ordered list) – another custom section class

a – links in general

a:link – the link how it looks like without hovering

a:hover – the link how it looks like when cursor hovers

a:visited – how link appears when clicked

a:active – has not been clicked

:hover – when you combine this with another subclass
the attributes will change when you hover over it. This is how the mouse over
sections work. If you refer to the experimental theme at the bottom, you will notice
I used this :hover option on the #friends and #wishlist images. : )

Check it out.

User Image
#STEPFOUR{ a t t r i b u t e s ;}

User Image

    Allows you to change the color of the background for everything.
    Please scroll down a bit to find 'colors'

    What is an url you ask? It's pretty a link that was hosted somewhere.
    A common place to save photos are at photobucket
    Want to use that image? Upload it there. I'm not saying; it's the only
    place you can upload; it's just a lot easier and more organized.

User Image
You should copy the direct link and past it there in between the

Then you're done!

    (this gives you power with the image you used with the previous code)

    User Image
    (^background remains blue because I didn't change it to white. :3)


    • repeat (makes the image repeat itself)
    • no-repeat (does not repeat at all)
    • repeat-x (image is repeated horizontally [right and left] )
    • repeat-y (image is repeated vertically [up and down] )


      User Image
    • scroll (when you scroll the image will move as you scroll up and down)

      User Image
    • fixed (when you scroll the image will stay in place)

User Image


Background positions may vary depending on how you want your page to
be designed. The thumbnail will only display images on the top, center, left.
The rest... I'm pretty sure you can figure out. : 3

    • top

      • top left
      • top right

    • center

      • center left
      • center right

    • bottom

      • bottom left
      • bottom right


User Image

User Image

    (Basic border tag that automatically makes the border thicker
    when #px is increased)
    [first example with black solid border: #whateversection {border:1px;}]

    border:#px solid colorhere;
    (A little bit advanced. Thickness is increased with higher number.
    Allows you to have free reign over what color it should have)
    [second example with teal border: #whateversection {border-right:2px solid #429DA8;}]

    border-right:#px solid colorhere;
    (Only changes the color/thickness of the border on the right)
    [third example with right hotpink double border: #whateversection {border:3px double hotpink;}]

    border-left:#px solid colorhere;
    (Only changes the color/thickness of the border on the left)
    [fourth example with a really thick gray border on the left: #whateversection {border-left:3px solid gray;}]

    border-top:#px solid colorhere;
    (Only changes the color/thickness of the border on the top)
    [fifth example with thing solid border on top: #whateversection {border-top:1px solid black;]

    border-bottom: #px solid colorhere;
    (Only changes the color/thickness of the border on the bottom)
    [sixth example with thing solid border on bottom: #whateversection {border-bottom:1px solid #000000;]

All you have to remember if you want a specific border is: right, left, bottom and top. : )
( like border-bottom, border-left and etc)


User Image
Very important. Allows you to change the size of any section.
This is very important when you are going to use scrollbar, but
I'll up on that later.

As you noticed before, the higher the pixels the longer it'll get.
The smaller the pixels the shorter it is.

User Image

    distance horizontal


    distance vertical

      Why is it important? Sometimes, you want the size of your section
      to be the same exact width/height of an image, especially when dealing
      headers, buttons and such.

      How do you do it?
      Easy. Look back at the 'OH ME STITCHES' pic.

      right click > view properties > look at the dimensions
      User Image

      Thus, it will appear like this:
      #whateversection {width:200px;height:133px;}


User Image
User Image


    Basically this attribute is to remove/delete/omit ANYTHING
    from your profile whether they are links and sections you hate.
    This is how you do it.


User Image

font-family: xxx;
User Image
    ...just any font that is installed on your computer.
    this is a kind reminder to be wary of which font you used
    because some fonts are not installed in all computers. So,
    downloaded fonts on YOUR computer are a 'no go.'

font-size:#pt or #px;
    [example: #whateversection {font-size:8px;} or #whateversection {font-size:11pt;}
    Higher the number, the bigger the font.
    Lower, the smaller.
    Easy, eh. xO

    The commonly used one is __px. Pt is a bit strange to
    handle sometimes; nevertheless, it's still used.

User Image

Mainly used to make text revert back to it's original look. For instance,
comment's date is automatically italicized, but with this you can make
it 'normal.'

This is the only attribute offered (from what I know) D:

    Changes the color of the font.

    You can type in words or choose hex colors that look
    something like this: #000000. It's usually a combination
    of letters and numbers that give you the exact color you
    want if you are trying to be specific.

    I mainly use Photoshop to do my graphics. It gives me
    the hex colors without any hassle.

      User Image

      If you don't have Photoshop, go to tektek
      and sample there. It'll give you the exact color you want. smile

      IF YOU DONT WANT TO DO THAT, just type in random
      colors like dodgerblue, hotpink, pink, brown and etc.

      A color palette I created so you can experiment with hexcodes.

      User Image

      When asked to change attributes for ANYTHING dealing
      with color, you are to type either the hexcode or the name of the color

      [ example: #whateversection {background-color:black;} OR #whateversection
      {background-color:#000000;} Note: Black and #000000 are the same thing. ]

User Image


    You can type whatever you want in the About Me section, and this
    spiffy code can make you look angry in two seconds. The first picture is
    the original it has both Upper and Lower case letters. As you transition,
    to the right, you'll notice how angry you look WITHOUT using your caps
    button. ;O It just shows that CSS can make your life a lot easier.

  • uppercase (makes everything all caps)
  • lowercase (makes everything lowercased)

User Image
(An alternative to BBCode)

text-align: xxx;

  • center (center, of course)
  • justify (spaces it out so it extends to two ends)
  • left (to the left... to the left) [Not Pictured: Left is by default]
  • right (to the right... to the right)

font-weight: xxx;

  • normal
  • lighter

User Image

    Automatically allows you to space the text. The higher the number
    the bigger the gap is. The lower the number the text will begin to 'squish'
    each other.

    Could be negative or positive. Spaces the first sentence like an indentation.
    Attribute is also used to get rid of text in the headers simply by placing
    an exageratted negative number #about h2 {text-indent:-9999px;}


User Image

Links are subclasses. Refer to the next post about it.

text-decoration: xxx;
  • line-through (a line strike though the link)
  • underline overline (a line at the top and bottom of link)
  • none (no underline)


User Image





User Image
#STEPFIVE{ c o m b i n i n g ;}

User Image
* Video uploaded on 10/26/08

You know how which section you need to change.
You know which attributes you WANT to use.
Now, you just have to combine them.


    If you noticed the tag h2, is universal for the header of
    anything that possesses one.

    #about h2 {xxx;} --- #multimedia h2 {xxx;}

    I have a question for you. Is it any different to change the
    background of #about section or the #multimedia section?

    No and Yes. You use the same attributes; however, only the
    main classes changes.


    #multimedia {background-color:white;}
    #about {background-color:black;}

    Simple, rah?

    Now, let’s say you wanted to change the color of the text in your
    about me section; take the existing code and type a semicolon after it (;).

    This is important. If you don’t insert a semi-colon, it will immediately
    throw off your code. So make sure, you have the symbols typed in
    correctly, and it’s all in between the two squiggly doodles { } NOT brackets [ ].

    #about {background-color:black; color:white;}

    So, pretty much, once you get a handle on this you can combine your
    knowledge and attributes to get to what you want to appear.

    #about {
    color: hotpink;
    border: 1px solid black;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;


    These can be changed if there is a specific item you want changed
    in a section (main class). This could be changing the links in the about
    section or changing the border of all images within the wishlist section.
    For instance, you can NOT change links by inserting a:link within {;}.
    You have to indicate the main class THEN establish your sub class after
    it. ONLY the attributes above can stay within the {} NOT THE SUBCLASS.

    Here’s a case scenario. Let’s say you want your #gaia_header links to be
    a different color. Let’s just assume you already made all the other links
    on your profile the same. To make them different how would you go about doing it?

    We know the main class we plan to use. (#gaia_header) and the item
    we want altered (the links). The sub class for the “link” is “a:link.” So,
    now it’s just a matter of combining them.

    #gaia_header a:link {color:###;text-decoration: xxx;text-transform: xxx;}

    Do not confuse the subclass as an attribute it SHOULD’NT look like this:
    #gaia_header {a:link: color: pink;} <-- this is beyond wrong. The sub class
    should not stay within the attributes.

    And that’s pretty much it! If you plan on changing the hover for the #gaia_header
    links. You would just have to change the sub class,again.

    #gaia_header a:hover {color:###; text-decoration: xxx;text-transform: xxx;}

    Note: To change the OVERALL links of the page you do not need the
    body main class body {;} . It is just assumed if you leave a:link, a:hover
    and etc. by itself the browser will understand.

    So changing overall body links would just remain like this: a:link {color: colorhere;}
    No need for the main class.


    If you are tired of writing the same codes for EACH of your sections, you can just
    Easily combine the main sections together. All you need to have is a
    comma to separate the main classes.

    #about, #profile, #multimedia {display:none;}

    Easy, eh?

    You can still edit a specific part of one of the sections. : ) : )

User Image
#STEPSIX{ g a i a h e a d e r ;}

: You are responsible for adhering to Gaia’s rules
regarding the gaia_header. Do NOT remove the links or omit the Gaia Logo
completely. If you do, however, you will get your profile disabled…. which is sad.


Consists of the components within the black horiztonal line crossing the page.

To change the black bar color of the gaia_header all you have to do is combine
background attribute tag and chug it with this header class~

#gaia_header * {background-color:hotpink !important ;}
The black background will be turned to hotpink.

(* and !important) These codes will be discussed in detail in the debugging
and hacking section. For now, just bear with me.

#header_left li, #header_right li
Refers to the ' | ' between the links. By using this you are capable of changing the color
of the lines within this class

#header_right img
A combination of the header_right main class and subclass of img. Strangely, there
is a weird line on the right side. Some people think this "line" is due to the ' | ' between
the links, but it is not. Gaia, for some lame reason, put an imageless strip down there.
To omit it, simply use the remove attribute.


User Image
Consists of the gaia logo image and links on the left side

User Image
Consists of the Recommend and Sign out link. (^ recommend link
can not be viewed when you log on. Only viewable to visitors.)

Assuming you read the previous posts (instead of going straight to this),
you can easily change the links for each class. If you want to change
the links for the header, they would look like this:

#gaia_header a:link {color: xxxx; text-decoration: xxxx;}
The link will appear as it is.

#gaia_header a:hover {color: xxxx; text-decoration: xxxx;}
This change will appear if you hover the link.

#gaia_header a:visited {color: xxxx; text-decoration: xxxx;}
When the link has been clicked on


Unacceptable alteration of the navigation bar: The navigation bar
is in place at the top of the profile so that users who visit your profile know
they are still on Gaia, and can navigate away from your page easily without
having to try to figure out how. You may change the background color, and
the color of the links for the navigation bar. However, you may not alter the
Gaia logo, reposition the navigation bar, or remove the navigation bar all
together. Altering the Gaia logo includes removing it all together, as well
as making it semi-transparent to the point that it is hard to see or nearly
invisible. You may alter the Gaia logo image to remove the black
background, or change the black background to a different color, but
the logo itself must remain as is.

Change logo? : ) Profile Discussion Forum Rules and Guidelines

Multiple people have asked HOW to change the background of the gaia logo.
I'm sorry, guys, but only people with an imaging program are able to edit. D: I made life easier
by creating a .PSD (photoshop file) so all you have to do is change the colors in the back and wala~

  • Download file here and open file in Photoshop.

    File uploaded to personal account @fileden.com on 10/22

    User Image
  • You should see three layers: Background, Gaia Logo, and the color overlay
    Double click on the color overlay (where I highlighted around the green area). On your
    document, you should see an apricot color. Now, a color palette should pop up.
    Click, Okay.

    User Image
  • Make sure you are on the background layer this time by clicking on it. Now click
    on the paint bucket and go back to the yellow green background and click. It should now be
    a color of your chosing.

    Wasn't that easy?
    User Image --& User Image

    Now, it's just a matter of uploading your image and pasting it into this coding.
    I am not a fan of giving you guys codes, but this is the only way. : )

    #header_left img {padding: 0px 47px 23px 0px;background:url('URLHERE') top left no-repeat;height: 0px;width: 0px;}

img - subclass for the images
padding - attributes fitted to the size of the image. (right click > properties > dimensions)
background - combines all attributes for background: image, position and repeat
dimensions (width & height)
User Image
#STEPSEVEN{ d e b u g g i n g & h a c k s ;}


    Sometimes, there is just some point when you really want
    to pluck your nose hair in frustration. I’m kidding…

    At this point, you are scratching your head trying to figure out
    why your layout looks so messed up in a different browser; yet,
    so good with the on you usually view it in.

    Well… that’s because some browsers interpret the codes differently.

Why is Cross Compatibility important?
    All your visitors will appreciate the hard work you put into your profile.
    You can’t always assume that everyone has the same browser as you,
    so it’s best to make it so everyone can see it. And if you are
    planning on getting spotlighted *nudge nudge* …. You must!


  • Arm yourself with Firefox. (You can easily download it at its official website for free)
  • Why? Firefox tends to not screw up the codes.
    Most of the problems appear with IE because the browser reads the codes all funky.
    For my personal prefences, it’s just much easier to do my codes in Firefox, and debug
    all the differences in IE with hacks. The hacks are different for browser versions.
    Thus, IE 6.0 and IE 7.0 hacks are different. It isn’t that bad.

Something could be a ___ pixels off, and this is a fix for it.

User Image
IE 6.0

    The _ will be your friend when trying to make
    corrections in this browser. It's really simple. All you have to do is insert the
    underscore (_) in front of the attribute you want fixed with the new setting to
    make it work.

    Case scenario: You've discovered your #about ol ol section is off by 20px from
    where you want it to be. What do you do? USE THE _

    Old Coding:
    #about ol ol {position:absolute;top:640px;}

    New Coding:
    #about ol ol {position:absolute;top:640px;_top:660px;}
    Simple? I thought so. Just remember to put the _ before the attribute fixed with
    a new number to make it "right" for the IE 6.0 browser. : )

User Image
IE 7.0
    The *:first-child+html will be your friend when trying to make
    corrections in this browser. This one is a bit more different than the other one.
    You don't place it with an attribute it just goes in front of the same section.

    Old Coding:
    #about ol ol {position:absolute;top:640px;}

    New Coding:
    #about ol ol {position:absolute;top:640px;}
    *:first-child+html #about ol ol {position:absolute;top:620px;}

    All you have to do is keep the code in front of the section you want and
    make new changes. Keep the bottom one separate for IE7. The first one
    is for Firefox and things in general.

User ImageUser Image
To combine both IE6 and IE7, it would look like this.

    #about ol ol {position:absolute;top:640px;_top:660px;}
    *:first-child+html #about ol ol {position:absolute;top:620px;}

    _ = IE6
    *:first-child+html = IE7 Remember the second line is only for IE7. : )

*note: there are different ways to go about with these hacks, but these are what I use.. X)



    The asterisk/star is a universal selector that can be applied to a specific
    part or all of the page.

    Click here for more information

    *I'm not too entirely sure, but I only use it for the gaia_header which
    allows me to make changes to the gaia_header. That's the only case
    I've used it so far. D :


    In Cascading Style Sheets, Gaia reads the codes in order. So, by having
    this property attacked to an attribute, it will deem it as in "important" and
    override the already existing attribute written by Gaia's development team.

    Think of the gaia_header, Gaia's CSS has already made the background
    of the bar "black." To override this, !important; gives users the power to do.

    This will ensure that whatever thing you add with !important will always be

User Image
#STEPEIGHT{ f i l t e r s ;}

These filters are only viewable in their respective browsers. Firefox
is very limited when it comes to filters In general, IE tends to have more
including the colored scrollbar, scrollbar directions and so on. I know
I don't have have an extensive library of filters for IE. You can just easily
view them on the web if you are curious.

So, if you want both browsers to be transculent looking you'll have to
place both opacity tags for Firefox and IE.


User Image
opacity: #.##;
    * Numbers placed must be between a value of .00 - 1.00.

    The opacity filters allows you to have a "transculent" or "transparent" look (whichever of the two).
    Remember by using this, it is only viewable in Firefox, and not in IE.

    In the example, I used #site {opacity:.50;} in the image shown above.


User Image
filter: alpha(opacity=##);
    * Numbers placed must be between a value of 0 to 100.

    The opacity filters allows you to have a "translucent" or "transparent" look (whichever of the two).
    Remember by using this, it is only viewable in IE, and not in Firefox.

    In the example, I used #site {filter: alpha(opacity=20);} in the image shown above.


User Image
    * the only attribute available

    Changes the scrollbar from the right to the left (rtl). However, it not only flips the
    scrollbar to the other side, but the content as well.

    In the example, I used body {direction:rtl;} in the image shown above.

For more IE filters, please visit this website.

User Image

html {
scrollbar-arrow-color: red;
scrollbar-face-color: yellow;
scrollbar-track-color: blue;
scrollbar-3dlight-color: orange;
scrollbar-darkshadow-color: purple;
scrollbar-highlight-color: green;
scrollbar-shadow-color: black;}

html indicates the class for all items within the page. For some reason, I
encountered that if you use the body main class instead. It will not work; however,
if you use html it will change the scrollbar for the overall page.

You can also change the scrollbar of an individual section if you just
place these attributes inside the main class.

User Image
#STEPNINE{ y o u t u b e c o l o r s ;}

User Image
Copy the url of the page.

Omit the following things that are red and add a slash (/) afterwards.

It should look like this.


Now, you finally have the url created. There are only
a few colors for the youtube player. I found a forum that
discussed changing the youtube color player. (Visit the
Sign Out links!)

Anyway, here are the colors they offer. I have no idea
how to choose a specific color. You should have your link and
add an amp sign ( & ). The amp sign acts like a semi colon ( ; )
to add attributes together when you input in the account > multimedia


...wait you're not done yet. See the colors below? *points down*
I already done the hard part (not really xO) of copying the colors. Choose
which color you like and copy the color section of code you want. I used
pink because I like it.


User Image

RED PLAYER ★ color1=0x5d1719&color2=0xcd311b

PINK PLAYER ★ color1=0xcc2550&color2=0xe87a9f

PURPLE PLAYER ★ color1=0x402061&color2=0x9461ca

BLUE PLAYER ★ color1=0x2b405b&color2=0x6b8ab6

SKYBLUE PLAYER ★ color1=0x006699&color2=0x54abd6

GREEN PLAYER ★ color1=0x234900&color2=0x4e9e00

GOLDENROD PLAYER ★ color1=0xe1600f&color2=0xfebd01

GRAY PLAYER ★ color1=0x3a3a3a&color2=0x999999

WHITE PLAYER ★ color1=0xd6d6d6&color2=0xf0f0f0

YOUTUBE || Input

User Image

Paste your final link in your Multimedia section. (Account > Multimedia)

If you want to autoplay your multimedia add this &autoplay=1
It would look like this then: http://jp.youtube.com/v/fuuulqTx6j8&color1=0xcc2550&color2=0xe87a9f&autoplay=1


User Image
#STEPTEN{ b b c o d e s & c u s t o m s e c t i o n s ;}

You probably wondering how you are going to create
your OWN link or image. It’s very simple.

If you go back to the second post (Setting up), you’ll notice
for the most part we were discussing where to put your codes (Gaia CSS).
Now, you have to transition to the about section where you will place
your content through BBCODE. Unlike, what I have discussed throughout
this whole guide all our items will be within brackets [ ] not these {}.

I’m pretty sure by now you are somewhat familiar with BBCODE
(assuming you post a lot in gaia and what not). This is pretty much the
gist of it.

To create a link:

To get a link, you just have to right click > properties > highlight the url
Shown > right click on that > copy > paste inside both of the tags.

To post an image:

Note: People usually host their images at imageshack.us or photobucket.com
View the previous post how to upload and get the url link.

To align anything:



(align=left by default)

You can insert your image within the ‘contenthere’ area. As long as it’s within
Those beginning and ending tags the browser will perform the action.


Now you have meddled with BBCODES and CSS, now it’s time to conquer
the long and awaited custom sections. How is this possible? You have to insert
codes in your about me and in your theme box.

You can create MULTIPLE custom sections. They’re quite easy when you get
the hang of it, but first, we will start with the basics.

As we mentioned above in the subclasses, there are the ol and ul. Guess what?
They signify the items within what YOU can put in the about me section.


-> unordered list (no number, no order)

-> ordered list (remember it has the one, thus in order.)

Does it sound familiar? Yes, the ol or ul subclass allows you to alter the items
written in your about me through your theme box.

We know that the only place we can control the ol and ul lists is in the about me section.

We are going to create one custom section.
Start with one list and paste it in your about box like this.


Now switch to the theme box and generate your CSS code. We know
It’s in the about section AND it’s an unordered list. (Remember: no number, unordered)
So it’s like this:

#about ul {attributeshere;}

You’re done! The only thing you need to do is position, add backgrounds, or
what not.This concept can be applied to the ordered list tag. It would be appear
like this.

In about me section:

(in about me)

#about ol {attributeshere;}

(in theme box)

How do you create multiple sections more than these two? Think of a section
WITHIN a section.

You first must understand the dynamics of a box within the box. The first ol or
ul reigns supreme, so whatever you do in the first ol/ul it will affect the other sections
following after that. For you scrollbar lovers this means that you can’t make your
first section a scroll bar. If you do, the other sections “can’t get out of it.”

Think of this way. Ol and ul are extensions of the #about (main class) they are
only the subclasses. If you make the about class a scrollbar, ALL YOUR
OL/UL SECTIONS CAN NOT GET OUT OF IT because the about dictates


If you make the first list’s background red, all your other sections will be
red as well. The only way you can not make it not red is if you specify
on all the sections to be a different color.


First Section

Second Section

Third Section


Then the theme would having something that looks like this:

#about ul {attributeshere;}


#about ul ul {attributeshere;}


#about ul ul ul {attributeshere;}

Third Section

We know it's an unordered list (no numbers) and that we used three of them.
I recommend trying to make your lists organize. Once you delete or
forget one, it will really mess you up.
User Image
#STEPELEVEN{ p o s i t i o n i n g;}

User Image

    I have my own way of doing this. Others prefer using margin-left
    and margin-right, but I like using the absolute, top and left attributes. It's just
    easier for me to comprehend, but they're are pretty much move everything. ; )

    position: xxx;


    Starts positioning from the top corner of the page.

    I don't recommend using relative. Use absolute instead.

    User Image
    (An easier depiction)

    (-) Negative Number: Makes the section move up
    (+) Positive Number: Makes the section go down the page

    (-) Negative Number: Makes the section move to the left
    (+) Positive Number: Makes the section move to the right

    This can be used for any section. So, let's say I wanted to
    move my about me it would look like this:

    #about {position:absolute;top: ###px;left: ###px;}

User Image

    Margins are another way of approaching positioning. This is mainly used to make things
    centered, but used frequently for other things.

    Adds margins to all sides. By increasing the ##px, it will be moved. Think of Microsoft
    Word, you start with default margins, but once you change it will 'squish' your content
    into the fixed margins. In contrast with padding, the margins control the stuff "outside"
    and NOT inside of a section. Thus, it is the space around it that allows it to be moved.

    Add margins (or space) from the top.

    Add margins (or space) from the right.

    Add margins (or space) from the bottom.

    Add margins (or space) from the left.

      Possible Values:

      • ###px
      • auto

      Like with positioning, you can put numbers. Scroll up a bit for how negative
      and positive numbers come into play. Aside from numbers, auto is
      introduced to allow you to center your profile. I can't explain it much, but
      auto basically does the job for you. xD

      So, for instance, auto would be associated with margin-right and margin-left
      to allow things to be "centered." By making it auto, it fixes the profile in the
      middle when you declare.

      For all eternity, it's just been like that. I can't provide a clearer description.
      To center your profile, you would do this.

      #site {margin-left:auto;margin-right:auto;}

      _____..TOP..RIGHT.BOTTOM. LEFT
      margin: ###px ###px ###px ###px;

      Margins are used when you change the gaia logo. If we were to not specify the
      "margins" the gaia logo would not be visible because it is hidden by the original
      gaia logo embedded in the background of the #gaia_header section.

User Image
#STEPTWELVE{ m i s c c o d e s;}

User Image

  • Go to statcounter and sign up for your own account
    There are other counters available online, but I trust this one more.

    User Image
  • You need to find a link that says add new project. Click on that and name your
    project accordingly. Now the bar graph obviously shows the stats on who visits your page and the wrench allows you to customize your counter. Click on the wrench icon

    User Image
  • A list of links will appear, but click on the one that says Configure Counter. The link should direct you to a page where you can customize your counter. You can select
    the colors they offer, or place the hexcodes you want. Anyway, make sure to set the
    counter style
    at the bottom. After that, return to the list of links.

    User Image
  • Click on the link that says Install Code. Make sure you click on the radio button
    that allows it to be a visible counter. Click next, and the next page will allow you to change
    how entries are stored. Click next (again) and it asks you if you want it to be a counter
    (make sure it is)

    User Image
  • Click next... next.... next until you see a screen that looks like the screen shown above.
    I know it's ugly to look at, but I will help you create the code. Just bear with me. xDDD

    Basically, the coding will look like this:

    Remember when you type the letters. They are case sensitive!

  • User Image
    This is where that ugly screen comes to play. These parts are the only things you should
    focused on. (Definitely not all the other crud that is meant to confuse you!) Basically you'll
    just have to plug the numbers where the pound signs are. Project numbers and security numbers accordingly people. : ) : )

    The finished product would look like this
    [img]http://c.statcounter.com/3828060/0/e56b2013/0&var sc_security="e56b2013"[/img]

    As of now you have created the counter I use to count you people who mingle in this thread. xD
    Check out the bottom right corner of the first post!

    User Image - Blocked by "Display Image" Settings. Click to show.

    User Image
    Basic Cursors
    #whateversection {cursor: xxx;}

    Cursors offered & supported with browsers:

    User Image

    Replace the 'xxx' with the names above.
    This attribute are mostly used with the body, link and images

    Your own Customized Cursor
    #whateversection {cursor: url(filename.cur);}

    I don't know how to create cursors, but if I do find a guide I'll point
    them out to you. You just have to find a cursor thing file type that ends w/
    .cur. If you go on yahoo or google, you can search, but it's NOT
    recommended at all because most of the sites that offer cursors have
    spyware embedded in them when you download them (same goes for

    If you find a reliable one, use it.
    Please be reminded. Firefox doesn't support cursor imports. IE, however,
    Proven from Ben Pond it is possible. I'm just too lazy
    right now to figure it out. xD

    User Image

    People use the status bar buttons to create their links, but people
    wonder how can people create buttons, but the only links the status
    bar offers are add friends, ignore, pm and trade. Well... people... it's
    not much of a secret.

    They create their own buttons using custom sections. Nothing special.
    If you haven't bothered reading how to create custom sections, I suggest
    scrolling back up a bit to refresh your mind, or if you don't know and skipped
    ahead go back.

    How does this work? Here's the logic.

    User Image
    PUSHONE You have a custom section and you put the image you want seen when
    hovered over. (This happens in your About me section) You must also link this
    to your desired location. Let's say you want to link to your comments you would
    have to go to your add comment link. Right click > properties > and copy that
    long url. It should look something like this:


    Basically if you know your gaia member number you just need to replace the
    pound sign to your Gaia ID Number. In my case, it's 102800.

    User Image
    PUSHTWO The image you want when it is not hovered will be placed in the theme box.

    PUSHTHREE Basically what happens with the coding, the background image appears and the image is hidden when the cursor is not on top of it.

    PUSHFOUR When cursor is over it, the image that you put in the BBCODE (about me) will appear.

    In summary, you need to use both your about me input text thing and your theme box.

    In your About me would look like this.


    Please reminded that spacing is important. If you space the gap between the list=1 and
    the url portion it will "move down." So, keep the spacing together.... so no... breakage.
    Remember list=1 is a custom section. You can create multiple sections and have more buttons
    this is just to create one button, but the concept still applies.

    This is all mentioned in PUSHONE.

    In your Theme Box would look like this.

    /*this allows me to move it*/
    #about ol {background-color:black;position:absolute;top:500px;left:500px;}

    /*this is the image that first appears*/
    #about ol {background-image:url('http://i295.photobucket.com/albums/mm152/visualearner/regularbackground.gif')}

    /*when the section isn't hovered over this hides the image in the ol*/
    #about ol img {opacity:0;filter: alpha(opacity=0)}

    /*when the section IS hovered the image you put in the BBCODE about me section appears*/
    #about ol:hover img {opacity:1.00;filter: alpha(opacity=100)}

    Where it shows the background-image that's where you place the image that first appears.

    To make it compatible, had to use opacity and filter. Filter is for IE (100= show fully, 0 =
    not to display, gone, kapeesh) and opacity is for FF (1.00 = same as 100 show fully, .0 =
    not to show, byebye)

    Read the comments to fully understand more. : 3

    User Image
    I bet the first thing you are wondering what is a patch. Well, it's
    a 50x50px image that represents you or your profile. You don't
    have to always have one patch. Nowadays, people create a patch
    for every new profile they make.

    Patches can be created in Photoshop or any other imaging

    These are the collection of patches I have created over time. 3

    User Image - Blocked by "Display Image" Settings. Click to show. User Image - Blocked by "Display Image" Settings. Click to show. User Image User Image

      * this tutorial is only available to users with Photoshop 7.0 or up

      User Image
    • The first step is to start a new document and set up the dimensions for the patch.
      Simply use CTRL + N to start a new document. Then change the specifications
      of that document to 50px by 50px pixels. Click Okay.

      User Image
    • Most patches are just a reflection of your new layout. So, copy ( CTRL + C ) and paste ( CTRL + V ) the image the exact way you want

      User Image
    • Make sure you are on the correct layer and select all ( CTRL + A ) (<--- when this happens
      you should see something like white and black lines moving around the image as shown above) and cut ( CTRL + X ) then paste ( CTRL + V ) it back in, again. By doing this, this will only cut out an exact 50px by 50px patch to enable you to put a border. Think of a cookie cutter. xD

      User Image
      User Image
    • Look at your layers you should see a set of pictures at the bottom. Click on the one that
      looks like an f > click on stroke. Make sure you set it "inside" and not outside. The higher the
      number the thicker the border gets, and you can easily change the color by looking through
      the color wheel.

      User Image
    • After that, you can just slap on some text, and wala~~~~~ your gorgeous patch.

    User Image
    You can organize code however you want. It is all up to the each person's
    personal preference. I (note: you don't have to follow, but is recommended) organize
    my codes based on the overall page and work my way from the top to the bottom.
    From there, you can alter the overall section (exp: #about) and then venture
    to the details/aspects within a specific section (exp: #about h2).

    I have created a sample theme you can alter/experiment with.
    The best way to coding is to be organized and "comment" your work.
    This is basically the easiest way to help you remember which part of
    the coding does what, and you simply write them within slashes and
    asterisks (exp: /* comment here */).

    People are sometimes against commenting parts of their code
    to keep others from stealing and altering it easily. For you, commenting
    will help you brand your work, and allow you to remember things easily
    without having to switch back and forth between this guide and your
    profile theme box.

    : )

    So basically what I did was I created a sample theme, and commented
    each segment/portion of code for your understanding. If you notice, I go
    for the overall profile, then go from the top to bottom, and for all the stuff
    I remove/omit tends to go at the end.

    You'll notice sometimes my items are squished together.
    SPACING IS YOUR FRIEND. You can space your stuff between the
    portions of your code, so it's not all rammed together. If your list
    of attributes tends to be long. DO NOT MAKE IT A STREAM LINE OF
    CODING. It will be longer for you to sift through your coding instead
    of doing this:

    #about {background-color:red;color:white;letter-spacing:5px;position:absolute;top:200px;left:12px;text-transform:lowercase;text-indent:5px;padding:25px;border:1px solid black;text-align:justify;line-height:20px;}

    Do this:

    #about {
    border:1px solid black;

    This will make it WAY easier on your eye, and less troubling for you. When
    you are looking for a specific part of your section, you can easily press CTRL + F
    and type in keywords to alter. ; )

    User Image
    * The image is clickable to my profile.

User Image
#STEPTHIRTEEN{ f a q s & e t t i q u e t t e;}

User Image

  1. How come there is a gray line in my profile?
    It's always like that in profiles. You mainly just have to go back to the #extendedProfileBody
    and #content and set the attribute to border:0px; It's only a border. : ) Everyone has
    this problem

  2. Why are there round corners in my commentws in Firefox and not in IE?
    It's just how Firefox reads the codings. I'm not exactly sure, but it deals with the puesdo
    classes. So, to easily omit that problem all you have to do is add this _______. I'm not a fan
    of chugging and plugging, but this is the only way. xD

  3. My profile is screwed up! I don't know what to do!
    It happens to everyone. It could be you are missing a semi-colon or not closing off your
    statements properly. Remember: Everything should be within squiggly doodles. : )

  4. I HATE THE INTERESTS SECTION! Is that it's own section #interests doesn't work!
    No, the "interests" section including the line is part of the #details section.
    Refer back to the third post for a detailed account.

  5. I correctly specified my main class and background. Why isn't the color changing in the my gaia_header?
    I don't know either, but the way to fix this problem is by using those special symbols that
    include * and !important. This is an all else... last attempt to combat gaia's strange way of
    not reading it. Refer up to the debugging/hacks post for further explanation.

User Image

I'm just going to set some guidelines for future individuals reading this guide.
This will probably enlighten you a bit.

    I can not stress it that much. D : You have to learn how to code yourself. I don't
    mind giving you tips of which section is belongs, but if you think I can solve all your
    problems you are sorely mistaken. Don't say "PLZGIVEMCODEthx." It's a bit insulting.

  2. The theme is for your experimental use only.
    The reason why I have the theme in the first place is to help you understand
    how code is organized, and what not. I get really annoyed if people just "use" it
    and don't say anything. I just want to know all my is effort is put into good use.
    Seriously... DO NOT REMOVE THE COMMENTS. I will shoot you... and please
    if you do experiment with it say something. Dx

  3. The obvious: do not bump the thread if isn't off the first page.
    Just to comply with PD guidelines

  4. Be niceeeeeeeeee.
    Doi doi.

User Image
#STEPFOURTEEN{ l i n k a r o o;}

User Image
[url=http://www.gaiaonline.com/forum/profile-discussion/visual-old-school-beginner-guide-95-exptheme-ed/t.24095883/][IMG]http://img.photobucket.com/albums/v248/lil_neko/redpurp.jpg[/IMG] [/url]

User Image
[url=http://www.gaiaonline.com/forum/profile-discussion/visual-old-school-beginner-guide-95-exptheme-ed/t.24095883/][IMG]http://img.photobucket.com/albums/v248/lil_neko/blah-1.jpg[/IMG] [/url]

#STEPFOURTEEN{ l i n k s o u t;}





  • FIREFOX 3.0 A safe, secure browser. : ) *cough*FF>IE*cough*
  • ADOBE PHOTOSHOP CS4 TRIAL Adobe allows you to download their product
    for a 30 day trial period. If you like it... then buy it. XD

#STEPFOURTEEN{ w o r d;}

I think it's about time that I finally finished this guide. I intended to make
one since... a year.. or two years ago. I think it's pretty sad it took me this
long to finish this. LOL, I'm just lazy.... and... it takes a lot of time processing
the images and stuff.

I hope many people will take a lot out from this guide. I haven't seen a guide that
TAUGHT users how to combine the sections by themselves, so that's why I created it.

I wish I had a guide like this when I first started. ; ____ ;

Quick Reply

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