Forum Display Enhancements - add a background image to your navbits

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:

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

and replace with:

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

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

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

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

and replace with:

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

next find:

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

and replace with:

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

next find:

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

and replace with:

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

next find:

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

and replace with:

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

.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

[legion!]

Nice mod i installed it

[tipoboy]

Originally Posted by mdelcour

why dosen't yours stretch all the way to go behind the log in box as well. Honestly this has been around for a very long time:

http://www.vbulletin.com/forum/showthread.php?t=105189

Well firstly let me point out that the way i've done it, with that image, is the way i wanted it, i didnt want the image accross the whole navbit! Besides its fairly simple if you wanted it accross the whole navbit, use a bigger image!

Secondly as i pointed out i made this mod as it was requested on VB.ORG, i didnt look on vb.COM. i realise its a very simple mod compared to most around here but there are people out there who haven't got a scooby about how to do this kind of stuff.

Thirdly why have you actually posted in this mod threa., If it doesnt suit your needs, why even post a responce, i'm not a designer or a coder just a guy who's trying to learn how to code and quite frankly your answer, might just be the reason why i dont help anyone again!

Thabnks for your input either way

- dave

[tipoboy]

Originally Posted by SpeedyHire

nice little mod
well done bud.
would be good if you could make it extend along past the Welcome back bla bla box aswell.
never the less thank you

i'll play about and get back to you

[SpeedyHire]

Originally Posted by tipoboy

i'll play about and get back to you

Thank you tipoboy
btw ignore mdelcour dont see him releasing anything or helping anyone.
nice work m8

[tipoboy]

Updated: now added instructions on how to have it stretch through your welcome back pm column!

[SpeedyHire]

top job m8
well done and again big thanx

[SpeedyHire]

image dont seem to want to resize with the screen width, got a white space on the right side

[tipoboy]

could you provide a link so i can have a looky

[SpeedyHire]

message sent

[SpeedyHire]

ha fixed it
thanx anyway