Below is a CSS Map of the Profile with the different element ID's and Classes.
#site
#header #content #sidebar #profile #bar #onlineButton #addButton #msgButton #tradeButton #ignoreButton .avatar .caption .message .items .item #details #stats #info .clear #wishlist .items .item wanted .item bought .item donated .item questing #main #about .links .clear #friends .links #friendGroup .clear #journal .links #entries #multimedia #comments .links .avatar .avatar2 .caption .caption2 .message .date .clear .admin #signature .clear #footer #corp .adminBlue element names are the names of the element ID's.
Green element names are the names of the element classes.
ID's v.s. Classes
Now you may ask, what is the difference between an ID and a class?
They differ in organization;
You cannot put ID's or other Classes into classes. But you can put other ID's or Classes into ID's. Below an example of how it 'looks' in CSS.
Quote:
Wrong
.classname1 .classname2 {CSS CODE}
.classname1 #idname1 {CSS CODE}
Correct
#idname1 #idname2 {CSS CODE}
#idname1 .classname1 {CSS CODE}
.classname1 .classname2 {CSS CODE}
.classname1 #idname1 {CSS CODE}
Correct
#idname1 #idname2 {CSS CODE}
#idname1 .classname1 {CSS CODE}
Keep in mind, in the CSS stylesheet classes are preceded with a '.' and ID's with a '#'. If you forget this, the code won't work!
Using ID's & Classes
The next question is, 'so how do you use ID's and Classes?'.
Well, basically, you use them in much the same way, and because Gaia also uses nested elements (elements within elements), so can you. A few examples below.
Quote:
#content {CSS CODE}
This will change the code of everything within the #site element.
#content #sidebar {CSS CODE}
This will change everything in the #sidebar within the #content, but nothing else.
For example, if you want to make the color of the text within the #sidebar white, but not in the #main (#about, #friends, etc) you would use:
#content #sidebar {color:#FFFFFF;}
This will change the code of everything within the #site element.
#content #sidebar {CSS CODE}
This will change everything in the #sidebar within the #content, but nothing else.
For example, if you want to make the color of the text within the #sidebar white, but not in the #main (#about, #friends, etc) you would use:
#content #sidebar {color:#FFFFFF;}
