LJ Navstip Customizations

[sireesanwar]

Account Status: Free
Actions: Customizing the LJ Navstip
Theme: Flexible Squares (not sure if it works with other themes)

Do to changes to LiveJournal this tutorial may no longer work.

The idea behind this tutorial is to change the look of the LJ Navstip at the top which looks something like this...


Here is the coding I've pieced together.
/*-----------Navstip-----------*/

.w-cs DIV {
background: none repeat scroll 0 0 transparent;
float: none;
}

.w-cs .w-cs-userinfo {
background: none repeat scroll 0 0 #23CCBC;
border-right: 1px solid #3A4449;
float: left;
height: 50px;
min-width: 405px;
width: 40%;
}

.w-cs {
color: #000000;
font: 10px/10px 'Arial','Helvetica',sans-serif;
}

.w-cs A:link, .w-cs A:visited, .w-cs A:active, .w-cs A:link B, .w-cs A:visited B, .w-cs A:active B {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
color: #000000 !important;
font: 10px 'Arial','Helvetica',sans-serif !important;
text-decoration: none;
}

.w-cs A:hover, .w-cs A:hover B { color: #ffffff !important; }

.w-cs .w-cs-user-controls .w-cs-group-first, .w-cs .w-cs-group-second {
background: none repeat scroll 0 0 #23CCBC;
}

.w-cs .w-cs-status P {
background: none repeat scroll 0 0 transparent !important;
border: 0 none;
color: #000000;
float: none;
font: 12px/17px 'Arial','Helvetica',sans-serif;
margin: 0;
padding: 0;
}

.w-cs .w-cs-summary {
background: none repeat scroll 0 0 #dddddd;
border-radius: 2px 2px 2px 2px;
float: right;
margin: -1px 0 0;
padding: 1px 7px;
}

.w-cs .w-cs-summary LI.w-cs-i-tokens {
background-position: 0 -788px;
border-right: 1px solid #ffffff;
margin-right: 6px;
padding: 3px 6px 3px 0;
}

.w-cs .w-cs-text {
background: none repeat scroll 0 0 #dddddd;
border: medium none;
border-radius: 2px 2px 2px 2px;
color: #000000 !important;
font-size: 11px;
line-height: 14px;
margin: 0;
padding: 2px 0 3px 5px;
vertical-align: top;
}

.w-cs .w-cs-search .w-cs-text {
border-right: 25px solid #dddddd;
width: 150px;
}


1. First we find the DIV coding which can change the color of the entire navstrip. You'll want to make the background color transparent if you want to change the background color on the individual parts of the navstrip.
.w-cs DIV {
background: none repeat scroll 0 0 #23CCBC;
float: none;
}

2. Here we are going to do a small explanation of the to coding. The LJ Navstrip is broken down into sections you can't always see. First we have the section that encompasses the Userinfo and the token information.



.w-cs .w-cs-userinfo {
background: none repeat scroll 0 0 #23CCBC;
border-right: 1px solid #3A4449;
float: left;
height: 50px;
min-width: 405px;
width: 40%;
}

3. Then  we have the links and the hover option for the entire LJ Navstrip. It is important as you can see that there is coding for both the link and the link B which is the user and community names.

.w-cs {
color: #000000;
font: 10px/10px 'Arial','Helvetica',sans-serif;
}

.w-cs A:link, .w-cs A:visited, .w-cs A:active, .w-cs A:link B, .w-cs A:visited B, .w-cs A:active B {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
color: #000000 !important;
font: 10px 'Arial','Helvetica',sans-serif !important;
text-decoration: none;
}

.w-cs A:hover, .w-cs A:hover B { color: #ffffff !important; }

4. Then we have the first and second groups which will change the background color for the other side of the navstrip

.w-cs .w-cs-user-controls .w-cs-group-first, .w-cs .w-cs-group-second {
background: none repeat scroll 0 0 #23CCBC;
}

5. According to my customizations my bar now looks like this and is clearly not what we want.



The status P function should change that black bar. If you notice I made the background transparent.

.w-cs .w-cs-status P {
background: none repeat scroll 0 0 transparent !important;
border: 0 none;
color: #000000;
float: none;
font: 12px/17px 'Arial','Helvetica',sans-serif;
margin: 0;
padding: 0;
}

It now looks like this:


6. But what if we want to change those white boxes to match the background color?

This code will change the first box which tells your token and message count. There is a little dividing bar between the Tokens and the Messages which can be controlled in the tokens coding below.
.w-cs .w-cs-summary {
background: none repeat scroll 0 0 #23CCBC;
border-radius: 2px 2px 2px 2px;
float: right;
margin: -1px 0 0;
padding: 1px 7px;
}

.w-cs .w-cs-summary LI.w-cs-i-tokens {
background-position: 0 -788px;
border-right: 1px solid #ffffff;
margin-right: 6px;
padding: 3px 6px 3px 0;
}

And here we want to change the color of the search bar and some of the white space around the search icon. The Text coding will change that and the search text coding below the text coding will change the some of the color around the icon.
.w-cs .w-cs-text {
background: none repeat scroll 0 0 #23CCBC;
border: medium none;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF !important;
font-size: 11px;
line-height: 14px;
margin: 0;
padding: 2px 0 3px 5px;
vertical-align: top;
}

.w-cs .w-cs-search .w-cs-text {
border-right: 25px solid #23CCBC;
width: 150px;
}

And now we look like this: