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]

post your image here and i'll do it for you :P

[macc]

Originally Posted by tipoboy

without installing the modification but looking on the authors web site as i cant seem to get on yours, i would suggest trying to remove the class="alt2".

so in the template edit for the rss feed find

<!-- AG Advanced RSS Reader -->
<td class="alt2">

and replace with:

<!-- AG Advanced RSS Reader -->
<td>

and see how that helps

make what you said but no result - no picture come in navbar ... can you take a look?

regards

macc

[ArnyVee]

Originally Posted by tipoboy

post your image here and i'll do it for you :P

Thanks so much! :up:

Here's the pic:

What is the recommended size of the pic to normally fit in that space?

[tipoboy]

Originally Posted by macc

make what you said but no result - no picture come in navbar ... can you take a look?

regards

macc

pm sent

[tipoboy]

Originally Posted by ArnyVee

Thanks so much! :up:

Here's the pic:

What is the recommended size of the pic to normally fit in that space?

i used a 468x60 image but i see you have the rss feeds mod too so i just made it 468x119 for you

image below:

[ArnyVee]

Thanks so much Tipoboy! :up:

How can I have the actual text align to the bottom instead of the top? It's covering Walt's face and I'd rather have it towards the bottom and see if that looks better.

Now, I just need to do the 'stretch' thing to get it all the way across in that space. (will that stretch the image and make it look odd?)

Edited: Or, is there a way to center the image within that space available?

[tipoboy]

Originally Posted by ArnyVee

Thanks so much Tipoboy! :up:

How can I have the actual text align to the bottom instead of the top? It's covering Walt's face and I'd rather have it towards the bottom and see if that looks better.

Now, I just need to do the 'stretch' thing to get it all the way across in that space. (will that stretch the image and make it look odd?)

Edited: Or, is there a way to center the image within that space available?

no the image will stay at the 468px image size. I'll have a look at moving the text as i removed it in my forum, as i didnt like it too much, but none the less i'll have a look for you.

Personally unless you're using a tiled background the strech thing doesnt look good but thats only my opinion, each to their own

[ArnyVee]

Originally Posted by tipoboy

no the image will stay at the 468px image size. I'll have a look at moving the text as i removed it in my forum, as i didnt like it too much, but none the less i'll have a look for you.

Personally unless you're using a tiled background the strech thing doesnt look good but thats only my opinion, each to their own

Yeah, I don't want that 'stretched' look come to think about it.

Can you give the instructions on how to remove the text and another option to move it down or right aligned or something?

[tipoboy]

Originally Posted by ArnyVee

Thanks so much Tipoboy! :up:

How can I have the actual text align to the bottom instead of the top? It's covering Walt's face and I'd rather have it towards the bottom and see if that looks better.

Now, I just need to do the 'stretch' thing to get it all the way across in that space. (will that stretch the image and make it look odd?)

Edited: Or, is there a way to center the image within that space available?

just had a look on your sit and it looks to me that your navbits text is aligned to the bottom, is this the writing you are reffering to?

[ArnyVee]

See screenshot....It's actually sitting at the top, but I'm using FireFox. Are you using a different browser?

Attachment 96824