Forum Display Enhancements - Fluid 3 part header

Not a difficult thing to do but I thought I would post it any way as some people seem to having trouble with getting their header image to have an align image right as you can't do it in stylevar.

This is fluid all you need to do is make 3 images, I named mine left, right and background (See attachment), you can be more creative


In your header template find

<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>

Replace with

<div id="headerFill"><div id="headerL"></div><div id="headerR"></div></div>

Add to vbulletin.css template

#headerFill{
background-image: url(images/headerFill.jpg);
background-repeat: repeat-x;
height: 119px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#headerL{
background-image: url(images/headerL.jpg);
height: 119px;
background-repeat: no-repeat;
width: 348px;
float: left;

}
#headerR {
background-image: url(images/headerR.jpg);
background-repeat: no-repeat;
height: 119px;
width: 332px;
float: right;

}

Change sizes and paths in red to suit your own

Thanks to hoof for the CSS update.

Mark as installed for support

[speedimpulse]

installed and working thank you!

[Charlie98902]

Originally Posted by KissOfDeath

the problem i have is that my headerFill stays to the far left and headerL lays itself ontop of the left part of it, and theirs a massive gap between my headerR & my headerFill....

From reading through this post it seems this method no longer works since vbulletin was updated? and one have some new code?

It works as I am using it.

Live Demo - http://www.dvdnextcopysupportforum.com

[KissOfDeath]

Have no idea why it's not working for me, can you show me the 3 seperate images you are using?

here are the 3 i'm trying to use

[Charlie98902]

I am using the default VB size. My image sizes are

left - 387x128

Middle - 31x128

Right - 387x128

[kisanjong]

looks good

any info on doing this for the postbit / threadbit headers ? Please

[moonclamp]

Originally Posted by syrus.xl

Why are you using the Table tag with vBulletin 4.0? This will break strict xHTML compliancy, which is what version 4 is all about.

It should be coded as a div layout, not a table layout.

Originally Posted by Loco.M

completely agree :up:

If it works in a browser, then why should anyone care?
What the end user sees is more important, so why worry if it doesn't cause an issue?

[KissOfDeath]

Still couldn't get this method to work so a did my own, because also looking at the css in this on it will show differently in different browsers and go out of line.....

Here's my code that i used to make it fit in all browsers,

Leave the vbulletin.css in it's original state

In your header template find

<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>

Replace with:

<tr>
<td width="23%"><img src="images/andromeda/misc/header_left.gif" alt="" width="23%" height="100"/></td><td><a href="index.php"><img src="images/andromeda/misc/logo.gif" alt= "Free PSP ISO Downloads" width="54%" height="100" border="0"/></a></td><td align="right"><img src="images/andromeda/misc/header_right.gif" alt="" width="23%" height="100"/></td>
</tr>

Demo: http://www.devils-shadow.com/forums/forum.php

Putting your own image locations & sizes in the fields i've marked red

BTW doing it this way your pointing to the logo image directly so changing the "Titleimage" Stylevar will not change the logo

[Charlie98902]

Very nice.

[idslamyou]

I'm not sure what I'm doing wrong but I can't get this to work. I'm trying on 4.0.1. Made the changes to the header template and added the css to vbulletin.css. Uploaded the images to the images folder and nothing displays in the header. The stock VB logo is now gone, but that area is compressed and the menu bar is covering up the login box. I've triple checked everything and done the steps over to no avail.

Any ideas?

[horussjr]

doesnt work on 4.0.2 pl1. help