[How To] Make Your vB Header Image Expandable

[miner]

Just attempting to write my first tutorial on designing vB skins...
How to make your header image expandable to screen width?

First create your header image 780px width like the example image shown below...


http://i4.photobucket.com/albums/y140/foruma-z/header.gif




Then Crop the leftside (your logo part):




http://i4.photobucket.com/albums/y140/foruma-z/crop1a.gif




And save it as head_left.gif




http://i4.photobucket.com/albums/y140/foruma-z/head_left.gif



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



http://i4.photobucket.com/albums/y140/foruma-z/crop2.gif





And save as head_right.gif





http://i4.photobucket.com/albums/y140/foruma-z/head_right.gif





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



http://i4.photobucket.com/albums/y140/foruma-z/crop3.gif




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



http://i4.photobucket.com/albums/y140/foruma-z/headbg.gif




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



http://i4.photobucket.com/albums/y140/foruma-z/headeradmin.gif




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" background="$stylevar[imgdir_misc]/head_back.jpg">
<tr>
<td valign="top" width="296"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/left.gif" width="296" border="0"></a></td>
<td align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/right.gif" 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 and the width size of the left.gif in the above code...

[Peggy]

Absolutely!! Thanks so much miner *hug*

[Brandon Sheley]

good tut, thanks miner :)

[mattcaswell]

Great quick graphics mod but for some reason, the headbg.jpg and head_right.jpg won't show up unless I refresh 2 times. Could it have something to do with using .jpg's and not .gif's? I did change the filename extention in the code to use the .jpgs/

matt

[semann]

whydont you trey making the gifs..?

[Peggy]

Matt for some odd reason, jpg's don't seem to work. I tried too, using jpg images, and had to change them to gifs

odd.....

[miner]

It must be the browser catch thingy not of using jpg or gif...

[miner]

Matt for some odd reason, jpg's don't seem to work. I tried too, using jpg images, and had to change them to gifs

odd.....
I use both gif & jpg for my designs recently i done marvel2 (http://www.forum-lance.com/index.php?styleid=17) using jpg headers...

[Peggy]

hmmm... I couldn't get it to stretch all the way to the sides using jpgs. When I changed it to gifs it did. Isn't that odd...

[semann]

thats why im gif fan and png not jpegs

[Peggy]

I LOVE png images cuz you can use them to make anything

[semann]

yep you can even have transparency

[semann]

Look miner i do that, but when its all finished it makes this:

look at the very right!

http://i104.photobucket.com/albums/m177/semann/wierdocopy.gif (http://s104.photobucket.com/albums/m177/semann/?action=view&current=wierdocopy.gif)

[miner]

I will check up & see whats the problem...

[miner]

Semann,

I updated the code in my first post with new one try this and inform...

[semann]

it worked, i removed the left.gif/jpg width and it worked

[Noppid]

Great post Miner. Thanks

[miner]

it worked, i removed the left.gif/jpg width and it worked

Glad it worked:D


Great post Miner. Thanks

:o :)

[mattcaswell]

whydont you trey making the gifs..?


It seems that it's a Safari thing on my end. They work fine with Firefox. I'll try the GIFs and see if Safari likes them. Great visual mod. Thanks!

Matt

[MZG2010]

thnx alooooooooooo
really so nice i do it now :D:D

[Coder1]

It must be the browser catch thingy not of using jpg or gif...

"Cache"... any time you make a change like this, be sure to delete your cache.

IE: Tools | Internet Options | Delete Files

FF: Tools | Clear Private Data

I see no reason why JPEGs wouldn't work.

[Peggy]

I didn't either, still don't. But they wouldn't work

[BlackScorpion3]

Thanks again, Miner. Great as always.

--Black Scorpion

[LiftNw8]

Ok, here is a dopey question, what if I have a fixed width, and I am having a problem with it, because it was originally set up to expand some, and I changed the image, now it doesn't show as its supposed to, check out my header here http://www.poconoforums.com/ and look towards the right, how can I fix this, so I have one fixed image?

[WoodiE55]

LiftNw,

Why not just make a fixed width image then?

[LiftNw8]

LiftNw,

Why not just make a fixed width image then?

I was going to try that next, right now the image is in two pieces, one is the header_logo and the other is the header_rs, the skin also uses CSS for the header, and I think I am going to have to modify that to make it appear correctly either way, but I am have tried taking pieces of the CSS out to make it right and it just screwed things up more. Will let you know what happens after I try the full fixed width image later today if I have time to get to it.

[LiftNw8]

I tried this and well it totally threw off the whole thing, so that didn't work, I am thinking I am going to need modification in the CSS or code.

[Peggy]

What I would do, and have done, is open a transparent image the same width as your forum, in your graphics software, then open each piece, copy, and paste on the transparent image, until you have all three side by side, then merge and save as one image.

Revert your header template back to the original template. Upload the image to the misc folder, and in skins' StyleVars section, find the title image aread and put in the image path to the header. save

if you made the header the same width as the forum, it should be all set.

[LiftNw8]

Ok, I can give this a try, what about just replacing the images completely, from what I already have, though not sure about that because like I said, the CSS defines the header, so the header section looking to that CSS, so I am thinking I am going to need to rewrite that CSS and the header in order to get it to work. Or that is what it looks like to me.

[ColoChris]

Great thread!!! I must say that I do no understand the whole headbg.gif theory? Since it is the same graphic and color, do you make it the smaller size and it just stretches for the page width needed? I have seen some custom skins that have gardients and such that just have a 1px or 2px size, but it fills the whole are that is needed. Its weird to me, but maybe some can explain to me why. Thanks

Colochris