PDA

View Full Version : Navbar Gradient Background


Chris-777
29 Jan 2006, 01:14
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=#startco lor,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
29 Jan 2006, 05:21
Very nice

bashy
29 Jan 2006, 09:15
Looks much smother, thank you...Installed

Snake
29 Jan 2006, 12:00
That's pretty good. Thanks!

Chris-777
29 Jan 2006, 21:42
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
04 Feb 2006, 21:05
i like - installed :)

Baudman
11 Feb 2006, 01:01
nice job. Might use it once I start making changes. :)

Mastar
11 Feb 2006, 02:42
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.

Chris-777
02 Aug 2006, 16:16
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
15 Mar 2008, 04:26
How do i do this with an image ?

DieselMinded
15 Mar 2008, 06:21
Never mind i figured it out

Jasem
25 Apr 2008, 08:52
Thank you