How To Expand Custom Image Header
 

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://vborg.vbsupport.ru/


Then Crop the leftside (your logo part):


https://vborg.vbsupport.ru/


And save it as head_left.gif


https://vborg.vbsupport.ru/




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

https://vborg.vbsupport.ru/

And save as head_right.gif

https://vborg.vbsupport.ru/



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

https://vborg.vbsupport.ru/

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

https://vborg.vbsupport.ru/


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://vborg.vbsupport.ru/


Delete the existing code complete and insert the follow there:

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

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

Great job!

Very nice tutorial, GJ

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

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

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:

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

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

very nice..

good article thanks :)

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;

its not working for me

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

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

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!

This worked an absolute treat!

Thanks everyone. :up:

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>

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

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

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:

super tutorial.

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

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:
But I don't know how to get the stupid navbar to extend with the banner. It doesn't want to work...

thanks

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.

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.

Excellent! :up:

I was looking for this. :)

Thanks alot I will try this out

I'm interesting too.

Easy quick and thats what I wanted

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.

Anyone, anyone?

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?

bump :)

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:

https://vborg.vbsupport.ru/showpost....&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?

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
https://vborg.vbsupport.ru/showthrea...Banner+Rotator