Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
Navbar Gradient Background Details »
Navbar Gradient Background
Mod Version: 1.00, by Chris-777 (Member) Chris-777 is offline
Developer Last Online: Feb 2016 I like it Show Printable Version Email this Page

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

In the navbar template:

Look for:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace the LAST line with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Click image for larger version

Name:	gradient.jpg
Views:	962
Size:	25.4 KB
ID:	41745   Click image for larger version

Name:	gradient_ff.jpg
Views:	893
Size:	26.5 KB
ID:	41746   Click image for larger version

Name:	gradient_2.jpg
Views:	871
Size:	87.5 KB
ID:	41838  

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Comments
  #2  
Old 29 Jan 2006, 05:21
BoYagoob BoYagoob is offline
 
Join Date: Feb 2005
Very nice
Reply With Quote
  #3  
Old 29 Jan 2006, 09:15
bashy bashy is offline
 
Join Date: Nov 2005
Looks much smother, thank you...Installed
__________________
Bashy

Bashys Place ~ Bashys Hosting
Reply With Quote
  #4  
Old 29 Jan 2006, 12:00
Snake's Avatar
Snake Snake is offline
 
Join Date: Mar 2005
Location: Cleveland, OH
Real name: Josh
That's pretty good. Thanks!
Reply With Quote
  #5  
Old 29 Jan 2006, 21:42
Chris-777's Avatar
Chris-777 Chris-777 is offline
 
Join Date: Jan 2006
Real name: Chris
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.
Reply With Quote
  #6  
Old 04 Feb 2006, 21:05
theo theo is offline
 
Join Date: Apr 2004
i like - installed
Reply With Quote
  #7  
Old 11 Feb 2006, 01:01
Baudman Baudman is offline
 
Join Date: Jan 2006
nice job. Might use it once I start making changes.
__________________
HobbiesElite.com
Reply With Quote
  #8  
Old 11 Feb 2006, 02:42
Mastar's Avatar
Mastar Mastar is offline
 
Join Date: Sep 2005
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.
Reply With Quote
  #9  
Old 02 Aug 2006, 16:16
Chris-777's Avatar
Chris-777 Chris-777 is offline
 
Join Date: Jan 2006
Real name: Chris
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.
Reply With Quote
  #10  
Old 15 Mar 2008, 04:26
DieselMinded's Avatar
DieselMinded DieselMinded is offline
 
Join Date: Mar 2007
How do i do this with an image ?
__________________
Is your forum registered? - https://www.forumregister.com
Reply With Quote
  #11  
Old 15 Mar 2008, 06:21
DieselMinded's Avatar
DieselMinded DieselMinded is offline
 
Join Date: Mar 2007
Never mind i figured it out
__________________
Is your forum registered? - https://www.forumregister.com
Reply With Quote
  #12  
Old 25 Apr 2008, 08:52
Jasem's Avatar
Jasem Jasem is offline
 
Join Date: Feb 2006
Location: www.menokia.com
Thank you
__________________
games
Forum Nokia
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 13:59.

Layout Options | Width: Wide Color: