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

[nomoreturn]

Installed on 3.8.2 working great in Internet Explorer but not working in Mozilla Firefox any help how to fix it thanks in advance

[Keesa]

I slightly modified it... just to allow a repeating pattern all the way

changed the code to this:

.altbg {
    background: #ebebeb url(http://i41.tinypic.com/9s779u.jpg); 
  
    width: 100%;
    
}

Thank you! It's an awesome code and a really cool enhancement

[New Joe]

Can someone please tell me what this means:

and add this css to your additional css definitions at the bottom of your main css page

Thanks

[tipoboy]

Originally Posted by New Joe

Can someone please tell me what this means:

Thanks

it means go to your admincp => styles and templates => THE SKIN YOU WANT TO ADD IT TO => click on the drop down => open Main CSS => scroll right to the bottom and add it to the additional CSS box

[DNG]

nice,, thanks

[chick]

It still picks up a 1px padding line no matter what have tried, any ideas?

[tipoboy]

Originally Posted by chick

It still picks up a 1px padding line no matter what have tried, any ideas?

Got a link to your site?

could possibly be down to the table tborder class, i would need to have a look

Dave

[Lynne]

Thread cleaned up.

Personal issues have NO place in this thread. Take it to PMs guys, if you must, but keep it out of the public cuz the rest of us don't want to see it.

[bmckinley]

Clicks Installed, works great but i did take the liberty of modding the mod a little. Can't take credit for your idea, but here's a little twist I used on our site by combining two mods:


Embed a news bar on your NavBar and let your users see headlines and previews of Google News Search results that you've selected.

Step 1: in your navbar template find the first instance of:

Code:
<td class="alt1" width="100%">

Step 2: insert the following after:

<!-- ++Start News Bar Code++ -->

<div id="newsBar-bar">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

<!-- Ajax Search Api and Stylesheet
// Note: If you are already using the AJAX Search API, then do not include it
// or its stylesheet again
-->
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-nbw"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
</style>

<!-- News Bar Code and Stylesheet -->
<script type="text/javascript">
window._uds_nbw_donotrepair = true;
</script>
<script src="http://www.google.com/uds/solutions/newsbar/gsnewsbar.js?mode=new"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/newsbar/gsnewsbar.css");
</style>

<script type="text/javascript">
function LoadNewsBar() {
var newsBar;
var options = {
largeResultSet : false,
title : "In the news",
horizontal : true,
autoExecuteList : {
executeList : ["Your Industry News"]
}
}

newsBar = new GSnewsBar(document.getElementById("newsBar-bar"), options);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadNewsBar);
</script>
<!-- ++End News Bar Code++ -->

Step 3: make sure to change the red "Your Industry News" to what ever your industry or interest is.

Step 4: click save.

DEMO

So thanks for the great mod.

[LOKIN510051]

Instalado Quedo Muy Bien Gracias.


Installed Is Very Well Thanks.