Different Color Header Links

[sireesanwar]

Account Status: Free
Actions: Making you header links (website, recent entries, calendar, friends, profile) different colors
Theme: Flexible Squares (not sure if it works with other themes)
Coding provided to me by mercscilla  from street_of_mercy .

Example

Typically you will see the below coding for a layout:

/*---------------Header--------------*/
#header {
width: 800px;
position: relative;
height: 40px;
color: #eeeeee;
padding: 1px 0px 0px 0px;
margin-top: 0px;
margin-bottom: 10px;
font-family: "Verdana", Arial;
font-size: 12px !important;
text-align: center;
letter-spacing: 1px;
text-transform: normal;
clear: both;
background-color: transparent;
}

div#header a, div#header a:link, div#header a:visited {
color: #eeeeee;
padding: 0px 0px 0px 0px;
text-decoration: none;
}

div#header a:hover {
padding: 0px 0px 0px 0px;
text-decoration: none;
}

div#header a, div#header a:link, div#header a:visited

ul.navheader {
padding: 5px 0px 0px 0px;
background-color: transparent !important;
margin: 0px;
}

ul.navheader li {
display: inline;
padding: 5px 0px 0px 0px;
background-color: transparent !important;
margin: 0 2px;
}

The first section being the actual text and color of things when they are not links. Then it follows with the link coloring and then the hover coloring. This is the basic form of header coding.

Multi-Color Header Links:

/*----------Header Colors----------*/

body.lj-view-recent div#header li.view { color: #555555 !Important; padding: 0px 0px 10px 0px;
text-decoration: none;
}
div#header a[href*=".livejournal.com/"] { color: #9363C6; border-bottom: 2px solid #9363C6 !Important; padding: 5px 10px 2px 10px; text-decoration: none;
}
div#header a:hover[href*=".livejournal.com/"] { color: #9363C6; border-bottom: 2px solid #444444 !Important; text-decoration: none;
}

1. The above code will start off the Header Color Section. The "Recent View" coding is what any links will look like when they are not active (ie Recent Entires). It is then followed by the link color and hover color for Recent Entires.

div#header a[href*="/calendar"] { color: #89c1e2; border-bottom: 2px solid #89c1e2 !Important; padding: 5px 10px 2px 10px; text-decoration: none;
}
div#header a:hover[href*="/calendar"], body.lj-view-archive div#header li.view { color: #89c1e2;
border-bottom: 2px solid #444444 !Important; text-decoration: none;
}

2. After that coding you will want to add the calendar link. This has both the link color and hover color coding.

div#header a[href*="/friends"] { color: #9ada5b;
border-bottom: 2px solid #9ada5b !Important; padding: 5px 10px 2px 10px; text-decoration: none;
}
div#header a:hover[href*="/friends"], body.lj-view-friends div#header li.view { color: #9ada5b;
border-bottom: 2px solid #444444 !Important; text-decoration: none;
}

3. After that coding you will want to add the friends link. This has both the link color and hover color coding.

div#header a[href*="/profile" ] { color: #e2b13c;
border-bottom: 2px solid #e2b13c !Important; padding: 5px 10px 2px 10px; text-decoration: none;
}
div#header a:hover[href*="/profile"] { color: #e2b13c; border-bottom: 2px solid #444444 !Important; text-decoration: none;
}

4. After that coding you will want to add the profile link. This has both the link color and hover color coding.

div#header a[href*="URL HERE"] { color: #ed577c; border-bottom: 2px solid #ed577c !Important; padding: 5px 10px 2px 10px; text-decoration: none;
}
div#header a:hover[href*="URL HERE"] { color: #ed577c; border-bottom: 2px solid #444444 !Important; text-decoration: none;
}

5. Last you will want to enter the above code for your website or external link. This coding must be at the bottom of this section of the coding to ensure it working properly. You will notice in the coding that it says "URL HERE". This is where you will copy your external link exactly. If the link is not exactly the same the coding will not function.

This coding can be used multiple times for Paid users who have added extra links to their header navigation. You only need to make sure each URL is exact.

Your header links should look similar to this EXAMPLE.