Welcome to Gaia! ::

Reply CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints)
Help customizing color...

Quick Reply

Enter both words below, separated by a space:

Can't read the text? Click here

Submit

chocolat dreams

PostPosted: Mon May 01, 2006 2:37 pm


User Image

As you can see above, how can I change the color of that to match my profile theme color? Thanks.
PostPosted: Mon May 01, 2006 4:49 pm


Well... You could make custom images.

Isaviel Deschain
Lady_Threnody
STATUS BAR CODE This is the new coding for the status bar located above your avatar in the "profile" section of the profile. Complete with hover coding.


#bar
{
background: none top left no-repeat;

}

#bar #onlineButton
{
background: transparent url(ONLINE STATUS IMAGE URL)
color: transparent;
}

#bar #offlineButton
{
background: transparent url(OFFLINE STATUS IMAGE URL) no-repeat;
color: transparent;
}

#bar #hiddenButton
{
background: transparent url(HIDDEN STATUS IMAGE URL) no-repeat;
color: transparennt;
}

#bar #addButton
{
background: transparent url(ADD IMAGE URL) no-repeat;
}

#bar #msgButton
{
background: transparent url(PM IMAGE URL) no-repeat;
}

#bar #tradeButton
{
background: transparent url(TRADE IMAGE URL) no-repeat;
}

#bar #ignoreButton
{
background: transparent url(BLOCK/IGNORE IMAGE URL) no-repeat;
}

#bar a
{
filter: alpha(opacity=0)
opacity:0;
}
#bar a:hover
{
filter: alpha(opacity=0)
opacity:0;
}

#bar a {display: block; height: 0; padding-top: 22px; color: #000; overflow: hidden;}

* html #bar a:link, * html #bar a:visited {height: 22px; height: 0;}

#bar #addButton a {width: 33px; background: transparent url(ADD IMAGE URL) -22px -90px no-repeat;}
#bar #msgButton a {width: 29px; background: transparent url(PM IMAGE URL) -22px -90px no-repeat;}
#bar #tradeButton a {width: 28px; background: transparent url(TRADE IMAGE URL) -22px -90px no-repeat;}
#bar #ignoreButton a {width: 34px; background: transparent url(BLOCK/IGNORE IMAGE URL) -22px -90px no-repeat;}

#bar #addButton a:hover {background-position: 0 0; z-index: 50;}
#bar #msgButton a:hover {background-position: 0 0; z-index: 50;}
#bar #tradeButton a:hover {background-position: 0 0; z-index: 50;}
#bar #ignoreButton a:hover {background-position: 0 0; z-index: 50;}

* html #bar a:hover {height: 22px; height: 0;}


Or you could just filter the images already there.

#bar {filter:mask(#hexcolor)}


Where the text "hexcolor" is replaced with whatever color you'd like the images rendered in.

See also:
http://www.w3schools.com/dhtml/dhtml_css.asp

I've not tested this tag, so I can't tell you how it'll look.

[Kou-T]

Reply
CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints)

 
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum