Navbar Gradient Background

Navbar Gradient Background

Mod Version: 1.00, by ()

This modification is in the archives.

vB Version: 3.5.3	Rating: (1 vote - 5.00 average)	Installs: 10
Released: 29 Jan 2006	Last Update: 30 Jan 2006	Downloads: 25
Not Supported Template Edits Is in Beta Stage

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:

Code:

/***** 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:

Code:

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

In the navbar template:

Look for:

Code:

<!-- 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:

Code:

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

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

Download

This modification is archived and cannot be downloaded.

Screenshots

vBulletin LTS