Navbar Gradient Background

Navbar Gradient Background

What it does: Adds a gradient background to the breadcrumb area of your navbar using CSS.

Time to install: 2 Minutes
Difficulty: Easy
Templates: 1
CSS Edit: 1
Demo: http://www.sevenstring.org

Note: This only works in IE, but has a secondary tag added so that Firefox displays the standard non-gradient background. It uses DXImageTransform, which will most likely not validate. That said, this hack will remain beta until I find a better way to do it.

AdminCP -> Styles & Templates -> Style Manager -> Your Style -> Main CSS -> Additional CSS Definitions

At the bottom, add:

/***** navbar gradient *****/
.navgradient
{
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#startcolor,endColorStr=#endcolor);
background: #defaultcolor;
}

• startcolor: The start of the gradient, left side.
• endcolor: The finish color, right side.
• defaultcolor: The color that will display, non-gradient, in other browsers.

Example:

/***** navbar gradient *****/
.navgradient
{
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#333333,endColorStr=#000000);
background: #333333;
}

In the navbar template:

Look for:

<!-- breadcrumb, login, pm info -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
	<td class="alt1" width="100%">

Replace the LAST line with:

<td class="navgradient" width="100%">

Screenshots attached in IE (gradient showing) and Firefox (solid color).

[DieselMinded]

Never mind i figured it out

[Jasem]

Thank you