vBulletin Mods

The Official vBulletin Modifications Site
https://www.vbulletin.org/forum/showthread.php?t=137415

How To Expand Custom Image Header
by miner
24 Jan 2007 20:22

We hear it many times...
"How can I make my header image expandable to screen width?"

This tutorial will help you accomplish this task.

Requirements:
  • A bit of html knowledge;
  • photo editor;
  • and, photo editing.
Let's Get Started!

Let's start with a 780px header image ... you can use the example image below...

https://www.vbulletin.org/forum/


Then Crop the leftside (your logo part):


https://www.vbulletin.org/forum/


And save it as head_left.gif


https://www.vbulletin.org/forum/




Second crop the right side of the header image as shown below:

https://www.vbulletin.org/forum/

And save as head_right.gif

https://www.vbulletin.org/forum/



Next select background image -just 1 or 2px width like shown below:

https://www.vbulletin.org/forum/

Crop the selected part and save it as headbg.gif:

https://www.vbulletin.org/forum/


Now load all the three images to the misc folder of images...

Next goto admincp> styles&templates> style manager> all style options>

scroll down to header

https://www.vbulletin.org/forum/


Delete the existing code complete and insert the follow there:


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

Updated the code above and just change the gif/jpg name you are using...

Princeton 26 Jan 2007 17:20

Helpful tut ... many people will find this useful :up:

Great job!

AzzidReign 23 May 2007 02:11

Very nice tutorial, GJ

Charged 25 May 2007 17:40

I just did this on my site, though I've used css rather than a table for those who would rather here is how I did it. Save images the same as explained above then in the header put


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


Ohiosweetheart 10 Jun 2007 17:19

Thank you z - I've been using this tut of yours for some time - very helpful!

edgecutioner 14 Oct 2007 11:28

thanks for the tip man. this will add up to my skin designing skills ;)

[edit]After trials and errors for 1/2 hour, I found something that will not work if you want your skin to be fluid. see the code below:


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

The original value in the highlighted is "100%" which will go to fit your skin which is wrong :p. I replaced it with $stylevar[outertablewidth] for it to be dependent on the outer table width size on StyleVars

SLY LS1 20 Oct 2007 13:55

Quote:

Originally Posted by edgecutioner (Post 1359614)
thanks for the tip man. this will add up to my skin designing skills ;)

[edit]After trials and errors for 1/2 hour, I found something that will not work if you want your skin to be fluid. see the code below:


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

The original value in the highlighted is "100%" which will go to fit your skin which is wrong :p. I replaced it with $stylevar[outertablewidth] for it to be dependent on the outer table width size on StyleVars

Worked perfect

Cheers

KWonline 23 Dec 2007 19:46

I am trying to add a header which has curved edges to my forum using this technique. However, my middle background bit is repeating under the invisable pixels of left and right header images. I'm stumped as to how to stop that happening?

(great tut by the way! :))

Webmist 31 Dec 2007 06:22

Quote:

Originally Posted by KWonline (Post 1407713)
I am trying to add a header which has curved edges to my forum using this technique. However, my middle background bit is repeating under the invisable pixels of left and right header images. I'm stumped as to how to stop that happening?

(great tut by the way! :))

An alternate way is to add a center table cell to expand with as follows:

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

Of course to adjust the header you may have to specify the width of the left and right table cell. Remember this is a complete table in the header template.

ndut 28 Jan 2008 18:51

very nice..

Powerofdreams 21 Feb 2008 00:35

good article thanks :)

badseed00 27 Feb 2008 06:07

Ok, so I tried to follow the basic guidlines of the tutorial and implement them into my complex table. however, I seem to be running into some issues;

1. When I set the expaniding sections to 100%, they take up the entire header adn my main image is gone
2. If I change the % width to somethign like 20%, they expand and contract as they should BUT, when the screen res lessens the two expandable areas only shrink down a little bit and then the main image acts like it has two columns and they begin to shrink.

What did I do wrong?
Here is the code I used;


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


rooban12 27 Feb 2008 19:10

its not working for me

cypher1973 10 Mar 2008 11:34

hey guys ive done this and used this code in my header
Quote:

<table class="tborder" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="top">
<!-- logo -->
<a name="top"></a>
<center>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center" style="background-image:url($stylevar[imgdir_misc]/headbg.gif)">
<tr>

<td align="left" valign="top"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/head_left.gif" border="0" alt=""/></a></td>
<td align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/head_right.gif" alt="" /></td>
</tr>
</table>
</center>

<!-- /logo -->
<!-- content table -->
$spacer_open

$_phpinclude_output
<!-- Right Column Code -->
<<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<!-- End Left Column Code -->

but as you can see i get a little white line ;( http://www.fusion64man.co.uk/index.php?pageid=home

Ive tried to get rid of this but o luck can anyone help.


Thanks andy

carrlos 11 Mar 2008 05:16

Below is my header code. I have a Windows Live Mail sign up banner at the top of my forum under the header image. I want to change the forum from a 900px set width to 100% but I don't know how to recode the Windows Live banner. I already change the Main Table Width in StylesVar to 100%. I put the code that needs fixing in red.

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


choccyclaire 12 Mar 2008 23:28

Quote:

Originally Posted by edgecutioner (Post 1359614)
thanks for the tip man. this will add up to my skin designing skills ;)

[edit]After trials and errors for 1/2 hour, I found something that will not work if you want your skin to be fluid. see the code below:


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

The original value in the highlighted is "100%" which will go to fit your skin which is wrong :p. I replaced it with $stylevar[outertablewidth] for it to be dependent on the outer table width size on StyleVars

This worked an absolute treat!

Thanks everyone. :up:

K4GAP 28 Apr 2008 20:38

On my site I have a single image I want centered with expanding images on the right and left so that the center image remains in the center. Right now I've just resized the right side image to force the center image to what is the center on my monitor. But, I know different resolutions are going to display it differently. The code below is what I'm using right now...


<!-- begin disturbed header-->
<div align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="border">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- This is where the top logo image goes -->
<td width="100%" height="150" align="left" valign="top"><img src="$stylevar[imgdir_misc]/expand.gif" width="100%" height="150" alt="Part of the TNT Network" /></td>
<!-- End top logo area -->
<td width="600" height="150" align="center" valign="top"><img src="$stylevar[imgdir_misc]/center.jpg" width="600" height="150" alt="The New Testament" /></td>
<td width="100%" height="150" align="right" valign="top" style="background-image: url($stylevar[imgdir_misc]/expand.gif)"><img src="$stylevar[imgdir_misc]/expand.gif" width="275" height="150" alt="=TNT=" /></td>
</tr>
</table>

yaoren 30 Apr 2008 21:02

1 Attachment(s)
One thing I'd like to do and I don't know if this is the place to post this, is add a few tab buttons on the banner for navigation. I've seen it done on other forums and well I have it on the banner but I'll be honest I need to some help in figuring out the coding and laying it out right. As is just now it's only two separate images since I was just trying to get the code on here to work for me.

The other thing is how can I get my banner to be attached to the forum so it all runs together smoothly instead of it separated.

Attachment 79563

Any help is really appreciated :)

Krumbz 26 Aug 2008 02:09

excellent tutorial.. now a tutorial on how to add a login box or a search box in the header would be great

tazB.ca 17 Sep 2008 05:34

Okay I'm really confused sorry...

When I add that code into my HEADER... I end up losing both the header and the navbar?...

rooban12 15 Oct 2008 21:04

Quote:

Originally Posted by tazB.ca (Post 1623889)
Okay I'm really confused sorry...

When I add that code into my HEADER... I end up losing both the header and the navbar?...



I got the same problem:confused::confused::confused::confused:

thompson 16 Oct 2008 10:49

super tutorial.

Valyx 25 Nov 2008 06:01

i got this working on my forum.
www.talk-games.net

MTGDarkness 03 Jan 2009 17:06

Does anyone know how to get a matching sidebar on that?
http://forums.mtgdarkness.com/index.php?styleid=1
I tried that... The code I'm using right now is this:

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

But I don't know how to get the stupid navbar to extend with the banner. It doesn't want to work...

bijju 13 Jan 2009 01:54

thanks

Vaupell 26 Jan 2009 22:45

Quote:

Originally Posted by Charged (Post 1254532)
I just did this on my site, though I've used css rather than a table for those who would rather here is how I did it. Save images the same as explained above then in the header put


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


nice and all, just not working on my firefox fully updated.
it does not repeat spacer, only on ie and chrome does it repeat. :(
swithing to tables.

PJSkiboy 25 Feb 2009 06:27

OMG, I spent the better part of last Sunday afternoon trying to do this on my own (which I finally figured out with some help from a buddy) with a lot of head scratching. Ugh.

If only I had checked here sooner, lol.

Hindsight is 20/20.

Great thread.

RedHotChili 30 Mar 2009 17:53

Excellent! :up:

I was looking for this. :)

supersy 31 Mar 2009 20:35

Thanks alot I will try this out

Mike08 19 Apr 2009 21:46

Quote:

Originally Posted by yaoren (Post 1503753)
One thing I'd like to do and I don't know if this is the place to post this, is add a few tab buttons on the banner for navigation. I've seen it done on other forums and well I have it on the banner but I'll be honest I need to some help in figuring out the coding and laying it out right. As is just now it's only two separate images since I was just trying to get the code on here to work for me.

The other thing is how can I get my banner to be attached to the forum so it all runs together smoothly instead of it separated.

Attachment 79563

Any help is really appreciated :)

I'm interesting too.

willy888 09 Jul 2009 18:28

Easy quick and thats what I wanted

dmk82 06 Feb 2010 10:22

Hey guys, great tutorial thanks! I got this working for the most part on my forum, but I have a couple small issues:

http://gixxerpaddock.com/index.php

1) Why can you only click on the left side of the image and have it take you to the "home link" instead of anywhere on the image? If I click anywhere else in the header, I get cursor placement.

2) How do I get rid of the spacing on both sides that runs from the top to bottom of the page? (dark blue in color, few pixels wide) I'm sure it's some sort of setting like in the "Sizes and Dimensions" area, just can't figure out which one.


I think that's it for now. I used the code supplied in the first post.


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


dmk82 07 Feb 2010 11:10

Anyone, anyone?

Sunka 08 Feb 2010 16:44

Quote:

Originally Posted by dmk82 (Post 1975909)
Why can you only click on the left side of the image and have it take you to the "home link" instead of anywhere on the image? If I click anywhere else in the header, I get cursor placement.

That is interesting me too.
I've tried to add "<a href=....." to spacer and right image too, but come not good!
Any solution to all 3 pieces of logo be clickable?

dmk82 15 Feb 2010 06:37

bump :)

Cyb - Flash-Image Banner Rotator Issue
by yotsume
15 Nov 2011 23:55

Cyb - Flash-Image Banner Rotator
Can anyone help me place CYB Flash Image Banner in this header code so the banners will show on top of the right side image. I have asked the developer of that mod for help as well here:

http://www.vbulletin.org/forum/showp...&postcount=197

PROBLEM: No matter where I place the code for that mod in this header code the banners do not align correctly on top of the right side image as they should.

Anyone know how to get this header code to work with this mod?

Angle4cor 01 Dec 2011 23:09

Is it working also with vBulletin 4.1.x?

TheSupportForum 22 Jan 2012 13:38

Quote:

Originally Posted by Angle4cor (Post 2273827)
Is it working also with vBulletin 4.1.x?

the template code has changed since v3 of vbulletin
the developer need to update his mod

which is now here
http://www.vbulletin.org/forum/showt...Banner+Rotator


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

Powered by vBulletin® Version 3.8.14
Copyright © 2020, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright ©2001 - , vbulletin.org. All rights reserved.