PDA

View Full Version : Forum Display Enhancements - add a background image to your navbits


tipoboy
19 Mar 2009, 23:04
Just a simple mod that will allow you to add a background image to your navbit table, as per this request (http://www.vbulletin.org/forum/showthread.php?t=208811).

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:

http://www.scottishwheelnuts.co.uk/images/screenshot.gif

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:
http://scottishwheelnuts.co.uk/images/screenshot2.gif

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:p:D

Sweeks
19 Mar 2009, 23:05
Demo?
________
GOOD CHEAP VAPORIZERS (http://vaporizerinfo.com/)

tipoboy
19 Mar 2009, 23:09
its currently on my test site hold on 2 secs and i'll upload a screen shot

tipoboy
19 Mar 2009, 23:14
screenshot added

Sweeks
19 Mar 2009, 23:41
Thank you ;)
________
Pov movies (http://www.++++tube.com/categories/33/pov/videos/1)

Reycer
20 Mar 2009, 01:16
why dosen't yours stretch all the way to go behind the log in box as well. Honestly this has been around for a very long time:

http://www.vbulletin.com/forum/showthread.php?t=105189

anuanu
20 Mar 2009, 03:51
I love this!!!


I will address that by doing this will move the forum title up alittle


for example:


Before:
-------------------------------------------------------------------------------------------------

Your forum title(no image)

--------------------------------------------------------------------------------------------------






After:
-------------------------------------------------------------------------------------------------
Your forum title(with image)


--------------------------------------------------------------------------------------------------

anuanu
20 Mar 2009, 03:53
why dosen't yours stretch all the way to go behind the log in box as well. Honestly this has been around for a very long time:

http://www.vbulletin.com/forum/showthread.php?t=105189

That can be fixed by making the image longer :)

Well thats what i had to do.

Jasem
20 Mar 2009, 13:26
Good work, thank you

SpeedyHire
20 Mar 2009, 19:42
nice little mod
well done bud.
would be good if you could make it extend along past the Welcome back bla bla box aswell.
never the less thank you

legion!
20 Mar 2009, 20:49
Nice mod i installed it :)

tipoboy
20 Mar 2009, 21:21
why dosen't yours stretch all the way to go behind the log in box as well. Honestly this has been around for a very long time:

http://www.vbulletin.com/forum/showthread.php?t=105189

Well firstly let me point out that the way i've done it, with that image, is the way i wanted it, i didnt want the image accross the whole navbit! Besides its fairly simple if you wanted it accross the whole navbit, use a bigger image!

Secondly as i pointed out i made this mod as it was requested on VB.ORG, i didnt look on vb.COM. i realise its a very simple mod compared to most around here but there are people out there who haven't got a scooby about how to do this kind of stuff.

Thirdly why have you actually posted in this mod threa., If it doesnt suit your needs, why even post a responce, i'm not a designer or a coder just a guy who's trying to learn how to code and quite frankly your answer, might just be the reason why i dont help anyone again!

Thabnks for your input either way

- dave

tipoboy
20 Mar 2009, 21:23
nice little mod
well done bud.
would be good if you could make it extend along past the Welcome back bla bla box aswell.
never the less thank you
i'll play about and get back to you :)

SpeedyHire
20 Mar 2009, 21:49
i'll play about and get back to you :)

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

tipoboy
20 Mar 2009, 22:14
Updated: now added instructions on how to have it stretch through your welcome back pm column!:)

SpeedyHire
20 Mar 2009, 22:32
top job m8:)
well done and again big thanx

SpeedyHire
20 Mar 2009, 23:00
image dont seem to want to resize with the screen width, got a white space on the right side:(

tipoboy
20 Mar 2009, 23:11
could you provide a link so i can have a looky

SpeedyHire
20 Mar 2009, 23:27
message sent

SpeedyHire
20 Mar 2009, 23:42
ha fixed it:)
thanx anyway

tipoboy
20 Mar 2009, 23:47
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
21 Mar 2009, 02:23
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
21 Mar 2009, 05:27
hey for thoose who want the background color not to be anything, but stay the original theme, use this code

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

macc
21 Mar 2009, 11:49
hello

could not get this to work - have this mod http://www.vbulletin.org/forum/showthread.php?t=208865

maybe that is problem?

some help?

regards

macc

tipoboy
21 Mar 2009, 12:10
hello

could not get this to work - have this mod http://www.vbulletin.org/forum/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
21 Mar 2009, 12:26
thanks ...will wait ..

regards

macc

tipoboy
21 Mar 2009, 16:21
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
<!-- AG Advanced RSS Reader -->
<td class="alt2">



and replace with:


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

and see how that helps

ArnyVee
21 Mar 2009, 19:55
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
21 Mar 2009, 20:03
yeah, using adobe photoshop i reduced the opacity to 50% on a transparent background, and saved it as a gif :P

ArnyVee
21 Mar 2009, 20:14
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?

tipoboy
21 Mar 2009, 20:17
post your image here and i'll do it for you :P

macc
21 Mar 2009, 21:25
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
<!-- AG Advanced RSS Reader -->
<td class="alt2">



and replace with:


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

and see how that helps


make what you said but no result - no picture come in navbar ... can you take a look?

regards

macc

ArnyVee
21 Mar 2009, 22:29
post your image here and i'll do it for you :P

Thanks so much! :up:

Here's the pic: https://www.vbulletin.org/forum/

What is the recommended size of the pic to normally fit in that space?

tipoboy
21 Mar 2009, 22:35
make what you said but no result - no picture come in navbar ... can you take a look?

regards

macc

pm sent

tipoboy
21 Mar 2009, 22:44
Thanks so much! :up:

Here's the pic: http://www.waltdisneyboards.com/images/misc/wd_large1.jpg

What is the recommended size of the pic to normally fit in that space?

i used a 468x60 image but i see you have the rss feeds mod too so i just made it 468x119 for you

image below:
http://www.scottishwheelnuts.co.uk/wd_large1.gif

ArnyVee
21 Mar 2009, 23:07
Thanks so much Tipoboy! :up:

How can I have the actual text align to the bottom instead of the top? It's covering Walt's face and I'd rather have it towards the bottom and see if that looks better. :D

Now, I just need to do the 'stretch' thing to get it all the way across in that space. (will that stretch the image and make it look odd?)

Edited: Or, is there a way to center the image within that space available?

tipoboy
21 Mar 2009, 23:12
Thanks so much Tipoboy! :up:

How can I have the actual text align to the bottom instead of the top? It's covering Walt's face and I'd rather have it towards the bottom and see if that looks better. :D

Now, I just need to do the 'stretch' thing to get it all the way across in that space. (will that stretch the image and make it look odd?)

Edited: Or, is there a way to center the image within that space available?
no the image will stay at the 468px image size. I'll have a look at moving the text as i removed it in my forum, as i didnt like it too much, but none the less i'll have a look for you.

Personally unless you're using a tiled background the strech thing doesnt look good but thats only my opinion, each to their own :)

ArnyVee
21 Mar 2009, 23:20
no the image will stay at the 468px image size. I'll have a look at moving the text as i removed it in my forum, as i didnt like it too much, but none the less i'll have a look for you.

Personally unless you're using a tiled background the strech thing doesnt look good but thats only my opinion, each to their own :)

Yeah, I don't want that 'stretched' look come to think about it.

Can you give the instructions on how to remove the text and another option to move it down or right aligned or something? :D

tipoboy
21 Mar 2009, 23:20
Thanks so much Tipoboy! :up:

How can I have the actual text align to the bottom instead of the top? It's covering Walt's face and I'd rather have it towards the bottom and see if that looks better. :D

Now, I just need to do the 'stretch' thing to get it all the way across in that space. (will that stretch the image and make it look odd?)

Edited: Or, is there a way to center the image within that space available?
just had a look on your sit and it looks to me that your navbits text is aligned to the bottom, is this the writing you are reffering to?

ArnyVee
21 Mar 2009, 23:24
See screenshot....It's actually sitting at the top, but I'm using FireFox. Are you using a different browser?

96824

tipoboy
21 Mar 2009, 23:28
yea i'm using IE are you wanting the navbits removed or aligned right? :D

- dave

ArnyVee
21 Mar 2009, 23:34
Hmm....can you tell me how to do each so that I can try and see if it looks good enough to keep? Please :D

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
21 Mar 2009, 23:39
to remove all you need to do is remove this 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:
&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
22 Mar 2009, 00:02
could you provide your navbar template please ArnyVee

ArnyVee
22 Mar 2009, 00:09
Sent you an email with the navbar template Dave! :)

Thanks for your help! :up:

tipoboy
22 Mar 2009, 00:56
Hmm....can you tell me how to do each so that I can try and see if it looks good enough to keep? Please :D

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:
http://www.scottishwheelnuts.co.uk/images/screeny1.gif

screeny 2:

http://www.scottishwheelnuts.co.uk/images/screeny2.gif
sorry i cant help further like i said i'm still trying to learn myself

- dave

ArnyVee
22 Mar 2009, 01:14
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
22 Mar 2009, 01:20
no prob arny just sorry i couldnt help further, hopefully someone with a bit more knoledge might be able to help

- dave

ArnyVee
22 Mar 2009, 01:31
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
22 Mar 2009, 01:44
all you need to do is add some css attributes to your additional css at the bottom of your main css page add:

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

and in your navbar template find:

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


and replace with:
<td class="altbgcolor">
<DIV ALIGN=RIGHT>

and find:

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

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

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

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

and replace with:

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

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

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

and that should make your colour similar arny :D

ArnyVee
22 Mar 2009, 01:47
Dave, you are THE man! :up:

Thank you so much!

tipoboy
22 Mar 2009, 01:49
let me know when you've implimented it and i'll have a looky :D

ArnyVee
22 Mar 2009, 02:09
Dave, it's a done deal :up:

I have the same background color across the top. Thanks again for your help! :D

tipoboy
22 Mar 2009, 02:12
no probs mate just glad to help :D

RedHacker
22 Mar 2009, 20:52
I dont worked....

May is problem are: and add this css to your additional css definitions at the bottom of your main css page


Can help me?

tipoboy
22 Mar 2009, 20:56
go to your:

admincp => styles & templates => style manager => THE SKIN YOUWANT TO SHOW THE MODIFICATION ON => from the drop down box select => main CSS scroll to the bottom where it says additional CSS definitions and add the code there.

RedHacker
22 Mar 2009, 20:57
Yes and not worked....
The background is blue...

tipoboy
22 Mar 2009, 21:08
just saying its not worked isnt really helping, could you provide a link to your site, oh and please MARK AS INSTALLED

macc
22 Mar 2009, 21:48
Thanks tipoboy for your help to get this nice mod to work on my site !

Thanks and regards

macc

RedHacker
23 Mar 2009, 01:09
The image size must 54*100...?

tipoboy
23 Mar 2009, 22:54
The image size must 54*100...?
i'm not getting you mate, could you firstly provide a link to the site where your having the problem?

secondly,a few questions

1. is it the default navbar or have you customized it?
2. did you apply the changes in both your navabr template AND add the additional CSS definitions
3. did you correctly add the path to the image in your CSS

thanks

- dave

RedHacker
24 Mar 2009, 12:58
Cant inside my forum why first must do register..!!!Its locked for un-registered users..!!!The Style is Marvel II

tipoboy
24 Mar 2009, 13:02
Unfortunately i dont have that style nor have i used it, i would be more than happy to take a look if you would pm mewith details of a temporary admin account.

tahnks
- dave

DobieGillis©
25 Mar 2009, 03:20
best mod in a long time! Thanks!

silvertibur
26 Apr 2009, 15:59
how do make your bg img stretchable?

tipoboy
26 Apr 2009, 16:18
i'm unsure, i suppose you could possibly use either div's or a table and use a left and right image with a filler repeating image never had a need for stretchable image there before but it is certainly interesting, if you'd like me to give it a try pm me

plazzman
29 Apr 2009, 00:25
Hey Tipo. Great mod, set it up just fine and it looks fantastic. But I have one problem. The part where it has the page navigation links, the end link doesn't parse.

I don't think I'm explaining it very well, so have a look yourself here (http://www.fightlockdown.com/forum/showthread.php?t=1581&page=4)

The part where the text is black, how do I fix that?

tipoboy
29 Apr 2009, 00:40
Hey Tipo. Great mod, set it up just fine and it looks fantastic. But I have one problem. The part where it has the page navigation links, the end link doesn't parse.

I don't think I'm explaining it very well, so have a look yourself here (http://www.fightlockdown.com/forum/showthread.php?t=1581&page=4)

The part where the text is black, how do I fix that?

I would use a custom css attribute to change the color of the text, if you would like me to do it for you please pm me with log in details mate

plazzman
30 Apr 2009, 01:31
Wow, thank you so much for that Tipo. You definitely did the job!

tipoboy
11 May 2009, 10:39
how do make your bg img stretchable?

i found a way but it really would depend on the image you wish to use, if you want to know more PM me :)

nomoreturn
11 May 2009, 14:16
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
23 Jun 2009, 10:18
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
29 Jun 2009, 08:25
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
29 Jun 2009, 22:38
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

:D

DNG
01 Jul 2009, 11:34
nice,, thanks

chick
04 Jul 2009, 13:44
It still picks up a 1px padding line no matter what have tried, any ideas?

tipoboy
05 Jul 2009, 00:33
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 :D

Lynne
06 Jul 2009, 01:05
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
16 Jul 2009, 05:57
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 (http://hearts4horses.net/member_forum/upload/index.php)

So thanks for the great mod. :)

LOKIN510051
20 Jul 2009, 23:20
Instalado Quedo Muy Bien Gracias.



Installed Is Very Well Thanks.

jkcerda
24 Jul 2009, 06:57
cool, will give it a try

dsotmoon
08 Aug 2009, 23:04
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?

Keesa
14 Aug 2009, 03:26
Never mind. User Headspace Error.

:D

tipoboy
14 Aug 2009, 10:50
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 :D

setishock
16 Aug 2009, 07:46
Tweaked the idea I got from this. See below.

setishock
18 Aug 2009, 16:31
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.


<br />
<!-- breadcrumb, login, pm info -->
<table class="tborder"
background="(http://)your.forum.name/path/to/your/image"
cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="altbg" width="100%">
<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>

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

tipoboy
18 Aug 2009, 23:37
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.


<br />
<!-- breadcrumb, login, pm info -->
<table class="tborder"
background="(http://)your.forum.name/path/to/your/image"
cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="altbg" width="100%">
<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>

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 :D

mgcom
18 Oct 2009, 19:45
love it, mine is fine in IE but a bit banjoed in FF

Thanks anyway

mgcom
19 Oct 2009, 22:14
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

ahmedipa
20 Oct 2009, 07:56
very good thing thank you very much

COL NIL SATIS
21 Oct 2009, 00:30
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
09 Nov 2009, 00:10
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,

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:

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...

very good thing thank you very much

no problem, thanks for using

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
29 Nov 2009, 22:24
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