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.



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

Powered by vBulletin® Version 3.8.13
Copyright © 2019, 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.