Basic CSS Profile Codes | Page 1 | Editors Resources & Help Desk | Guild Forums

Battleaxe

Offline

Posted: Fri Mar 31, 2006 8:44 pm

Basic CSS Profile Codes

The following is a BASIC guide on how to customize your profile. If you don't find what you're looking for in this guide, please refer to these helpful threads:

CSS: Manipulating Official Themes
by Meriko
CSS Profile Codes Tutorial
by Kahime
[Simple Tutorial] Gaia Extended Profiles - Custom CSS
by Lord-of-the-flies
Multimedia - YouTube
by o0Nemo0o

I am not an expert on CSS.... I used these 3 threads to create the code I used for my profile. 3nodding

Posted: Fri Mar 31, 2006 8:54 pm

Here is the code that I used for my profile. You need to set the theme to "blocks" and paste the code into the theme override. An explanation on what each part means is in the next post. 3nodding

#content
{ background: #XXXXXX }

#profile, #details, #wishlist, #about, #friends, #journal, #multimedia, #comments, #signature
{ border-color: #XXXXXX; border: thin #XXXXXX;}

#profile, #details, #wishlist, #about, #friends, #journal, #multimedia, #comments, #signature
{ background: #XXXXXX; }

#extendedProfileBody #header h1
{ background: url(http://BLAHBLAH) }

#wishlist .questing
{
background: url(http://BLAHBLAH) top right no-repeat;
}

#wishlist .donated
{
background: url(http://BLAHBLAH) top right no-repeat;
}

#wishlist .bought
{
background: url(http://BLAHBLAH) top right no-repeat;
}

#comments dl dt.avatar img
{
background: url(http://BLAHBLAH) no-repeat;
}

#comments dl dt.avatar2 img
{
filter: fliph;
background: url(http://BLAHBLAH) no-repeat;
}

#profile h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#details h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#wishlist h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#about h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#friends h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#journal h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#comments h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#signature h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#multimedia h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

.caption:before,.caption:after,.caption2:before,.caption2:after
{
display:none;
}
.caption. message,.caption2 .message
{
background:none;
}

Battleaxe

Offline

Battleaxe

Offline

Posted: Fri Mar 31, 2006 9:19 pm

#content
{ background: #XXXXXX }

This section determines the background color of your profile. This is the space between the section boxes. Replace the XXXXXX with the color code you want.

Don't know color codes? Click on this link for an easy listing: Hex Hub

--------------------------------------------------------------------------------

#profile, #details, #wishlist, #about, #friends, #journal, #multimedia, #comments, #signature
{ border-color: #XXXXXX; border: thin #XXXXXX;}

This section changes the border color of each section in your profile. Replace the XXXXXX with the color code you want. (use the same code)

--------------------------------------------------------------------------------

#profile, #details, #wishlist, #about, #friends, #journal, #multimedia, #comments, #signature
{ background: #XXXXXX; }

This section changes the background color of the sections in your profile. Replace the XXXXXX with the color code you want.

--------------------------------------------------------------------------------

#extendedProfileBody #header h1
{ background: url(http://BLAHBLAH) }

This section replaces the main header of your profile. Replace the BLAHBLAH with the url of your header picture.

The dimensions for the header is 760 x 150 pixels. Or you can use the template provided in the next post.

--------------------------------------------------------------------------------

#wishlist .questing
{
background: url(http://BLAHBLAH) top right no-repeat;
}

#wishlist .donated
{
background: url(http://BLAHBLAH) top right no-repeat;
}

#wishlist .bought
{
background: url(http://BLAHBLAH) top right no-repeat;
}

This section replaces your wishlist images for questing, donated, and bought items. Replace the BLAHBLAH with the url for each image.

--------------------------------------------------------------------------------

#comments dl dt.avatar img
{
background: url(http://BLAHBLAH) no-repeat;
}

#comments dl dt.avatar2 img
{
filter: fliph;
background: url(http://BLAHBLAH) no-repeat;
}

This section replaces the image you see behind the avis who comment on your profile. Replace the BLAHBLAH with the url of the image you want to use.

--------------------------------------------------------------------------------

#profile h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#details h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#wishlist h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#about h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#friends h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#journal h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#comments h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#signature h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

#multimedia h2
{ background: url(http://BLAHBLAH) top left no-repeat; font-size:0px; }

This section replaces the header for the various sections in your profile. (note: #profile h2 is the header that your username should be on). Replace the BLAHBLAHs with the url for each header.

The short headers measure at 230 x 40 pixels.
The long headers measure at 500 x 40 pixels.
Or you can use the templates I provided in the next post. 3nodding

Posted: Fri Mar 31, 2006 9:22 pm

Templates

for the main header
click for main header template

for the section headers
User Image

for your quilt piece
User Image

Battleaxe

Offline

Battleaxe

Offline

Posted: Fri Mar 31, 2006 9:29 pm

Oki, everyone! I hope this helps you! xd

Posted: Fri Mar 31, 2006 9:30 pm

heart

Battleaxe

Offline

Battleaxe

Offline

Posted: Fri Mar 31, 2006 9:31 pm

heart

Posted: Sat Apr 01, 2006 1:19 pm

OMYGARS I LOVE YOU

Now I have something to do today blaugh Besides my homework that is...

If I have any wierd questions, would you mind if I PM'd you or posted in here, whichever you prefer....

Madame Solo

Offline

Battleaxe

Offline

Posted: Sat Apr 01, 2006 2:30 pm

I don't mind PM's.. it's probably better than posting in here. xd

Posted: Sat Apr 01, 2006 8:18 pm

Awesome, I think I'm going to eventually work on a Star Wars theme (imagine that)
I"m super excited twisted

Madame Solo

Offline

Carandra
Captain

Beloved Lunatic

Offline

Posted: Sat Aug 05, 2006 2:45 am

i'm going to try this.... and i'm not just trying to convice myself that i can.

i will remember this *writes a mental note* sweatdrop

Posted: Thu Aug 31, 2006 5:03 pm

um... i'm trying to make a theme for this website [onto my profile]
www.geocities.com/pkw_softworks
and in the background I need to add this
User Image

- and the symbol User Image

and btw I'm edditing the Legato Theme from www.tektek.org/themes

What I have done

#extendedProfileBody #header h1
{
background: url(http://i46.photobucket.com/albums/f133/pkw_softworks/PKW/softworks2.jpg)
border:none;
border: 3px solid #33ff00;
}
#header {position: relative; border-right: 1px;}
#extendedProfileBody{cursor: crosshair;}

a:link,a:active,a:visited,a:hover {cursor: crosshair}
BODY{
background: #33ff00 url(http://i46.photobucket.com/albums/f133/pkw_softworks/PKW/backworks.jpg) repeat fixed; position: absolute;
width: 760px;
left: 50%;
margin-left: -380px;
cursor: move;
}
#content
{
border: none;
background: none;
}
#content #main{
padding-left: 10px;
}
.section {
font: 10px georgia;
font-weight:bold
background-color: #000000;
background: url('')
border: 1px solid #33ff00;
padding-top: 10px;
}
.section h2{
color: #33ff00;
font-size: 14px;
text-indent: -3000px; }
#wishlist,#about,#friends,#comments,#journal,#multimedia,#details,#profile,#signature{background: #000000 url()}
#about,#friends,#comments,#multimedia,#signature,#journal{
width: 480px;
}
body
{
font-family: georgia;
font-size: 10pt;
color: #33ff00
}

#profile{
background-color:#000000;
url('')
}
#profile h2
{
background: url(http://img89.imageshack.us/img89/1182/legatoprofileheader1nc.jpg) top left no-repeat;
text-indent: 85px;
}
#profile
{
color:#33ff00;
}

#details h2
{
background: url(http://img89.imageshack.us/img89/1182/legatoprofileheader1nc.jpg) top left no-repeat;
text-indent: 165px;
}

#about h2
{
background: url(http://img95.imageshack.us/img95/1390/legatoprofileheader21fy.jpg) top left no-repeat;
text-indent: 245px;
}

#friends #friendGroup li{border-right:0px;}
#friends h2
{
background: url(http://img95.imageshack.us/img95/1390/legatoprofileheader21fy.jpg) top left no-repeat;
text-indent: 230px;
}

#wishlist h2
{
background: url(http://img89.imageshack.us/img89/1182/legatoprofileheader1nc.jpg) top left no-repeat;
text-indent: 85px;
}

#comments h2
{
background: url(http://img95.imageshack.us/img95/1390/legatoprofileheader21fy.jpg) top left no-repeat;
text-indent: 230px;
}

.caption { background: transparent url()
border: 1px solid #6510AB; color: #6510AB; }
.caption:before { content: url()
background: url() top right no-repeat;
}
.caption:after { content: url()
background: url( image URL goes here ) bottom right no-repeat; }
.caption .message { background: url() top left no-repeat; }

.caption2 { background: transparent url()
border: 1px solid #6510AB; color: #6510AB; }
.caption2:before { content: url()
background: url() top right no-repeat; }
.caption2:after { content: url()
background: url() bottom right no-repeat; }
.caption2 .message { background: url() top right no-repeat; }

#comments dl dt.avatar img
{
background: url(http://img87.imageshack.us/img87/9354/legatoprofilecommentbackground.jpg) no-repeat;
}
#comments dl dt.avatar2 img
{
background: url(http://img87.imageshack.us/img87/9354/legatoprofilecommentbackground.jpg) no-repeat;
}

#journal h2
{
background: url(http://img95.imageshack.us/img95/1390/legatoprofileheader21fy.jpg) top left no-repeat;
text-indent: 230px;
}

#mulitmedia h2
{
background: url(http://img95.imageshack.us/img95/1390/legatoprofileheader21fy.jpg) top left no-repeat;
text-indent: 230px;
}

#signature h2
{
background: url(http://img95.imageshack.us/img95/1390/legatoprofileheader21fy.jpg) top left no-repeat;
text-indent: 230px;
}

}
a:link,a:active,a:visited,a:hover {
font: 10px georgia;
font-weight: bold;
cursor: move;
}

a:link { color:#6510AB; font-weight: bold; text-decoration: none}
a:visited { color: #6510AB; font-weight: bold; text-decoration: none}
a:active { color: #6510AB; font-weight: bold; text-decoration: underline overline}
a:hover { color: #6510AB; font-weight: bold; text-decoration: line-through}

Sivalion

Offline

Battleaxe

Offline

Posted: Sun Oct 29, 2006 12:31 am

Wow.... that looks.... complicated. sweatdrop

I'm sorry, but my coding knowledge doesn't extend past how to do my profile. I want to help, but I think you'd probably be better off searching the gaia Q&A forum. That's where I got most of my coding questions answered.

Good luck! 3nodding

Posted: Tue Jan 30, 2007 10:32 am

this my sound stupid, but can you cange the image that comes up as your avatar?

Bex O

Offline

Welcome to Gaia! ::

Gaia Guilds

The Avatar Editors Guild

Quick Reply

More Information