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

[tipoboy]

Originally Posted by RedHacker

The image size must 54*100...?

i'm not getting you mate, could you firstly provide a link to the site where your having the problem?

secondly,a few questions

1. is it the default navbar or have you customized it?
2. did you apply the changes in both your navabr template AND add the additional CSS definitions
3. did you correctly add the path to the image in your CSS

thanks

- dave

[RedHacker]

Cant inside my forum why first must do register..!!!Its locked for un-registered users..!!!The Style is Marvel II

[tipoboy]

Unfortunately i dont have that style nor have i used it, i would be more than happy to take a look if you would pm mewith details of a temporary admin account.

tahnks
- dave

[DobieGillis?]

best mod in a long time! Thanks!

[silvertibur]

how do make your bg img stretchable?

[tipoboy]

i'm unsure, i suppose you could possibly use either div's or a table and use a left and right image with a filler repeating image never had a need for stretchable image there before but it is certainly interesting, if you'd like me to give it a try pm me

[plazzman]

Hey Tipo. Great mod, set it up just fine and it looks fantastic. But I have one problem. The part where it has the page navigation links, the end link doesn't parse.

I don't think I'm explaining it very well, so have a look yourself here

The part where the text is black, how do I fix that?

[tipoboy]

Originally Posted by plazzman

Hey Tipo. Great mod, set it up just fine and it looks fantastic. But I have one problem. The part where it has the page navigation links, the end link doesn't parse.

I don't think I'm explaining it very well, so have a look yourself here

The part where the text is black, how do I fix that?

I would use a custom css attribute to change the color of the text, if you would like me to do it for you please pm me with log in details mate

[plazzman]

Wow, thank you so much for that Tipo. You definitely did the job!

[tipoboy]

Originally Posted by silvertibur

how do make your bg img stretchable?

i found a way but it really would depend on the image you wish to use, if you want to know more PM me