The Gaia header bar guide.

[trezoid]

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!important;}

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!important;
background-image: url(http://www.freewebs.com/trezoid/DSG.png)!important;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
height: 0px!important;
width: 0px!important;
}

code for a black gaia logo

#header_left img
{
padding-top: 0px;
padding-right: 47px;
padding-bottom: 23px;
padding-left: 0px;
background-color: transparent!important;
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!important;
width: 0px!important;
}

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.

[Melchiore]

I'm tempted so heavily to post something like. "First" or just spam this page in general. Its only because I like you that I have these feelings about your thread xD. In any case, I say add some images in and color some of the text red. Especially this part "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."
Where is the pretty pictures and style Mr. Web Design Junkie D= You know I don't mean it offensively. ( or at least by reading this, you do)

Oh and it recently came to my attention that the body influences the bar size ( it should have probably been obvious to me. Thanks for the absolution code. I never thought of that. If only I can get it to realign properly without a top code or something, or would the best thing to use be a positioning top code?

[Cali Soca]

yesyes visual aids would be extremely handy.

and here is the link to a handy Gaia Logo PSD

[TheHardcorePanda]

Thank you for this Trezoid, very helpful. whee

[Seabach]

Verrry Helpful 3nodding
thanks so much!

[Simplistic-Tyranny]

It's against Gaia ToS to remove/alter the gaia logo to be transparent. You might want to include that. P: Not to mention,applying the color values to #gaia_header #header_left and #header_right doesn't work unless you go {background: #xxx !important,} to the value, because otherwise it wont' override. P:

[trezoid]

Simplistic-Tyranny

It's against Gaia ToS to remove/alter the gaia logo to be transparent. You might want to include that. P: Not to mention,applying the color values to #gaia_header #header_left and #header_right doesn't work unless you go {background: #xxx !important,} to the value, because otherwise it wont' override. P:

I have said you can't make it transparent, and I have never had to add !important to anything in the header bar...

[TheHardcorePanda]

I used this

#gaia_header #header_left, #gaia_header #header_right{background:transparent; color:#fff;}

#header_left img
{
padding-top: 0px;
padding-right: 47px;
padding-bottom: 23px;
padding-left: 0px;
background-color: transparent;
background-image: url(http://i25.tinypic.com/33fg86x.png)
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
height: 0px;
width: 0px;
}

And it made my most recent commission very purty. Thank you again!

[trezoid]

TheHardcorePanda

I used this

#gaia_header #header_left, #gaia_header #header_right{background:transparent; color:#fff;}

#header_left img
{
padding-top: 0px;
padding-right: 47px;
padding-bottom: 23px;
padding-left: 0px;
background-color: transparent;
background-image: url(http://i25.tinypic.com/33fg86x.png)
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
height: 0px;
width: 0px;
}

And it made my most recent commission very purty. Thank you again!

No problem biggrin

[Ubel Muffinkuchen]

This will come useful for when I get around to making my own profile.
Thanks.

[Paper Clipp]

Yay, I hope people actually use this guide.
One of my pet peeves when looking at a
custom made profile is a nice profile (or
at least an attempt at a nice profile) and
a stinkin' old ugly black bar that doesn't
match at the top. It's quite easy to change
and makes a big difference in how much
others will like your profile.
In my opinion anyways.

Well, good luck with beautifying your
gaia headers everyone!

[KairuByte]

I'm glad someone made one of these. I've seen quite a few lately that disregard some of the rules. One of the main ones being flash in the nav bar. Smaller items can work, when you specifically set the width of the surrounding div's, but the larger ones tend to cover links when viewed on small screens.

One rule that isnt there, is that you cannot move the bar. It has to stay at the top of the page at all times. So that means you cant move it down 100 pixels, or 1 pixel.

And something that most users should go by, is that no matter what, the nav bar has to remain functional. That means that you cant change the colors of the links to something completely or near invisible. It also means that you cant add insane background images that leaves the user wondering what they are clicking. A little flair behind the link is one thing, a block of random color that makes it impossible to read what you are hovering over is another.

And something you can add to the "other things" section is a nav bar that stays at the top of the screen:

#gaia_header{
position:fixed;
width:100%;
}

A suggestion, is to add a condensed version of your logo replacement. It isnt necessary, but I find that shorter code is always better. But then again, my current theme is confusing on it's own...

#header_left img
{
padding: 0px 47px 23px 0px;
background: url(http://www.freewebs.com/trezoid/DSG.png) transparent top left no-repeat !important;
height: 0px;
width: 0px;
}

Great guide by the way! I hope people start keeping to the rules!

[trezoid]

KairuByte

I'm glad someone made one of these. I've seen quite a few lately that disregard some of the rules. One of the main ones being flash in the nav bar. Smaller items can work, when you specifically set the width of the surrounding div's, but the larger ones tend to cover links when viewed on small screens.

One rule that isnt there, is that you cannot move the bar. It has to stay at the top of the page at all times. So that means you cant move it down 100 pixels, or 1 pixel.

And something that most users should go by, is that no matter what, the nav bar has to remain functional. That means that you cant change the colors of the links to something completely or near invisible. It also means that you cant add insane background images that leaves the user wondering what they are clicking. A little flair behind the link is one thing, a block of random color that makes it impossible to read what you are hovering over is another.

And something you can add to the "other things" section is a nav bar that stays at the top of the screen:

#gaia_header{
position:fixed;
width:100%;
}

A suggestion, is to add a condensed version of your logo replacement. It isnt necessary, but I find that shorter code is always better. But then again, my current theme is confusing on it's own...

#header_left img
{
padding: 0px 47px 23px 0px;
background: url(http://www.freewebs.com/trezoid/DSG.png) transparent top left no-repeat !important;
height: 0px;
width: 0px;
}

Great guide by the way! I hope people start keeping to the rules!

The code I have for the full width bar does exactly the same thing, because the div for it is positioned at top:0;

And that was the post I was most hoping to get, for my own reasons, and to confirm my take on the rules.

[trezoid]

I am going to llama this back to the first page, just before it slides its way off the 3rd.

dramallama

[iAnime Otaku]

the full width of the header really fixed my problem, thanks! biggrin