The Arcive of Official vBulletin Modifications Site.

add a background image to your navbits · **Released**: 03-18-2009

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

ArnyVee · #52 03-21-2009, 11:47 PM

Dave, you are THE man! :up:

Thank you so much!

tipoboy · #53 03-21-2009, 11:49 PM

let me know when you've implimented it and i'll have a looky

ArnyVee · #54 03-22-2009, 12:09 AM

Dave, it's a done deal :up:

I have the same background color across the top. Thanks again for your help!

tipoboy · #55 03-22-2009, 12:12 AM

no probs mate just glad to help

RedHacker · #56 03-22-2009, 06:52 PM

I dont worked....

May is problem are: and add this css to your additional css definitions at the bottom of your main css page

Can help me?

tipoboy · #57 03-22-2009, 06:56 PM

go to your:

admincp => styles & templates => style manager => THE SKIN YOUWANT TO SHOW THE MODIFICATION ON => from the drop down box select => main CSS scroll to the bottom where it says additional CSS definitions and add the code there.

RedHacker · #58 03-22-2009, 06:57 PM

Yes and not worked....
The background is blue...

tipoboy · #59 03-22-2009, 07:08 PM

just saying its not worked isnt really helping, could you provide a link to your site, oh and please MARK AS INSTALLED

macc · #60 03-22-2009, 07:48 PM

Thanks tipoboy for your help to get this nice mod to work on my site !

Thanks and regards

macc

RedHacker · #61 03-22-2009, 11:09 PM

The image size must 54*100...?

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06318 seconds Memory Usage 2,330KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (12)bbcode_code (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!