Spice up your navigation bar

[JB04]

Thought I'd share this simple bit of spice for your osc catalog, replace the following lines in your stylesheet.css file located about line 25-50 with the ones below, this will turn it into a simple rollover nav bar, much much more pleasing on the eye.

Enjoy!

 

TR.headerNavigation {
 background: #bbc3d3;
}

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #bbc3d3;
 color: #ffffff;
 font-weight : bold;
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 4px;
 padding-bottom: 4px;
}

A.headerNavigation { 
 color: #FFFFFF;
 background: #bbc3d3;
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 4px;
 padding-bottom: 4px;
}

A.headerNavigation:hover {
 color: #ffffff;
 background: #AABBDD;
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 4px;
 padding-bottom: 4px;
}

[ExtraB]

Thought I'd share this simple bit of spice for your osc catalog, replace the following lines in your stylesheet.css file located about line 25-50 with the ones below, this will turn it into a simple rollover nav bar, much much more pleasing on the eye.

Enjoy!

 

TR.headerNavigation {
?background: #bbc3d3;
}

TD.headerNavigation {
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
?background: #bbc3d3;
?color: #ffffff;
?font-weight : bold;
?padding-left: 20px;
?padding-right: 20px;
?padding-top: 4px;
?padding-bottom: 4px;
}

A.headerNavigation { 
?color: #FFFFFF;
?background: #bbc3d3;
?padding-left: 20px;
?padding-right: 20px;
?padding-top: 4px;
?padding-bottom: 4px;
}

A.headerNavigation:hover {
?color: #ffffff;
?background: #AABBDD;
?padding-left: 20px;
?padding-right: 20px;
?padding-top: 4px;
?padding-bottom: 4px;
}

<{POST_SNAPBACK}>

 

Do you have an example site we can see this running on?

 

Thanks

Eric B

[JB04]

No soz, just back up your origanal then copy it to see if you like it, this can be extended further with the use of a link in a table row with the appropiate class set.