|| CSS tutorial ||
For this tutorial, I've gone into the Gaia online extended profile CSS sheets and extracted the information that will be used to customize your extended profile - meaning that all the information here follows the same format as the Gaia online official code. Everything has been broken down and divided into sections based on each section of the extended profiles. This isn't too confusing, but beginners in CSS may have some trouble. I will only include practical use CSS code in this tutorial.
|| BODY ||
BODY{
background-color: #B6CAD5;
background:url('myimage')
scrollbar-face-color: #DEE3E7; /* IE only stuff */
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #C8DFF9;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
The body is basically the page itself - it effects everything in it when changed, so for this reason, we want to avoid adding too much clutter to it.
--- background-color : Changes the background color of the page.
--- background : Change the "myimage" in the parenthesis to an image URL to get a background image. Remove this line if you don't plan to use it.
--- scrollbar sections : IE ONLY. Allows you to manipulate the colors of the browser's scrollbar. I won't go into this for now, as it's a bit complicated and I don't use it personally.
|| HEADER ||
#extendedProfileBody #header h1{
background-color: #B6CAD5;
background: url('myimage')
}
The header is what appears above the navigation bar - It holds our avatar image and the image based around our location. Mostly just for looks.
--- background-color : Changes the background color of the header.
--- background : Change the "myimage" in the parenthesis to an image URL to get a custom header. Remove this line if you don't plan to use it.
|| CONTENT ||
#content{
background-color: #B6CAD5;
background: url('myimage')
}
Content is the DIV in which all the sections of your extended profile are kept. Again, it's a background object, so avoid putting too much into it..
--- background-color : Changes the background color of the content.
--- background : Change the "myimage" in the parenthesis to an image URL to get a background image in your content. Remove this line if you don't plan to use it.
|| SECTIONS ||
.section {
font: 8px verdana;
color: #8DA9D4;
background-color: #B6CAD5;
background: url('myimage')
border: 1px dashed #8DA9D4;
}
.section h2{
color: #8DA9D4;
font-size: 14px;
}
The sections are basically just that - sections of the extended profile. They contain the data for basically all the items displayed individually. Bacause everything is linked to this class, all sections become uniform based on the section here untill additional customization, which we will cover later in this tutorial.
[ .section ]
--- font : This follows the format "(size)px (font type)". Replace (size) with the font size and (font type) with your font of choice.
--- color : The font color of everything in your sections.
--- background-color : Changes the background color of the sections.
--- background : Change the "myimage" in the parenthesis to an image URL to get a background image in your sections. Remove this line if you don't plan to use it. NOT RECOMMENDED.
--- border : 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.
[ .section h2 | The H2 tag is used with each tag in the sections (Wish List, About, Friends, etc.). ]
--- color : Changes the color of the section tags.
--- font-size : Changes the size of the section tags
|| "PROFILE" SECTION ||
#profile{
background-color: #F3F6FF
background: url('myimage') top left repeat-x;
}
#profile h2{
background: url('myimage') top left no-repeat;
text-indent: 45px;
}
#profile #bar{
height: 22px;
margin-left: 12px;
}
#profile .avatar{
position: relative;
}
#profile .caption{
background-color: #C6D7F0;
border: 2px solid #8DA9D4;
}
#profile .caption .message{
color: #000000;
font-size: 12px;
}
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.
[ #profile ]
--- background-color : Changes the background color of the profile section. This will override the .section code. Remove this line if you wish to retain uniform sections.
--- background : IMPORTANT! THIS IS YOUR SECTION CORNER IMAGE. Change the "myimage" in the parenthesis to an image URL to get a background image in your profile section. Remove this line if you don't plan to use it.
[ #profile h2 | Your username displayed in the first box ]
--- background : Change the "myimage" in the parenthesis to an image URL to get a background image of your username. Remove this line if you don't plan to use it.
--- text-indent : This is important if you plan to have a courner image. This shifts your username over to the right so that the image is not obstructed.
[ #profile #bar | Your online status bar - contains PM, trade, etc. ]
--- height : The height of your status bar (the bar with your online status).
--- margin-left : The amount to shift your bar to the right.
[ #profile .avatar | Your displayed avatar in this section ]
--- position : 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.
[ #profile .caption | This is the DIV that your message is displayed in ]
--- background-color : The background color of your caption.
--- border : 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.
[ #profile .caption .message | The message text within the caption ]
--- color : Your caption color
--- font-size : Your caption font size
|| DETAILS ||
#details{
background-color: #F3F6FF;
background: url('myimg') top left repeat-x;
}
#details h2{
background: url('myimg') top left no-repeat;
text-indent: 45px;
}
#details #stats{
color: #FFFFFF;
font-size: 12px;
}
Your "details" section contains all your user details including Birthday, location, last login, post count, etc. A couple customizable things here, but not too many.
[ #details ]
--- background-color : Changes the background color of the details section. This will override the .section code. Remove this line if you wish to retain uniform sections.
--- background : IMPORTANT! THIS IS YOUR SECTION CORNER IMAGE. Change the "myimage" in the parenthesis to an image URL to get a background image in your details section. Remove this line if you don't plan to use it.
[ #details h2 | The word "Details" in the second section ]
--- background : Change the "myimage" in the parenthesis to an image URL to get a background image of the text. Remove this line if you don't plan to use it.
--- text-indent : This is important if you plan to have a courner image. This shifts the text over to the right so that the image is not obstructed.
[ #details #stats | The displayed statistics of the user ]
--- color : The statistics font color
--- font-size : Statistics font size
|| WISHLIST ||
#wishlist{
background-color: #F3F6FF;
background: url("myimage") top left repeat-x;
border: 1px solid #354FA3;
}
#wishlist h2{
background: url("myimage") top left no-repeat;
text-indent: 45px;
}
#wishlist .questing{
background: url("myimage") top right no-repeat;
}
#wishlist .bought{
background: url("myimage") top right no-repeat;
}
#wishlist .donated{
background: url("myimage") top right no-repeat;
}
Your "wishlist" section contains all items you've added to your wishlist.
[ #wishlist ]
--- background-color : Changes the background color of the wishlist section. This will override the .section code. Remove this line if you wish to retain uniform sections.
--- background : IMPORTANT! THIS IS YOUR SECTION CORNER IMAGE. Change the "myimage" in the parenthesis to an image URL to get a background image in your details section. Remove this line if you don't plan to use it.
--- border : 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.
[ #wishlist h2 | The words "Wish list" in the third section ]
--- background : Change the "myimage" in the parenthesis to an image URL to get a background image of the text. Remove this line if you don't plan to use it.
--- text-indent : This is important if you plan to have a courner image. This shifts the text over to the right so that the image is not obstructed.
[ #wishlist .questing | Displayed items with the "Questing" status ]
--- background : Change the "myimage" in the parenthesis to an image URL to get a background image of the item. Remove this line if you don't plan to use it.
[ #wishlist .bought | Displayed items with the "Bought" status ]
--- background : Change the "myimage" in the parenthesis to an image URL to get a background image of the item. Remove this line if you don't plan to use it.
[ #wishlist .donated | Displayed items with the "Donated" status ]
--- background : Change the "myimage" in the parenthesis to an image URL to get a background image of the item. Remove this line if you don't plan to use it.
|| ABOUT ||
#about{
background-color: #FFF3F3;
background: url("myimage") top left repeat-x;
border: 1px solid #903535;
height: 1%; /* Holly Hack */
}
#about h2{
background: url(images/about_header.gif) top left no-repeat;
}
Your "about" section contains the information you added in the "about me", as well as links to your guilds, posts, and store.
[ #about ]
--- background-color : Changes the background color of the wishlist section. This will override the .section code. Remove this line if you wish to retain uniform sections.
--- background : IMPORTANT! THIS IS YOUR SECTION CORNER IMAGE. Change the "myimage" in the parenthesis to an image URL to get a background image in your about section. Remove this line if you don't plan to use it.
--- border : 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.
--- height : No need to mess with this - it simply returns the section to the original height when nothing is in it, simular to a rubber band.
[ #about h2 | The word "About" in the fourth section ]
--- background : Change the "myimage" in the parenthesis to an image URL to get a background image of the text. Remove this line if you don't plan to use it.
--- text-indent : This is important if you plan to have a courner image. This shifts the text over to the right so that the image is not obstructed.
-- Still writing below this line --
|| FRIENDS ||
#friends{
background: #FEF2F8 url(images/friends_header_tile.gif) top left repeat-x;
border-right: 1px solid #972961;
border-bottom: 1px solid #972961;
border-left: 1px solid #972961;
height: 1%; /* Holly Hack */
}
#friends h2{
background: url(images/friends_header.gif) top left no-repeat;
}
#friends #friendGroup
{
margin-top: 10px;
}
#friends #friendGroup li
{
float: left;
width: 110px;
height: 130px;
text-align: center;
border-right: 2px solid #FFDFF0;
}
#friends #friendGroup li img
{
width: 96px;
height: 96px;
}
Your "about" section contains the information you added in the "about me", as well as links to your guilds, posts, and store.
[ #about ]
--- background-color : Changes the background color of the wishlist section. This will override the .section code. Remove this line if you wish to retain uniform sections.
--- background : IMPORTANT! THIS IS YOUR SECTION CORNER IMAGE. Change the "myimage" in the parenthesis to an image URL to get a background image in your about section. Remove this line if you don't plan to use it.
--- border : 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.
--- height : No need to mess with this - it simply returns the section to the original height when nothing is in it, simular to a rubber band.
[ #about h2 | The word "About" in the fourth section ]
--- background : Change the "myimage" in the parenthesis to an image URL to get a background image of the text. Remove this line if you don't plan to use it.
--- text-indent : This is important if you plan to have a courner image. This shifts the text over to the right so that the image is not obstructed.
200
150
200
