[firefox + chrome add-on] lj header

[jun]

HI PEOPLE OF LJ DO YOU HATE THE HEADERS THAT LJ GIVES YOU

I know I do. So I found an add-on for Firefox called Stylish and the code where you can customize the header of your choice to something else OF MORE AWESOMENESS. Like this Gengar background for instance which I've been using since forever.



instructions。

1. Go here and download the Stylish add-on for Firefox. Restart Firefox as prompted and it will be listed in your add-ons.

2. Go to Tools > Add-Ons and find the Stylish add-on. Click on "options" to edit it. OR, find it located at the lower right hand corner of your Firefox and select "Manage styles...".

3. Select "Write New Style" and you will be greeted with a pop-up. Name your style into whatever you want, or just "Livejournal Header Style" if you wish. After you're done, copy and paste this code into the large textarea provided in the pop-up:
/* ================================ GLOBAL STYLE ================================ */

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("livejournal.com") {

/* ~~~~~~~~~~~~~~ CUSTOMIZATION SECTION ~~~~~~~~~~~~~~ */
/* (don't remove the '!important') */

/* --- Images --- */

/* Banner image | max-height 90px */
/* change 'repeat-x' to 'no-repeat' if you don't want the banner image to repeat */

/* Navigation strips */
#navigation {
background: #000000 url(http://img828.imageshack.us/img828/2496/gengarbg.png) top right!important;
background-repeat: repeat!important;
height: 0px!important;
}

#NavBar {
background: url(http://img641.imageshack.us/img641/9681/4535436.png) repeat transparent!important;
height: 27px!important;
position: relative!important;
top: 9px!important;
}

#NavBar a {
}

.NavMenuItem {
}

.NavMenuItem:hover {
background-position: -213px -36px!important;
}

.NavMenuItem a, .NavMenuItem a:hover {
}

.NavMenuItem ul {
}

.NavMenuSubNav li {
}

#NavMenuSearch {
}

#NavMenu {
}

#welcome {
background: url(http://img600.imageshack.us/img600/9681/4535436.png);
background-repeat: no-repeat;
height: 60px;
}

/* ~~~~~~~~~~~~ end CUSTOMIZATION SECTION ~~~~~~~~~~~~~~~ */

/* Logo image */
#Logo { display: none;
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
top: 0px!important;
left: 50%!important;
width: 206px!important;
height: 56px!important;
margin-left: -490px!important;
}

/* User information */

#welcome a {
color: #fff!important;
}

}

4. Click save and VOILA you have Gengars invading your LJ header instead of the banners LJ gives you.

If you want to change the background to something else, locate the code that says
#navigation {
background: #000000 url(http://img828.imageshack.us/img828/2496/gengarbg.png) top right!important;
background-repeat: repeat!important;
height: 0px!important;
}

and change the url to your preferred background. I recommend using a dark background to have a visually pleasing look. And if you don't like the style I provided, you can go here for a list of more styles.

You can change it to something lighter if you please, although I'm not too good at explaining how you can achieve that. You'll have to play around with the codes to figure that out (trust me it's not too hard). This is specifically for people who use Firefox. I'm not sure about other browsers so don't ask me how to find add-ons for the browser you're using, I most likely don't know as much as you do. Actually, it's possible to get it on Chrome too, just follow the instructions here. Thanks je_regret_riens!