Welcome to Gaia! :: View User's Journal | Gaia Journals

So if you've ever made a profile on Gaia you'll know the problem about the Gaia logo.



Yeah, it's black and completely horrible as it means unless you want a black top bar your profile is always going to look completely dorky.

Yes, the rules state you cannot alter the navigation bar save for colour. However, there is something else.

"You may alter the Gaia logo image to remove the black background, or change the black background to a different color, but the logo itself must remain as is." Source

This gives us a ray of hope! You are allowed to alter the logo to remove the black background, as long as the logo is still visible.

The point behind the rule isn't to be unreasonable, it's there so you know you must keep the Gaia logo visible. If you can get rid of the black background without losing the logo, great!

That's what I've done, and what I'm showing you how to do. How to stop that logo background ruining a good layout. I've tested this on Firefox 3, IE 7 and Chrome. Unfortunately I don't have earlier versions of the browser to check on, so if it breaks on a browser please tell me asap.

Basically what we do is replace the logo with our own version, except this version has the background removed.

This should work on classic & current profile themes.

Step One:

Firstly we need to edit and host our logo image. The original image is at the top of this journal, while the transparent image is here.

Please upload it to your own photobucket or host, don't hotlink mine. This version is just transparent, so it should work on any colour, however you may find it looks a little funny on lighter colours. Basically, you need to have a link to the logo you want to use.

Note, this MUST be the Gaia logo with the colour of the background changed only. That's all you're allowed to change, otherwise you risk having your profile theme disabled and it will cost you gold to get it back.

Step Two:

The CSS. This is the code you need to add to make the banner work.

/* Header & Logo Code */

/* Set the header background color and normal color here */
#gaia_header{
background: #182F3B!important;
color: #00334F;
/* If you want a border bottom remove this comment
border-bottom: 2px solid #2C4553 */
}

/* Make the links look pretty */
#gaia_header a {
font-weight: bold;
text-decoration: none;
font-size:10px;
text-transform:lowercase;
font-family: arial;
}

/* Get rid of the logo image as well as the | spacer which looks ugly */
#gaia_header a img, li.spacer {
visibility: hidden;
}
/* Set this to your header background colour */
#gaia_header li{
color: #182F3B;
}
#gaia_header #header_left li {
background: none;
border: none!important;
}
/* Set this to your header background colour */
#gaia_header #header_right {
background: #182F3B!important;
}

/* This is where you stick logo image */
#gaia_header #header_left {
background: url('STICK THE URL HERE') no-repeat 10px!important;
}

/* I can't quite rememeber why this as added, but it dosen't hurt. Stick the URL in here too */
* html #gaia_header #header_left {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src="STICKURLHERE",
sizingMethod="crop")!important;
}


Just edit in the colours you want, and the image URL.

That's it. If you've any questions, please comment them here. Don't PM me about this.


Basically we use a trick. We make the normal logo image invisible and get it out of the way. Then we make the header background the logo indented in so it should be in the same position. That way the hidden logo can still be clicked, but our logo shows up.