View User's Journal

-Header & Body Codes-

Below is a list of all codes that affect the Header Section of your Profile, along with the Background.

Codes:

This code is for your H2 sections. It affects the words "Friends", "Details", "Wishlist", etc. You can use this to change them all at once, instead of changing one at a time. 3nodding

.section h2
{
background: url('XXX') no-repeat top left;
}

This code changes the background behind the word.

-=-=-=-

The below code affects what your caption contains. For those who don't know what that is, your Caption is the little word bubble/square that your character is saying.

#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. 3nodding

-=-=-=-

This affects how your Avatar is displayed.

#profile .avatar
{
display: url('XXX');
background: url('XXX') no-repeat top left;
}

The 'Display:' portion is the URL for your actual Avatar, so don't add it unless you want to change your Avatar into some other image. 'Background:' can change the Background behind the Avatar.

-=-=-=-

This code affects the Header Image.

#extendedProfileBody #header h1
{
background: url('XXX') no-repeat;
}

This is basically affects that long image at the top of the screen. You know, the one that says "Gaia Online" or "Gaia Profiles" or something. The large banner. Well, simply replace XXX with your own URL, and you can replace the banner with your image. BANNER SIZE: 760x150 Pixels

-=-=-=-

This code changes the Background.

#extendedProfileBody
{
background: #000000;
}

-=-=-=-=-=-

#extendedProfileBody
{
background: url('XXX');
}

You can use this to change your background. That code with the six digit number (This number is called a Hexidecimal, for your info) is a color code. Whatever number is there, tells what background color it is. Or, you can use the second one, which changes the background into an image.

-=-=-=-

This affect text/body in your profile.

body
{
background: url('XXX') no-repeat fixed left;
font-family: Comic Sans MS, Arial Black, Times New Roman;
color : #000000;
text-align:justify;
}

Here you can adjust the Text and overall body of your profile. Background URL, you know what that is. "Font-Family" changes the type of font on the page to any kind you specify. Here, you'll want to give three (Fonts shouls be separated by comas). Three fonts, the first being your prefered one. It takes three, incase a user doesn't have the first font on their computer. "Color" changes the color of the text, which requires a Hexidecimal if I'm correct. "Text-align" tells where to align your text. Justify makes it regular, but you can use Center, Right, or Left. 3nodding

Atasuke Chikanatsu

This code changes the colors of Text and Links (UPDATED):

TD, FONT, P, BR, BODY, H1, H2, I, B
{
font-family:lucida sans;
font-size:10pt;
color: COLORCODE;
}
a:link {color: COLORCODE; font-weight: bold; text-decoration: none}
a:visited {color: COLORCODE; font-weight: bold; text-decoration: none}
a:active {color: COLORCODE; font-weight: bold; text-decoration: none }
a:hover {color: COLORCODE; font-weight: bold; text-decoration: underline}

This code changes the colors of the links at the bottom of the page:

.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: COLORCODE; letter-spacing: -1px;}
a.copyright { color: COLORCODE; font-size: small; text-decoration: none;}
a.copyright:hover { color: COLORCODE; font-size: small; text-decoration: underline;}
.corporate { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: COLORCODE;}
a.corporate { color: COLORCODE; font-size: small; text-decoration: none;}
a.corporate:visited {color: COLORCODE;}
a.corporate:hover { color: COLORCODE; font-size: small; text-decoration: underline;}
.news{ font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; color: COLORCODE;}
a.news { color: COLORCODE; font-size: small; text-decoration: none;}
a.news:visited {color: COLORCODE;}
a.news:hover { color: COLORCODE; font-size: small; text-decoration: underline;}

Changes the footer of the page (the blue bar, for those of you who don't know):

#extendedProfileBody #footer
{background: url('XXX');}

-=-=-=-

This long list of code, my friend, changes your Status Bar (UPDATED).

Atasuke Chikanatsu

#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 Heref) 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.

Autolycos

}

#friends
{
display: none;
}

Remove the Friends section of your profile.

*The can work with any section. Just change the friends part to journal, multimedia ect. just change '#friends' to the name of the section you want*

body
{
cursor: crosshair;
}

Adds a crosshair cursor to your profile.

For a more details explination on cursors, go here: Pie32's Cursor List

-Individual Codes-

Below is a list of all codes that affect the each individual section of your Profile. This is your "Profile" section, "About", "Friends", etc., and is for codes that affect them individually.

Profile Codes:
This code changes the Background Header image of your "Profile" section.

Atasuke Chikanatsu

#profile H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}

-=-=-=-

About Codes:
This code changes the Background Header image of your "About" section.

Atasuke Chikanatsu

#about H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}

-=-=-=-

Details Codes:
This code changes the Background Header image of your "Details" section.

Atasuke Chikanatsu

#details H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}

-=-=-=-

Wishlist Codes:
This code changes the Background Header image of your "Wishlist" section.

Atasuke Chikanatsu

#wishlist H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}

-=-=-=-

Friends Codes:
This code changes the Background Header image of your "Friends" section.

Atasuke Chikanatsu

#friends H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}

-=-=-=-

Journal Codes:
This code changes the Background Header image of your "Journal" section.

Atasuke Chikanatsu

#journal H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}

-=-=-=-

Multimedia Codes:

Atasuke Chikanatsu

This code embeds the Multimedia section:

#multimedia { text-indent: -5000px; position: relative; left: -5000px; }
#comments { position: relative; top: -420px; }
#signature { position: relative; top: -420px; }

NOTE: This will leave a large space at the bottom of your profile. DO NOT use this code if you are using the CENTERING code (where your entire prifile is in the center of the page)

This code changes the Background Header image of your "Multimedia" section.

Atasuke Chikanatsu

#Multimedia H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}

Pie32

For my hide multimedia code, you can use the centering code. It's just this next bit of code that you should include after it. It moves up the footer, so it is optional.

#footer { position: relative; top: -420px }
#corp { position: relative; top: -420px }

-=-=-=-

Comments Codes:

This code changes the Background Header image of your "Comments" section.

Atasuke Chikanatsu

#comments H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}

These codes affect the comments in your Profile. "dt.avatar img" affects the first person to post in your comments, or more specifically, the first person on the list of people. Likewise, "dt.avatar2 img" affects the second person on the Comments list.

#comments dl dt.avatar img
{
background: url('XXX');
}

#comments dl dt.avatar2 img
{
background: url('XXX');
}

These particular codes change the background image behind the commentor's Avatar.

-=-=-=-

Signature Codes:
This code changes the Background Header image of your "Signature" section.

Atasuke Chikanatsu

#signature H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}

Atasuke Chikanatsu

Here is some coding that you can put into your theme.

Anything maked by 'COLORCODE' is where you put HEX color code
Anything maked by 'XXX' is where you put your URL's

This code changes the banner at the top of the page:

#extendedProfileBody #header h1
{
background: url('XXX');
}

This code insterts a background picture:

body
{
background: #000000 url('XXX') no-repeat fixed left;
}

Additional things that can be added to the picture:

no-repeat = the picture will not repeat itself (meaning it will only put the background image ONCE)
fixed = fixes the picture in a position. you must add one or more of the following after the 'fixed' command:
left = fixes the image to the left
right = fixes the image to the right
top = fixes the image to the top
bottom = fixes the image to the bottom

This code removes the excess bacground from around the different sections (friends, profile, wishlist, ect...):

#content
{
background: none;
}

'none' can be changed to a HEX color or image

This code changes the colors of Text and Links:

body,TD,FONT,P,I
{
font-family: verdana;
font-size:8pt;
color: COLORCODE
}
B
{
font-family:verdana;
font-size:8pt;
color: COLORCODE}
a:link { color: COLORCODE; font-weight: bold; text-decoration: none}
a:visited { color: COLORCODE; font-weight: bold; text-decoration: none}
a:active { color: COLORCODE; font-weight: bold; text-decoration: none }
a:hover { color: COLORCODE; font-weight: bold; text-decoration: underline}
TD, FONT, P, BR, BODY, H1, H2
{
font-family:verdana;
font-size:8pt;
color: COLORCODE
}
p table
{
width:450;border:1px solid black;
background:white;
}

This code changes the colors of the links at the bottom of the page:

This code embeds the Multimedia section:

#multimedia { text-indent: -5000px; position: relative; left: -5000px; }
#comments { position: relative; top: -420px; }
#signature { position: relative; top: -420px; }

NOTE: This will leave a large space at the bottom of your profile. DO NOT use this code if you are using the CENTERING code (where your entire prifile is in the center of the page)

Changes the footer of the page (the blue bar, for those of you who don't know):

#extendedProfileBody #footer
{background: url('XXX');}

Welcome to Gaia! :: View User's Journal | Gaia Journals

More Information