Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
add a background image to your navbits Details »
add a background image to your navbits
Mod Version: 1.00, by tipoboy (Member) tipoboy is offline
Developer Last Online: Sep 2014 I like it Show Printable Version Email this Page

vB Version: 3.8.1 Rating: (8 votes - 5.00 average) Installs: 42
Released: 19 Mar 2009 Last Update: Never Downloads: 19
Not Supported Additional Files Re-usable Code Translations  

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

next find:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

next find:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

next find:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Download Now

Only licensed members can download files, Click Here for more information.

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
  #76  
Old 04 Jul 2009, 12:44
chick's Avatar
chick chick is offline
 
Join Date: Sep 2006
It still picks up a 1px padding line no matter what have tried, any ideas?
__________________
Thank you all, everything you do is appreciated!
vbSpill It 2009 - Anonymous Posting Mod
vbPenAward 2009 - Writers Pen Awards
Reply With Quote
  #77  
Old 04 Jul 2009, 23:33
tipoboy's Avatar
tipoboy tipoboy is offline
 
Join Date: Dec 2005
Real name: scotty
Originally Posted by chick View Post
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
__________________
Available for help just PM details!
Reply With Quote
  #78  
Old 06 Jul 2009, 00:05
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: 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.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #79  
Old 16 Jul 2009, 04:57
bmckinley's Avatar
bmckinley bmckinley is offline
 
Join Date: Jun 2009
Real name: Bill
Thanks, works great.

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.
Reply With Quote
  #80  
Old 20 Jul 2009, 22:20
LOKIN510051's Avatar
LOKIN510051 LOKIN510051 is offline
 
Join Date: Mar 2009
Instalado Quedo Muy Bien Gracias.



Installed Is Very Well Thanks.
Reply With Quote
  #81  
Old 24 Jul 2009, 05:57
jkcerda jkcerda is offline
 
Join Date: Mar 2008
cool, will give it a try
Reply With Quote
  #82  
Old 08 Aug 2009, 22:04
dsotmoon dsotmoon is offline
 
Join Date: Jun 2003
installed and working great! thanks for the mod

can anyone tell me how to use this mod so that I can use multiple images that rotate on each page load?
Reply With Quote
  #83  
Old 14 Aug 2009, 02:26
Keesa Keesa is offline
 
Join Date: Oct 2007
Never mind. User Headspace Error.


Last edited by Keesa; 14 Aug 2009 at 05:18.
Reply With Quote
  #84  
Old 14 Aug 2009, 09:50
tipoboy's Avatar
tipoboy tipoboy is offline
 
Join Date: Dec 2005
Real name: scotty
Originally Posted by dsotmoon View Post
installed and working great! thanks for the mod

can anyone tell me how to use this mod so that I can use multiple images that rotate on each page load?
there are a few mods here at vborg that will allow you to use a random image with each refresh, the one i would suggest is by jaxel, found here,

http://www.vbulletin.org/forum/showthread.php?t=212351

if you need help just drop me a pm
__________________
Available for help just PM details!
Reply With Quote
  #85  
Old 16 Aug 2009, 06:46
setishock setishock is offline
 
Join Date: Feb 2008
Tweaked the idea I got from this. See below.
__________________
Working on new projects and expanding our horizons. Come by and see what we're up to now.

Last edited by setishock; 18 Aug 2009 at 15:32.
Reply With Quote
  #86  
Old 18 Aug 2009, 15:31
setishock setishock is offline
 
Join Date: Feb 2008
Originally Posted by tipoboy View Post
Updated: now added instructions on how to have it stretch through your welcome back pm column!
You sparked an idea I tried out and found it works. I thought I'd come back and share it.

The simplest way to get your image or color to go all the way across is to remember the right> "welcome" and the left> "directory path(bread crumbs)" are cells inside a table. You want to add the image or color to the table parameters so it covers the entire table background.
In the code below from the navbar template you keep the code in blue you added from the first part of his instructions. Then add the background code you see in red.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Leave the () out of the url. I couldn't keep the url from parsing and messing up my code demo.
Now go to the .altbg in the additional CSS definitions and remove the entire background statement. Leave the height, width, and text align statements.
When you're done you get some thing like what I have in the navbar in this theme I'm working on:
http://animeappeal.com/forums/index.php?styleid=47
__________________
Working on new projects and expanding our horizons. Come by and see what we're up to now.
Reply With Quote
  #87  
Old 18 Aug 2009, 22:37
tipoboy's Avatar
tipoboy tipoboy is offline
 
Join Date: Dec 2005
Real name: scotty
Originally Posted by setishock View Post
You sparked an idea I tried out and found it works. I thought I'd come back and share it.

The simplest way to get your image or color to go all the way across is to remember the right> "welcome" and the left> "directory path(bread crumbs)" are cells inside a table. You want to add the image or color to the table parameters so it covers the entire table background.
In the code below from the navbar template you keep the code in blue you added from the first part of his instructions. Then add the background code you see in red.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Leave the () out of the url. I couldn't keep the url from parsing and messing up my code demo.
Now go to the .altbg in the additional CSS definitions and remove the entire background statement. Leave the height, width, and text align statements.
When you're done you get some thing like what I have in the navbar in this theme I'm working on:
http://animeappeal.com/forums/index.php?styleid=47
if you do it that way i dont think the code will validate corectly, what you could do is set up a new CSS class to define the table or row background, then use the background attribute there and this should be xhtml valid, if you want to discuss it further i'd be happy to, please pm me
__________________
Available for help just PM details!
Reply With Quote
  #88  
Old 18 Oct 2009, 18:45
mgcom's Avatar
mgcom mgcom is offline
 
Join Date: Apr 2009
Location: Dublin (Ireland)
Real name: Mark
love it, mine is fine in IE but a bit banjoed in FF

Thanks anyway
Reply With Quote
  #89  
Old 19 Oct 2009, 21:14
mgcom's Avatar
mgcom mgcom is offline
 
Join Date: Apr 2009
Location: Dublin (Ireland)
Real name: Mark
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
Reply With Quote
  #90  
Old 20 Oct 2009, 06:56
ahmedipa ahmedipa is offline
 
Join Date: Feb 2009
very good thing thank you very much
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 14:22.

Layout Options | Width: Wide Color: