[Developer]

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




Then Crop the leftside (your logo part):





And save it as head_left.gif







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



And save as head_right.gif





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



Crop the selected part and save it as 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




Delete the existing code complete and insert the follow there:

PHP Code:

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