add a background image to your navbits

add a background image to your navbits

Mod Version: 1.00, by tipoboy

vB Version: 3.8.1	Rating: (8 votes - 5.00 average)	Installs: 42
Released: 20 Mar 2009	Last Update: Never	Downloads: 19
Not Supported Additional Files Re-usable Code Translations

Just a simple mod that will allow you to add a background image to your navbit table, as per this request.

in your navbar template find the first instance of:

Code:

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

and replace with:

Code:

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

and add this css to your additional css definitions at the bottom of your main css page

Code:

.altbg {
    background: #FFFFFF url(wherever your image is located.gif) no-repeat top left; 
    height: 54px;
    width: 100%;
    vertical-align: text-bottom;
}

Remember to replace the RED writing with where your navbits background image is located, and you can change the background color (the blue text) from #FFFFFF to any colour you want for example if you have a black skin use #000000. If your using the original Navbar then an image height of 60px is a good size.

This is my first mod so please go gentle

screenshot:

Update:

As some of you were asking how to have this image stretch through your welcome back column also here's how i've done it:

in your navbar template find:

Code:

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

and replace with:

Code:

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

next find:

Code:

<td class="alt1" width="100%">
  <if condition="is_array($navbits)">

and replace with:

Code:

<td width="100%">
  <if condition="is_array($navbits)">

next find:

Code:

<if condition="$show['member']">
 <td class="alt2" nowrap="nowrap">

and replace with:

Code:

<if condition="$show['member']">
 <td nowrap="nowrap">

next find:

Code:

<else />
<td class="alt2" nowrap="nowrap" style="padding:0px">
  <!-- login form -->

and replace with:

Code:

<else />
<td nowrap="nowrap" style="padding:0px">
  <!-- login form -->

now because we have removed the tborder css attribute we need to add it to out altbg css so, add this to your css if you want to strech your image:

Code:

.altbg {
    background: #FFFFFF url(streetrod/misc/navbits_bg.gif) repeat-x top left; 
    height: 54px;
    width: 100%;
    vertical-align: text-bottom;
    border: 1px solid #0B198C;
}

and replace the code in red with your desired border colour and the blue with the desired background colour

screensot of streched image:

all done hope this helps!

PLEASE NOTE THE BACKGROUND IMAGE SIZE WILL REMAIN CONSTANT, MEANING IT WILL NOT CHANGE WITH YOUR BROWSER SIZE, ALL THAT WILL HAPPEN IS THE CELL WILL CHANGE SIZE AND EITHER LOOSE SOME OF THE IMAGE OR FILL WITH THE BACKGROUND COLOUR, THE IMAGE SIZE ALL DEPENDS ON THE SIZE OF THE IMAGE YOU'VE CREATED, THEREFOR IF ITS eg 468 WIDE AFTER THE CELL IS LESS THAN 468PX WIDE IT WILL CLIP YOUR BACKGROUND IMAGE, I HOPE THIS CLARIFY'S THINGS A BIT

Download

No files for download.

vBulletin LTS