Welcome to Gaia! ::

This is the style sheet for the Classic theme. Customizing notes to follow in subsequent posts~ Please only post examples if you've tested them in your own profile and you know they work. Thank you. ^^

/* GENERAL */

*
{
margin: 0;
padding: 0;
}

ul li
{
list-style-type: none;
}

dl dt
{
font-weight: bold;
}

/* CONTENT */

#content
{
padding: 10px;
}

#content #sidebar
{
position: absolute;
width: 230px;
left: 15px;
}

#content #main
{
margin-left: 230px;
min-height: 500px;
height: 500px;
border-left: 2px solid #D8E9F3;
}

#content > #main
{
height: auto;
}

/* SECTION */

.section
{
padding: 0 10px 10px 10px;
font-size: 12px;
}

.section h2
{
font-size: 15px;
margin: 0 -10px 0 -10px;
height: 25px;
margin-bottom: 10px;
line-height: 25px;
text-indent: -5000px; /* PHARK */
}

.section .clear
{
clear: both;
}

.section .head
{
width: 48px;
height: 48px;
}

.section .torso
{
width: 96px;
height: 96px;
}

.section .body
{
width: 120px;
height: 150px;
}

.section .items li
{
display: inline;
}

.section .items li img
{
width: 30px;
height: 30px;
}

.section .online
{
background: url('images/status_online.gif') no-repeat top left;
}

.section .offline
{
background: url('images/status_offline.gif') no-repeat top left;
}

.section .hidden
{
background: url('images/status_hidden.gif') no-repeat top left;
}

.section .links
{
margin-bottom: 10px;
}

.section .links li
{
display: inline;
}

.section .date
{
text-align: right;
font-size: 10px;
font-weight: normal;
font-style: italic;
margin: 0 0 3px 3px;
}

/* CAPTION */

.caption
{
border: 2px solid #6F7074;
background: #FFF;
}

.caption2
{
border: 2px solid #6F7074;
background: #FFF;
}

.caption:before
{
display: block;
margin: -2px;
content: url(images/caption_tl.gif);
background: url('images/caption_tr.gif') no-repeat top right;
line-height: .1
}

.caption:after
{
display: block;
margin: -2px;
content: url(images/caption_bl.gif);
background: url('images/caption_br.gif') no-repeat bottom right;
line-height: .1
}

.caption2:before
{
display: block;
margin: -2px;
content: url(images/caption_tl.gif);
background: url('images/caption_tr.gif') no-repeat top right;
line-height: .1
}

.caption2:after
{
display: block;
margin: -2px;
content: url(images/caption_bl.gif);
background: url('images/caption_br.gif') no-repeat bottom right;
line-height: .1
}

.caption .message
{
position: relative;
left: -22px;
min-height: 45px;
background: url('images/caption_ml.gif') no-repeat top left;
font-size: 13px;
font-weight: normal;
height: 45px; margin-left:0; margin-right:-12px; margin-top:0; margin-bottom:0; padding-left:32px; padding-right:0; padding-top:0; padding-bottom:0
}

.caption2 .message
{
position: relative;
right: -22px;
min-height: 45px;
background: url('images/caption_mr.gif') no-repeat top right;
font-size: 13px;
font-weight: normal;
height: 45px; margin-left:-12px; margin-right:0; margin-top:0; margin-bottom:0; padding-left:0; padding-right:32px; padding-top:0; padding-bottom:0
}

.caption > .message
{
height: auto;
}

.caption2 > .message
{
height: auto;
}

/* ACCOUNT */

form
{
margin: 0 150px;
}

textarea
{
width: 100%;
height: 100px;
}

.textfield
{
width: 100%;
}

label
{
font-weight: bold;
}

fieldset
{
margin-bottom: 10px;
}

#account ul li
{
display: inline;
}

/* PROFILE */

#profile
{
background: #FFF;
position: relative;
}

#profile h2
{
background: #185BC2;
color: #FFF;
text-align: center;
font-size: 14px;
font-weight: bold;
/* UN-PHARK */
text-indent: 0;
}

#profile #bar
{
height: 22px;
margin-left: 12px;
}

#profile #bar li
{
display: inline;
float: left;
}

#profile #bar #status
{
background: url('images/action_bar_frontcap.gif') no-repeat top left;
}

#profile #bar #friend
{
width: 33px;
}

#profile #bar #message
{
width: 29px;
}

#profile #bar #trade
{
width: 28px;
}

#profile #bar #ignore
{
width: 34px;
}

#profile .avatar
{
position: relative;
}

#profile .caption
{
position: absolute;
top: 70px;
left: 110px;
width: 105px;
}

#profile .status
{
background: url('images/action_bar_frontcap.gif') no-repeat top left;
margin-left: 10px
}

/* DETAILS */

#details
{
background: #FFF url('images/details_header_tile.gif') repeat-x top left;
height: 1%
}

#details h2
{
background: url('images/details_header.gif') no-repeat top left;
}

#details #stats
{
float: right;
width: 100px;
margin: 0 0 10px 10px;
}

/* WISHLIST */

#wishlist
{
background: #FFF url('images/wishlist_header_tile.gif') repeat-x top left;
}

#wishlist h2
{
background: url('images/wishlist_header.gif') no-repeat top left;
}

#wishlist .questing
{
background: url('images/wishlist_questing.gif') no-repeat top right;
}

#wishlist .bought
{
background: url('images/wishlist_bought.gif') no-repeat top right;
}

#wishlist .donated
{
background: url('images/wishlist_donated.gif') no-repeat top right;
}

/* ABOUT */

#about
{
background: #FFF url('images/about_header_tile.gif') repeat-x top left;
height: 1%
}

#about h2
{
background: url('images/about_header.gif') no-repeat top left;
}

/* FRIENDS */

#friends
{
background: #FFF url('images/friends_header_tile.gif') repeat-x top left;
height: 1%
}

#friends h2
{
background: url('images/friends_header.gif') no-repeat top left;
}

#friends #friendGroup
{
margin-top: 10px;
}

#friends #friendGroup li
{
float: left;
width: 110px;
height: 130px;
text-align: center;
border-right: 2px solid #D8E9F3;
}

#friends #friendGroup li img
{
width: 96px;
height: 96px;
}

/* JOURNAL */

#journal
{
background: #FFF url('images/journal_header_tile.gif') repeat-x top left;
}

#journal h2
{
background: url('images/journal_header.gif') no-repeat top left;
}

/* MULTIMEDIA */

#multimedia
{
background: #FFF url('images/multimedia_header_tile.gif') repeat-x top left;
}

#multimedia h2
{
background: url('images/multimedia_header.gif') no-repeat top left;
}

/* COMMENTS */

#comments
{
background: #FFF url('images/comments_header_tile.gif') repeat-x top left;
}

#comments h2
{
background: url('images/comments_header.gif') no-repeat top left;
}

#comments dl dt
{
position: relative;
padding-top: 10px;
}

#comments dl dt.avatar img
{
position: absolute;
left: 0;
}

#comments dl dt.avatar2 div
{
text-align: right;
}

#comments dl dt.avatar2 img
{
position: absolute;
right: 0;
width: 120px;
}

#comments dl
{
padding-bottom: 90px;
}

#comments dl dd
{
margin: 0 120px 0 100px;
}

#comments .delete
{
margin-top: 10px;
text-align: right;
}

#comments #pagination li
{
display: inline;
}

#comments .admin li
{
text-align: right;
}

/* SIGNATURE */

#signature
{
background: #FFF url('images/signature_header_tile.gif') repeat-x top left;
text-align: center
}

#signature h2
{
background: url('images/signature_header.gif') no-repeat top left;
}

/* MODERATE */

#moderate
{
padding: 10px;
border: 1px solid #639;
background: #EBD6FF;
}

#moderate a
{
color: #639;
}

#moderate li
{
display: inline;
}

Things Meri has tested out for the Classic stylesheet:

Insert this code to replace the large backdrop at the top of the page. The default is a Barton-like landscape with a house and dog, and the avatar of the person viewing the profile is overlaid on top of it. Replace YOURIMAGEURLHERE with the url of the image you would like to use instead. The image size is 760 pixels wide by 150 pixels tall.


Use these two pieces of code to replace your in-profile avatar with a different image. The first part inserts a background image behind your avatar. The second part makes your avatar transparent/invisible so that you can see the background image.


Use this code in order to change the color of the text and bar right above your in-profile avatar (the part that displays your username).


Use this code to replace the scream , 3nodding , and heart icons that represent whether your wishlist item has been bought, donated, or is being quested for. Replace the YOURIMAGEHERE with the image file you want to use.


Use this code to place an image behind your commenters. Replace the YOURIMAGEHERE with your own image. I believe the image should be the usual avatar file size (120 wide x 150 tall) or smaller for best results. You can use the same image for both lines or you can use two different ones. The second image provided will end up flipped horizontally, so keep this in mind if you're adding text or have some other aspect that would be affected by flipping the image.


Insert this code to put a glow or outline around the avatar of the person viewing the profile. The glow filter also works on other images such as the quest/bought/donated icons. Just insert the line of code before the } and you should be good to go.

I may have missed it, but how do you put up a pic of an Avi edit or something instead of your avi? sweatdrop

EDIT: Nevermind, I found it. sweatdrop

This is awesome!
Thanks for the info 3nodding

^^ Dankie.

Here's a way to change the color and border of the comment quotes. :3

For some reason it's not getting the whole quote box for me gonk Is there more to the code than that, or is my profile just being screwy?