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).

[BoYagoob]

Very nice

[bashy]

Looks much smother, thank you...Installed

[Snake]

That's pretty good. Thanks!

Thanks guys.

I added another screenshot of it in use on my actual site. My gradient is a bit dark due to my theme being mostly dark colors, but it should give a better idea of what this does.

[theo]

i like - installed

[Baudman]

nice job. Might use it once I start making changes.

[Mastar]

I like it but I have a request... Can you tell me how to make it like:

Black faded into red then back into black?

So that both ends will be the same color and the middle will be different.

Originally Posted by Mastar

I like it but I have a request... Can you tell me how to make it like:

Black faded into red then back into black?

So that both ends will be the same color and the middle will be different.

You might be able to do that by adding an additional cell to the row and sizing them the same percentage. I'll have a go at it and post back if I can figure it out. I'm hoping to update this hack soon so that it works in FF as well.

[DieselMinded]

How do i do this with an image ?