Code Keys
#XXX= A hex code. You can replace the 'XXX' with a 6 digit HEX code which relates to a color.
url('xxx')= The link to an image. Replace the 'xxx' with an url.
0px= A measurement. Replace the '0' with a number.
section_name= a section's name. ALWAYS replace the 'section_name' with an actual section name. Otherwise your codes will not work!
px= Pixels.
Section ID's
Any text that has "class" or "id" in front of it can be altered. When typing up your codes any class you alter will need a "." period in front of it, and any id you alter will need a "#" number sign in front of it.
The Body
Body- Changes the main body area. (The area behind the content). The body is the largest area on the page, and it spans the entire page.
"Body" does NOT use a "#" or "." before it!
The Site
#site- Changes the margins and position of the site area. #site is the second-largest area, and it contains the profile contents, the main bar, the footer, etc.
The Sidebar & Main
#sidebar- Changes the area directly behind the left side: Profile, Details, & the Wishlist. (As well as fonts in those sections.) #sidebar consists of all the sections on the left side. The sections it applies to are #profile, #details, and #wishlist.
#main- Changes the area directly behind the right side: About, Friends, Journal, Comments, Multimedia, & Signature. (As well as fonts in those sections.) #main is the area to the right of the profile, including the sections #about, #friends, #journal, #comments, #multimedia, and #signature.
The Top Header
#extendedProfileBody #header- Changes the top header area.
#extendedProfileBody #header h1- Changes the background of the top header area.
Notice that here we use two id's and one html code "h1". In this case the "h1" only applies to "extendedProfileBody" and isn't used elsewhere in the markup. If we were to simply have h1 and not #extended... our code would apply to the entire page. By attaching it to #extended... we make our changes apply specifically to the top banner.
Note- You can still change the dimensions using just the second code, so why not save space and just use that one.
The Content Area
#content- Changes the area behind the main sections such as 'Profile' 'About', 'Details', etc. #content is both the #sidebar and #main sections combined, and covers all sections those two tags cover.
The 'Section' Tag
The section tag is a class that is found next to most segments.
You can use it to combine codes together if you're making parts of your profile similar all around.
For example you can use it to make all sections such as 'Profile', 'About', 'Details', etc. Disappear, or to change the font-style, however it doesn't seem to work with all code types, so mess around with it.
.section- Changes the 'Profile', 'About', 'Details', etc. Sections universally.
.section h2- Changes the headers of the 'Profile', 'About', 'Details', etc. Sections.
Note- "h2" is another one of those html codes. In this case it is only used for all the interior segments 'Profile', 'About', 'Details', etc.
The Profile Area
#profile- Changes the profile area. (The area with your avatar and status bar).
#profile h2- Changes the header of your profile area. (The part that says your avatars name).
#profile .avatar- Changes the avatar area of your profile section.
#profile .items- Changes the items area of your profile section.
#profile .caption- Changes the caption (quote) area of your profile section.
#profile .caption:before- Changes the top curved corner area of quote box.
#profile .caption:after- Changes the bottom curved corner area of quote box.
#profile .message- Changes the message area of your profile section and the speech pointer/arrow.
The Status Bar
The status bar is also part of the profile section.
#bar- Changes the status bar area.
#bar #onlineButton- Changes the online portion of your status bar.
#bar #offlineButton- Changes the offline portion of your status bar.
#bar #hiddenButton- Changes the hidden portion of your status bar.
#bar #addButton- Changes the add portion of your status bar.
#bar #msgButton- Changes the PM portion of your status bar.
#bar #tradeButton- Changes the trade portion of your status bar.
#bar #ignoreButton- Changes the ignore portion of your status bar.
#bar #addButton a- Changes the link state, pretty much the same as the above codes. (Since they're already links).
#bar #addButton a:hover- Changes the hovered over state of the add button. (In other words, when you move your mouse over the add button in your status bar it will change that part. So if you want a different image when the person hovers, from the image when they're not hovering you'd change it with this code).
Note- The 'a' and 'a:hover' codes works on the Message, Trade, and ignore portions as well.
The Details Section
#details- Changes the details area.
#details h2- Changes the header of your details area.
#commonFriends- Changes the common friends area.
#commonFriends li img- Changes the avatar image area in common friends. (ie - The 'bg' directly behind it, or the size or opacity of the avatar.)
#details #stats- Changes the left half of the details text area.
#details #stats dt- Changes the headings of the left half of details text area.
#details #stats dd- Changes the input area of the left half of details text area.
#details #info- Changes the right half of the details text area.
#details #info dt- Changes the headings of the right half of details text area.
#details #info dd- Changes the input area of the right half of details text area.
Note- The stats and info area are the portions that say: Location, Last Login, Posts, etc. Stats is the left side, Info is to the right. Headings are: "Location, Birthday, etc." Basically the text that Gaia put for you. The input area is the stuff that you typed in, such as your actual birthdate and in interests it would be whatever interest text you typed such as: Anime, Food, etc.
The Wishlist Section
#wishlist- Changes the wishlist area.
#wishlist h2- Changes the header of your wishlist area.
#wistlist .items- Changes the items area of your wishlist.
#wishlist .questing- Changes the questing image area of your wishlist.
#wishlist .bought- Changes the bought image area of your wishlist.
#wishlist .donated- Changes the donated image area of your wishlist.
The About Section
#about- Changes the about area.
#about h2- Changes the header of your about area.
#about .links- Changes the links area of your about section. (In case you want to changes the background color, size, position, whatever).
The Friends Section
#friends- Changes the friends area.
#friends h2- Changes the header of your friends area.
#friends .links- Changes the links area of your friends section.
#friends #friendGroup- Changes the friendgroup area - basically the background behind the background of each individual friend avatar as well as the width of the area behind the avatar.
#friends #friendGroup li- Changes the border area in between friends.
#friends #friendGroup img- Changes the avatar area of your friends section.
Note- After messing around I can better describe the friend/friendgroup img codes.
The first one can change the dimensions of the area behind each individual friend without stretching the avatar image as well as place an additional background behind the friends. The second changes the properties of the avatar image, making it possible for you to have two backgrounds behind the avatars, the second one will overlap the first.
You can also change the dimensions of the second to stretch the avatar image.
The Journal Section
#journal- Changes the journal area.
#journal h2- Changes the header of your journal area.
#journal .links- Changes the links area of your journal section.
#journal h3- Changes the journal title area of journal section.
#journal #entries- Changes the entries area of your journal section.
The Comments Section
#comments- Changes the comments area.
#comments h2- Changes the header of your comments area.
#comments .links- Changes the links area of your comments section.
#comments dl dt.avatar img- changes the 'bg' of avatars on the left side of your comments.
#comments dl dt.avatar2 img- Changes the avatar area of avatars on the right side of your comments.
#comments .caption- Changes the area of odd # comments.
#comments .caption2- Changes the area of even # comments.
#comments .caption:before- Changes the top curved corner area of odd # comments.
#comments .caption:after- Changes the bottom curved corner area of odd # comments.
#comments .caption2:before- Changes the top curved corner area of even # comments.
#comments .caption2:after- Changes the bottom curved corner area of even # comments
#comments .caption .message- Changes the message area of odd # comments and the speech pointer/arrow.
#comments .caption2 .message- Changes the message area of even # comments and the speech pointer/arrow.
#comments p.date- Changes the 'date' area in the comments message box.
The Multimedia Section
#multimedia- Changes the multimedia area.
#multimedia h2- Changes the header of your multimedia area.
#multimedia object, #multimedia embed- Changes the player object of your multimedia section.
The Signature Section
#signature- Changes the signature area.
#signature h2- Changes the header of your signature area.
The Footer Section
#footer- Changes the footer area (the part that says 'copyright Gaia Interactive.')
(No longer available)
The Corp Section
#corp- Changes the link area beneath the copyright bar.
(No longer available)
Links
Links are both their own section and NOT their own section.
If you write them without a section before them they affect the whole page, if you just want them to affect a section you must write the section id before them.
a:link- Changes the default/normal link.
a:hover- Changes the link status when hovered over.
a:visited- Changes the link status when a link has been visited/clicked.
a:active- Changes the link status when the link is in the process of a click to going to the url.
(No other section later for links because links can accept ALL the properties that fonts do. So simply look at fonts to figure out what you can use with links).
Other
If you quote someone or use the 'code' code anywhere in your profile these can control their properties.
td.code- Controls things in the 'code' code.
td.quote- Controls things that are quoted.
td .genmed- Controls the title parts, the text that says "Code:" and "*** Wrote:"
View User's Journal
CSS Profile Codes
This is a basic and advanced tutorial on how to CSS profiles.
 |
Unfrigginbelievable
Community Member |
Legalize