How To Expand Custom Image Header

[Princeton]

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

Great job!

[AzzidReign]

Very nice tutorial, GJ

[Charged]

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

<div style="width:100%; background-image:url($stylevar[imgdir_misc]/headbg.gif); background-repeat:repeat-x;">
<div style="float:left;"><img src="$stylevar[imgdir_misc]/head_left.jpg"  border="0" alt=""/></div>
<div style="float:left; position:absolute; right:0px;"><img src="$stylevar[imgdir_misc]/head_right.jpg" alt="" /></div>
</div>

[Ohiosweetheart]

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

[edgecutioner]

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:

PHP Code:

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

The original value in the highlighted is "100%" which will go to fit your skin which is wrong . I replaced it with $stylevar[outertablewidth] for it to be dependent on the outer table width size on StyleVars

[SLY LS1]

Originally Posted by edgecutioner

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:

PHP Code:

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

The original value in the highlighted is "100%" which will go to fit your skin which is wrong . I replaced it with $stylevar[outertablewidth] for it to be dependent on the outer table width size on StyleVars

Worked perfect

Cheers

[KWonline]

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]

Originally Posted by KWonline

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:

<!-- logo --> 
<a name="top"></a> 
<center> 
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center"> 
<tr> 

<td align="right" 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="center" valign="top" style="background-image:url($stylevar[imgdir_misc]/headbg.gif)">
<td align="left" valign="top"><img src="$stylevar[imgdir_misc]/head_right.gif" alt="" /></td> 
</tr> 
</table> 
</center> 

<!-- /logo --> 
<!-- content table --> 
$spacer_open 

$_phpinclude_output

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]

very nice..