Introduction
The gaia header bar, at the top of every profile, has been getting quite a bit of discussion lately, with much debate going on about what you can and can't do with it, so I am going to clarify some issues with my understanding of the rules, and then go on to show you a bit about changing the bar within those rules to allow you to make it fit better with your profile.
Rules
The general guideline that appears to have become the rule is that the gaia logo must remain visible in the top bar. this means that you can't remove it entirely, and you can't make it nearly transparent.
What you can do, and something that a lot of people don't realise, is that you can replace it with an version of the logo without a background. More on that later.
Recently, it has also become apparent that you can't add anything to that bar which may under any circumstances obscure one of the links in the bar.
It must also remain at the top of the profile, and can't be moved.
Also, the whole bar must remain totally visible and functional. This means that you can't make the link color the same as the background color, and you can't add an image underneath that makes it hard to tell what you are clicking.
ON TO THE CSS!
Selectors
The selectors you can use to alter the top bar are:
#gaia_header (This the whole top bar, and sets width, overall border, and height, but not colors)
#gaia_header #header_left, and #gaia_header #header_right (these are the left and right sides of the bar, and can be used to change the color of the bar)
#gaia_header a(this is the links in the header)
and #header_left img (this is the actual logo)
Coloring the bar
The there are 2 main ways of coloring the bar, and both work just fine.
The first, and arguably the easiest, is to apply color values to #gaia_header #header_left, and #gaia_header #header_right, eg
Quote:
#gaia_header #header_left, #gaia_header #header_right{background-color:#1f1f1f;color:#00ffff;}
this makes the header a dark grey, with bright aqua dividers. you can then change the links using #gaia_header a.
The second method for coloring the bar is to use a background image. this is just a matter of setting a transparent background on the selectors, and then making sure your image is wide enough.
The logo
for this section, I will simply offer the code I use to you all, and offer you the image I use. Just remember, the logo must remain completely visible, so use the black version only on lightly colored profiles, and the white logo on only darkly colored profiles.
code for a white gaia logo
#header_left img
{
padding-top: 0px;
padding-right: 47px;
padding-bottom: 23px;
padding-left: 0px;
background-color: transparent;
background-image: url(http://www.freewebs.com/trezoid/DSG.png)!important;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
height: 0px;
width: 0px;
}
code for a black gaia logo
#header_left img
{
padding-top: 0px;
padding-right: 47px;
padding-bottom: 23px;
padding-left: 0px;
background-color: transparent;
background-image: url(http://i97.photobucket.com/albums/l210/zaned06/gaia.png)!important;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
height: 0px;
width: 0px;
}
Other things to do
More stuff added.
full width bar, despite body being narrower (gaia header is situated in the body)
Full width header
#gaia_header{position:absolute; width:100%;}
full width and always at the top of the persons screen, no matter how far down the profile they scroll.
Floating header bar
#gaia_header{
position:fixed;
width:100%;
}
Closing
That was my super brief guide to the gaia header. There isn't actually very much to say, but this will hopefully clear up any issues people have with it.
100
100
100
