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

tipoboy · #42 03-21-2009, 09:28 PM

yea i'm using IE are you wanting the navbits removed or aligned right?

- dave

ArnyVee · #43 03-21-2009, 09:34 PM

Hmm....can you tell me how to do each so that I can try and see if it looks good enough to keep? Please

Edited: Or, do you think that it would look better with the image itself aligned to the right since the left side of the image is that gray color and would blend in better with the background?

tipoboy · #44 03-21-2009, 09:39 PM

to remove all you need to do is remove this code:

Code:

<if condition="is_array($navbits)">
   <table cellpadding="0" cellspacing="0" border="0">
   <tr valign="bottom">
    <td><a href="#" onclick="history.back(1); return false;"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
    <td>&nbsp;</td>
    <td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
   </tr>
   <tr>
    <td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><if condition="$_SERVER['REQUEST_METHOD'] == 'POST'"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="" border="0" /><else /><a href="$navbar_reloadurl"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="$vbphrase[reload_this_page]" border="0" /></a></if> <strong>$navbits[lastelement]</strong></td>
   </tr>
   </table>
  <else />
   <div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
  </if>

and repalce with:

Code:

&nbsp;

to align right i'll work out in a minute, i'm going to try and use a css to be browser compliant

tipoboy · #45 03-21-2009, 10:02 PM

could you provide your navbar template please ArnyVee

ArnyVee · #46 03-21-2009, 10:09 PM

Sent you an email with the navbar template Dave!

Thanks for your help! :up:

tipoboy · #47 03-21-2009, 10:56 PM

Quote:

Originally Posted by ArnyVee

Hmm....can you tell me how to do each so that I can try and see if it looks good enough to keep? Please

Edited: Or, do you think that it would look better with the image itself aligned to the right since the left side of the image is that gray color and would blend in better with the background?

arny unfortunately i could quite manage to get the nav bits to move to the right whatever i did the navbit_start.gif wouldn't move(see screeny1) the only way i could resolve was to remove the navbit_start.gif cell from the table (screeny2)

screeny 1:

screeny 2:

sorry i cant help further like i said i'm still trying to learn myself

- dave

ArnyVee · #48 03-21-2009, 11:14 PM

No problem Dave! Thanks for giving it a go! :up:

I appreciate you trying to assist me. I'm going to remove it and see if I don't get too many complaints from folks

Thanks again!

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

no prob arny just sorry i couldnt help further, hopefully someone with a bit more knoledge might be able to help

- dave

ArnyVee · #50 03-21-2009, 11:31 PM

Dave, I removed all of it, so now it's just a cleaner look.

Now, I have to figure out how to put that same gray color behind the 'welcome' section and the other two parts (the 'feed' part, I think I have, but not the others).

tipoboy · #51 03-21-2009, 11:44 PM

all you need to do is add some css attributes to your additional css at the bottom of your main css page add:

Code:

.altbgcolor {
 color: #000000;
 background-color: #CCCCCC;
}

and in your navbar template find:

Code:

<td class="alt2">
<DIV ALIGN=RIGHT>

and replace with:

Code:

<td class="altbgcolor">
<DIV ALIGN=RIGHT>

and find:

Code:

<td class="alt2">
<a href="http://www.waltdisneyboards.com/external.php?type=rss2"><img
src="http://www.waltdisneyboards.com/imag.../feed-icon.gif" border="0" alt="WDB
News Feed" />

and replace with:

Code:

<td class="altbgcolor">
<a href="http://www.waltdisneyboards.com/external.php?type=rss2"><img
src="http://www.waltdisneyboards.com/imag.../feed-icon.gif" border="0" alt="WDB
News Feed" />

and if you want to change the welcome back pm box color too find:

Code:

<td class="alt2" nowrap="nowrap">

and replace with:

Code:

<td class="altbgcolor" nowrap="nowrap">

and find:

Code:

<td class="alt2" nowrap="nowrap" style="padding:0px">

and replace with:

Code:

<td class="altbgcolor" nowrap="nowrap" style="padding:0px">

and that should make your colour similar arny

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04690 seconds Memory Usage 2,347KB 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 (23)bbcode_code (1)bbcode_quote (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!