PDA

View Full Version : How To Expand Custom Image Header


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:

<!-- logo -->
<a name="top"></a>
<center>
<table border="0" width="100%" 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.jpg" alt="" /></td>
</tr>
</table>
</center>

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

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


<div style="width:100%; background-image:url($stylevar[imgdir_misc]/headbg.gif); background-repeat:repeat-x;">
<div style="float:left;"><img src="$stylevar[imgdir_misc]/head_left.jpg" border="0" alt=""/></div>
<div style="float:left; position:absolute; right:0px;"><img src="$stylevar[imgdir_misc]/head_right.jpg" alt="" /></div>
</div>

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:

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

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

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

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

<!-- logo -->
<a name="top"></a>
<center>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>

<td align="right" 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="center" valign="top" style="background-image:url($stylevar[imgdir_misc]/headbg.gif)">
<td align="left" valign="top"><img src="$stylevar[imgdir_misc]/head_right.gif" alt="" /></td>
</tr>
</table>
</center>

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

$_phpinclude_output


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;

<!-- logo -->
<a name="top"></a>
<table border="0" cellpadding="0" cellspacing="0" $stylevar[outertablewidth] align="center">
<tr>
<td rowspan="4" width="50%" height="180" style="background-image: url(http://localhost/forum/images/head/left_fill.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td rowspan="4" width="416" height="180" style="background-image: url(http://localhost/forum/images/head/Banner_02.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td colspan="2" rowspan="3" width="104" height="152" style="background-image: url(http://localhost/forum/images/head/Banner_03.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td colspan="3" width="243" height="13" style="background-image: url(http://localhost/forum/images/head/Banner_04.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td rowspan="4" width="17" height="180" style="background-image: url(http://localhost/forum/images/head/Banner_05.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td rowspan="4" width="50%" height="180" style="background-image: url(http://localhost/forum/images/head/right_fill.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
</tr>
<tr>
<td colspan="2" width="234" height="60" style="background-image: url(http://localhost/forum/images/head/ad.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="9" height="60" style="background-image: url(http://localhost/forum/images/head/Banner_08.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
</tr>
<tr>
<td colspan="3" width="243" height="79" style="background-image: url(http://localhost/forum/images/head/Banner_09.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
</tr>
<tr>
<td width="99" height="28" style="background-image: url(http://localhost/forum/images/head/home.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td colspan="2" width="109" height="28" style="background-image: url(http://localhost/forum/images/head/forum.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td colspan="2" width="139" height="28" style="background-image: url(http://localhost/forum/images/head/links.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
</tr>
<tr>
<td width="8" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="416" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="99" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="5" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="104" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="130" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="9" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="17" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
<td width="12" height="1" style="background-image: url(http://localhost/forum/images/head/spacer.gif);" nowrap="nowrap" alt="" border="0" /></a></td>
</tr>
</table>
<!-- /logo -->

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
<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!<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><center><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></center></a></td>
<td align="$stylevar[right]">
&nbsp;
</td>
</tr>
</table>
<!-- /logo -->
<div style="position:relative;width:900px;height:60px;background-image:url(http://img443.imageshack.us/img443/8826/openmembership900x60kw2.jpg);overflow:hidden;">
<div style="height:100%;width:100%;overflow:hidden">
<table align="left" border="0px" cellpadding="5px" cellspacing="0px" style="table-layout:fixed;word-wrap:break-word;">
<tr>
<td width="360px" height="60px" align="center" valign="middle" style="color:#000000;font:16px Arial">Get a free 5GB email account @maximus.ws</td>
</tr>
</table>
</div>
<div style="position:absolute;border:1px solid #ffffff;width:90px;left:420px;bottom:18px;">
<div style="border:1px solid #1F59A5;">
<div style="border:1px solid #ffffff;background-image:url(http://images.domains.live.com/OpenSignupImages/OpenButtonBackground.gif);padding:1px 0px 1px 0px;margin:0px;text-align:center;">
<a href="https://domains.live.com/members/signup.aspx?domain=maximus.ws" target="_blank" style="font:bold 12px Arial,Helvetica,sans-serif;color:#092076;text-decoration:none;">Sign up</a>
</div>
</div>
</div>
<div style="position:absolute;border:1px solid #ffffff;width:90px;right:235px;bottom:18px;">
<div style="border:1px solid #1F59A5;">
<div style="border:1px solid #ffffff;background-image:url(http://images.domains.live.com/OpenSignupImages/OpenButtonBackground.gif);padding:1px 0px 1px 0px;margin:0px;text-align:center;">
<a href="http://mail.live.com" target="_blank" style="font:bold 12px Arial,Helvetica,sans-serif;color:#092076;text-decoration:none;">Check e-mail</a>
</div>
</div>
</div>
</div><!-- content table -->
$spacer_open

$_phpinclude_output

choccyclaire
12 Mar 2008, 23: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:

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

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

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
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:
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" >
<tr style="background-image:url(http://forums.mtgdarkness.com/images/misc/headbg.png)">

<td align="left" valign="top"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/head_left.png" border="0" alt=""/></a></td>
<td align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/head_right.png" alt="" /></td>
</tr><tr>
<td> <ul class="mtgdmenu"> <li class="mtgdmenu"><p class="mtext"><a href="http://www.mtgdarkness.com" class="menulink">Home</a></p></li>
<li class="mtgdmenu"><p class="mtext"><a href="http://forums.mtgdarkness.com" class="menulink">Forums</a></p></li>
<li class="mtgdmenu"><p class="mtext"><a href="http://www.mtgdarkness.com/?page_id=35" class="menulink">Articles</a></p></li>
<li class="mtgdmenu"><p class="mtext"><a href="http://forums.mtgdarkness.com/chat/index.php" class="menulink" target="_blank">Chat</a></p></li>
<li class="mtgdmenu"><p class="mtext"><a href="http://www.mtgdarkness.com/?page_id=19" class="menulink">Associates</a></p></li></ul> </td>
</tr>
</table>

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


<div style="width:100%; background-image:url($stylevar[imgdir_misc]/headbg.gif); background-repeat:repeat-x;">
<div style="float:left;"><img src="$stylevar[imgdir_misc]/head_left.jpg" border="0" alt=""/></div>
<div style="float:left; position:absolute; right:0px;"><img src="$stylevar[imgdir_misc]/head_right.jpg" alt="" /></div>
</div>



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

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.

<!-- 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.png" border="0" alt=""/></a></td>
<td align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/head_right.png" alt="" /></td>
</tr>
</table>
</center>

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

$_phpinclude_output

dmk82
07 Feb 2010, 11:10
Anyone, anyone?

Sunka
08 Feb 2010, 16:44
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 :)

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/showpost.php?p=2268352&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
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/showthread.php?t=236174&highlight=Flash-Image+Banner+Rotator