vb.org Archive - Forum Display Enhancements - add a background image to your navbits

Page 1 of 3

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)

- - Forum Display Enhancements - add a background image to your navbits (https://vborg.vbsupport.ru/showthread.php?t=208833)

tipoboy

03-18-2009 10:00 PM

add a background image to your navbits

1 Attachment(s)

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:

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

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

03-19-2009 09:05 PM

Demo?
________
GOOD CHEAP VAPORIZERS

tipoboy

03-19-2009 09:09 PM

its currently on my test site hold on 2 secs and i'll upload a screen shot

tipoboy

03-19-2009 09:14 PM

screenshot added

Sweeks

03-19-2009 09:41 PM

Thank you ;)
________
Pov movies

Reycer

03-19-2009 11:16 PM

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

03-20-2009 01:51 AM

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

03-20-2009 01:53 AM

Quote:

Originally Posted by mdelcour (Post 1772245)

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

03-20-2009 11:26 AM

Good work, thank you

SpeedyHire

03-20-2009 05:42 PM

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!

03-20-2009 06:49 PM

Nice mod i installed it :)

tipoboy

03-20-2009 07:21 PM

Quote:

Originally Posted by mdelcour (Post 1772245)

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

03-20-2009 07:23 PM

Quote:

Originally Posted by SpeedyHire (Post 1772747)

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

03-20-2009 07:49 PM

Quote:

Originally Posted by tipoboy (Post 1772817)

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

03-20-2009 08:14 PM

Updated: now added instructions on how to have it stretch through your welcome back pm column!:)

SpeedyHire

03-20-2009 08:32 PM

top job m8:)
well done and again big thanx

SpeedyHire

03-20-2009 09:00 PM

image dont seem to want to resize with the screen width, got a white space on the right side:(

tipoboy

03-20-2009 09:11 PM

could you provide a link so i can have a looky

SpeedyHire

03-20-2009 09:27 PM

message sent

SpeedyHire

03-20-2009 09:42 PM

ha fixed it:)
thanx anyway

tipoboy

03-20-2009 09:47 PM

Quote:

Originally Posted by SpeedyHire (Post 1772929)

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

03-21-2009 12:23 AM

Quote:

Originally Posted by SpeedyHire (Post 1772841)

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

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

03-21-2009 10:10 AM

Quote:

Originally Posted by macc (Post 1773254)

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	03-21-2009 10:26 AM

thanks ...will wait ..

regards

macc

tipoboy

03-21-2009 02:21 PM

Quote:

Originally Posted by macc (Post 1773270)

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

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

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

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?

tipoboy

03-21-2009 06:17 PM

post your image here and i'll do it for you :P

macc	03-21-2009 07:25 PM

Quote:

Originally Posted by tipoboy (Post 1773385)

Code:

<!-- AG Advanced RSS Reader -->

<td class="alt2">

and replace with:

Code:

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

03-21-2009 08:29 PM

Quote:

Originally Posted by tipoboy (Post 1773585)

post your image here and i'll do it for you :P

Thanks so much! :up:

Here's the pic: https://vborg.vbsupport.ru/

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

tipoboy

03-21-2009 08:35 PM

Quote:

Originally Posted by macc (Post 1773633)

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

regards

macc

pm sent

tipoboy

03-21-2009 08:44 PM

Quote:

Originally Posted by ArnyVee (Post 1773659)

Thanks so much! :up:

Here's the pic: http://www.waltdisneyboards.com/imag.../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

03-21-2009 09:07 PM

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

03-21-2009 09:12 PM

Quote:

Originally Posted by ArnyVee (Post 1773683)

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

03-21-2009 09:20 PM

Quote:

Originally Posted by tipoboy (Post 1773686)

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

03-21-2009 09:20 PM

Quote:

Originally Posted by ArnyVee (Post 1773683)

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

03-21-2009 09:24 PM

1 Attachment(s)

See screenshot....It's actually sitting at the top, but I'm using FireFox. Are you using a different browser?

Attachment 96824

All times are GMT. The time now is 05:23 PM.

Page 1 of 3

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05046 seconds Memory Usage 1,839KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (17)bbcode_code_printable (15)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: