[How To] Make Your vB Header Image Expandable

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:











http://www.vbulletin-faq.com/forum/$stylevar[imgdir_misc]/left.gif
http://www.vbulletin-faq.com/forum/$stylevar[imgdir_misc]/right.gif










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

great tutorial miner.

very nice tut and thanks so much very helpfull

I know this may be a few month bump, but your code segment isn't showing up.

needs to be fixed

I'll fix it when I have a few mins.

all fixed

It is not working for me. I followed all instructions but the IMG code actually shows on my board, not the logo itselef. What do I do?

nic tut