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

COL NIL SATIS · #92 10-20-2009, 10:30 PM

i would love to add this but in that space i have progamerleagues.com which links to my site??

any ideas how i would remove this??

http://progamerleagues.com/index.php

login=test
pass=test123

you can take a look to see what i mean

any help appreciated

tipoboy · #93 11-08-2009, 10:10 PM

sorry aint been on folks, got a 13 week old boy thats taking a lot of time at the moment, but have now got some spare time,

Quote:

Originally Posted by mgcom

got it working in FF but two requests

1. is it possible that the image can link to a url?

2. can i push the image over to the complete right ?

Please and thanks

you cant have the image as a link if its a background image but it could work if you didnt want your navbits left intact, as to the image being to the complete right add this to the CSS you added:

Code:

align: right;

i think that would work of the top of my head, if you have any problems just let me know and i'll help out...

Quote:

Originally Posted by ahmedipa

very good thing thank you very much

no problem, thanks for using

Quote:

Originally Posted by COL NIL SATIS

i would love to add this but in that space i have progamerleagues.com which links to my site??

any ideas how i would remove this??

http://progamerleagues.com/index.php

login=test
pass=test123

you can take a look to see what i mean

any help appreciated

just tried to take a look and the test account info isnt valid, could you pm me with a new test account and i'd be happy to take a look

championcycle · #94 11-29-2009, 08:24 PM

Hey tipboy im having a small issue. I have added the picture already and for some reason i have a line running threw the whole picture. ive seen some people who have added it the pic is in the background but not mine? any idea what i might be doing wrong? i added the first hack not the stretched, i tried both but to no avail so i removed them both and installed the top one again. same problem. how do i make the forum link top left put itself ontop of the image without the line?

www.ontariomotorcycle.ca

Cheers

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.03728 seconds Memory Usage 2,268KB Queries Executed 19 (?)
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 (13)bbcode_code (3)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 (2)pagenav_pagelink (4)post_thanks_box (4)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (4)post_thanks_postbit_info (3)postbit (4)postbit_onlinestatus (4)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!