Gaiaonline Profile Codes

Site Align:
Left - #site { margin-left: auto; margin-right: auto; width: 765px; }

Center - #site { margin-right: auto; margin-left: auto; width: 765px; }

Right - #site { margin-center left: auto; margin-left: auto; width: 765px; }

Background Body & Content:
body { background: #000 url( image url goes here ) fixed right bottom repeat; color: #fff; }

#content { background: #000 url( image url goes here ) fixed right bottom repeat;

Section Background:
Note:You can use this if you want all sections of the layout to like alike or you can do each separately ( This is easier! )
With color: #profile, #details, #wishlist, #about, #friends, #journal, #multimedia, #comments, #signature { background: #fff; }
With image: #profile, #details, #wishlist, #about, #friends, #journal, #multimedia, #comments, #signature { background: #000 url( image url goes here ) fixed right bottom repeat;  }
No background: #profile, #details, #wishlist, #about, #friends, #journal, #multimedia, #comments, #signature { background: none; }

Cursor Changer:
Note:You can also use other cursors like...help, pointer,ect.
body
{
cursor: cursor name;
}

Border:
Note:Some other borders are...solid, double, dash, outset, inset. An px size can go to almost any size.
.section { border: 2px dotted #000; }

Section Postioning:
Notenly postions that can be used are absolute and relative (Use absolute!). Where it say left you can also put in right, and you can put any number in front of px.
#section name { position: relative; left: 0px; top: 550px; width: 230px; }

Make Your Sections Scrollers:
Note:You can put any number in front of height and width.
#section name {overflow:scroll;overflow-x:hidden;overflow-y:auto; height:200px;width:400px;font-size:9pt;color:#fff;}

Caption Changer:
#comments { background: #fff; }
.caption { background: #000 url( image url goes here );
border: 2px solid #000; color: #000; }
.caption:before { content: url( image url goes here );
background: url() top right no-repeat;
}
.caption:after { content: url( image url goes here );
background: url( image url goes here ) bottom right no-repeat; }
.caption .message { background: url( image url goes here ) top left no-repeat; }

.caption2 { background: #000 url( image url goes here );
border: 2px solid #fff; color: #fff; }
.caption2:before { content: url( image url goes here );
background: url( image url goes here ) top right no-repeat; }
.caption2:after { content: url( image url goes here );
background: url( image url goes here ) bottom right no-repeat; }
.caption2 .message { background: url( image url goes here ) top right no-repeat; }

Profile Bar:
Noteest images to use are small .gif file images but if you want to use a bigger image for something just change the width and height px size.
#bar {background: transparent; position: absolute;}

#bar #addButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 70px; width:15px; height:10px;}
#bar #addButton a {background: transparent url( image url goes here ) -22px -90px no-repeat;width:15px; height:10px; border: 0px;}

#bar #tradeButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 100px; width:15px; height:10px;}
#bar #tradeButton a {background: transparent url( image url goes here ) -22px -90px no-repeat; width:15px; height:10px; border: 0px;}


#bar #msgButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 130px; width:15px; height:10px;}
#bar #msgButton a {background: transparent url( image url goes here ) -22px -90px no-repeat; width:15px; height:10px; border: 0px;}

#bar #ignoreButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 40px; width:15px; height:10px;}
#bar #ignoreButton a {background: transparent url( image url goes here ) -22px -90px no-repeat;width:15px; height:10px; border: 0px;}

#bar #onlineButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 40px; width:15px; height:10px;}
#bar #onlineButton a {background: transparent url( image url goes here ) -22px -90px no-repeat;width:15px; height:10px; border: 0px;}

#bar #offlineButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 40px; width:15px; height:10px;}
#bar #offlineButton a {background: transparent url( image url goes here ) -22px -90px no-repeat;width:15px; height:10px; border: 0px;}

Text:
Note:You can use any text font name.
body
{
font-family: Font name;
color : #000;
text-align:left;
}

Don't Display:
Note:This lets you take ANYTHING that you don't want to be shown on your profile. Also you can put any number of sections in the list.
#section name,  {display:none}