Profile
The "profile" section contains your avatar, status bar, what you're wearing, and your message. There's a few things that can be customized here.
Quote:
#profile h2
{color: transparent;}
Changes the font to transparent in a specific header. (or you can replace transparent with a hex. code ie. "#000000" to change the font color.)
Quote:
#profile
{color: #000000;}
Changes the font color for a specific box, in this case the "profile" box where your avatar and items are shown.
Quote:
#profile ul.items
{display:none;}
Removes items underneath your avatar.
Quote:
#profile .caption
{color: #000000;background: #000000;}
Changes the font color and background color of the comment boxes. To change the quote box background color use
Quote:
#profile
{ a:link (color:#0044cc; font-weight: bold; text-decoration: none); a:visited (color: #0044cc; font-weight: bold;text-decoration: none); a:active (color: #F9121E; font-weight: bold; text-decoration: none); a:hover (color: #F9121E; font-weight: bold; text-decoration: underline):}
Changes the link color, weight, and text-decoration for a certain section.
Quote:
#profile
{border-color: #000000;}
Changes the border color. (Same for: details, wishlist, about, friends, journal, comments, signature)
Quote:
#profile
{background: #000000 url('http://your image url here')}
Changes the background picture in the profile section. [likewise you can do the same for: details, wishlist, etc. just replace the "profile" with the section you wish to place the picture in.)
If you wish to simply change the color erase the "url-----" part and replace the "000000" with the hex. code for the color you wish to use.
Quote:
#profile h2
{background: url('http://your image url here') top left no-repeat;text-indent: 150px;}
Changes the header image. (likewise you can do the same for: details, wishlist, etc. just replace the "profile" with the section you wish to place the picture in.) If you wish to simply change the color erase the "url-----" part and replace the "000000" with the hex code for the color you wish to use.
Quote:
#profile .caption
{ color: #000000; }
Changes caption font color or you can replace the "00000" with a different hex code to change the font color.
Quote:
#profile .caption
{ background: #000000; }
Changes the background color of the profile quote box.
Quote:
#profile .caption
{width: 100px;height: 67px;background:url('http://your image url here')#000000center no-repeat;}
Puts a picture in the caption. (Or background if you remove the "center no-repeat") Please note that if your image is taller than the height of the normal quote bubble you will need to change the height specification.
Quote:
#profile h2
{background: url('your new avi image') no-repeat left bottom; height: 190px;}
#profile img.avatar{width:0px; height:0px;}
#profile #bar
{margin-top: 10px;}
#profile .caption
{top: 50px;}
Replaces your avatar's image. However, this will move the "online status" bar below the avi picture and you CANNOT have a image for the profile header. Meaning no code that says "#profile h2 etc." besides this one or it won�t work.
Quote:
#profile
{background: #000 url('http://your image url here') no-repeat left center;}
#profile .avatar
{filter:alpha(opacity=0);opacity:0;}
Deletes your avatar's image and replaces it. However, you must note that your new picture is actually your profile background picture, just centered. (or not centered if you have the image size worked out right.)
Quote:
#profile
{background: #000 url('http://your image url here') no-repeat left center;}
#profile .avatar
{opacity:0;}
Deletes the image of your avatar.
Quote:
#profile h2
{ font-type: helveltica; }
Changes the font type for a specific header, in this case the "profile" header.
Quote:
#profile
{color: #000000;}
Changes the font color for a specific box, in this case the "profile" box where your avatar and items are shown.
Quote:
#profile h2
{color: transparent;}
Changes the font to transparent in a specific header. (or you can replace transparent with "#000000" to change the font color.)
Quote:
#profile #bar{height: 22px;margin-left: 12px;}
The status bar, you can change height and indent with this code.
Quote:
#profile .avatar{position: relative;}
This code changes the position of your displayed avatar. This can be either "relative" or "absolute". In the instance of "absolute", you need to include the additional tags "top" and "left", and use those to position.
Quote:
#profile .caption{background-color: #000000;border: 2px solid #000000;}
With this code, you can change the background color of the caption in the Profile section as well as fixing up the border for that perticular section. The border section of this code follows the format: "(size)px (border style) #(color)" - replace (size) with the border width, (border style) with either "solid", "double", "dashed", or "dotted", and replace (color) with the border color.
Quote:
#profile .caption .message{color: #000000;font-size: 12px;}
With this code you could change the caption font and size.
Quote:
#profile {background: url('http://your image url here')}
Change background by using a picture (repeating).
Quote:
#profile {background: url('http://your image url here') no-repeat}
Change background by using a picture (no repeating)
Quote:
#profile .caption
{top: 50px;}
#bar #onlineButton {width: 60px; background: transparent url(ONLINE Graphic URL Here) no-repeat; text-indent: -5000px; height: 22px;}
#bar #offlineButton {width: 60px; background: transparent url(OFFLINE Graphic URL Here) no-repeat; text-indent: -5000px; height: 22px;}
#bar #hiddenButton {width: 60px; background: transparent url(HIDDEN Graphic URL Here) no-repeat; text-indent: -5000px; height: 22px;}
#bar #addButton {background: transparent url(ADD Graphic URL Here) no-repeat;}
#bar #msgButton {background: transparent url(PM Graphic URL Here) no-repeat;}
#bar #tradeButton {background: transparent url(TRADE Graphic URL Here) no-repeat;}
#bar #ignoreButton {background: transparent url(IGNORE Graphic URL Here) no-repeat;}
#bar #addButton a {width: 33px; background: transparent url(ADD MouseOver Graphic URL Here) -22px -90px no-repeat;}
#bar #msgButton a {width: 29px; background: transparent url(PM MouseOver Graphic URL Here) -22px -90px no-repeat;}
#bar #tradeButton a {width: 28px; background: transparent url(TRADE MouseOver Graphic URL Here) -22px -90px no-repeat;}
#bar #ignoreButton a {width: 34px; background: transparent url(IGNORE MouseOver Graphic URL Here) -22px -90px no-repeat;}
This is a bit of a complex code, so if you don't know your way around on Gaia (Or Internet, I should say), then perhaps asking for some help would be good. If you don't want a portion or image to be changed, then merely omit it.
This long list of code, my friend, changes your Status Bar.
Quote:
#profile .caption
{left: 110px;width: 40px;top: 80px;background: url('XXX') no-repeat center;}
This code here gives your Caption an image as a background. For Left, Witdh, and Top, you can use your own px's, this is just an example.
. 
next to it, you can use that to add items.
