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 · #22 03-20-2009, 09:47 PM

Quote:

Originally Posted by SpeedyHire

ha fixed it

thanx anyway

personally i would move your soldier guy over so if things resize he'll not get covered by the welcome/pm column, just a wee suggestion its entirely up to you, just glad i can help

- dave

Reycer · #23 03-21-2009, 12:23 AM

Quote:

Originally Posted by SpeedyHire

Thank you tipoboy
btw ignore mdelcour dont see him releasing anything or helping anyone.
nice work m8

I wasn't trying to be rude...I was just sayin...

BTW, look harder....

ctforumsdotorg · #24 03-21-2009, 03:27 AM

hey for thoose who want the background color not to be anything, but stay the original theme, use this code

Code:

.altbg {
 background: url(Image url.gif) no-repeat top left; 
    height: 54px;
    width: 100%;
    vertical-align: text-bottom;
}

macc · #25 03-21-2009, 09:49 AM

hello

could not get this to work - have this mod https://vborg.vbsupport.ru/showthread.php?t=208865

maybe that is problem?

some help?

regards

macc

tipoboy · #26 03-21-2009, 10:10 AM

Quote:

Originally Posted by macc

hello

could not get this to work - have this mod https://vborg.vbsupport.ru/showthread.php?t=208865

maybe that is problem?

some help?

regards

macc

i'll have to look into it later on, unfortunately i dont have that mod installed so cant tell you what to do at the moment, when i get home later on i'll install the mod and see what i can do

- dave

macc · #27 03-21-2009, 10:26 AM

thanks ...will wait ..

regards

macc

tipoboy · #28 03-21-2009, 02:21 PM

Quote:

Originally Posted by macc

thanks ...will wait ..

regards

macc

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

Code:

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

and replace with:

Code:

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

and see how that helps

ArnyVee · #29 03-21-2009, 05:55 PM

Tipoboy, any tips on doing that "foggy" look on the picture so that it looks more like a background image rather than a very bright image that won't let the navbits be seen properly?

tipoboy · #30 03-21-2009, 06:03 PM

yeah, using adobe photoshop i reduced the opacity to 50% on a transparent background, and saved it as a gif :P

ArnyVee · #31 03-21-2009, 06:14 PM

Thanks Tipoboy! :up:

Now I have to find a free photoshop-like program out there as I don't have Adobe Photoshop. Any suggestions on a good one?

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.07914 seconds Memory Usage 2,339KB 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 (15)bbcode_code (4)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!