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

[abdyel26]

[COLOR="Blue"]Sorry to be a complete noob but i cant find vbulletin.css to add the above txt ?

I done everything else but after 2 hrs scratching around the admin cp cant find it ?
been in style manager edit templates

Style & templates/style manager/ edit template/ scroll down css templates/scroll down again vbulletin.css

[Baf_Jams]

Originally Posted by abdyel26

[COLOR="Blue"]Sorry to be a complete noob but i cant find vbulletin.css to add the above txt ?

I done everything else but after 2 hrs scratching around the admin cp cant find it ?
been in style manager edit templates


Style & templates/style manager/ edit template/ scroll down css templates/scroll down again vbulletin.css

Cheers m8y

[Charlie98902]

Anyone that upgraded to 4.1.3 you need to remove the last div on that line of code. If there is a small white line on the middle to the top left then scroll down in the header template and remove the hr code line.

[crazymilk]

I have looked in the vbulletin.css thats fine but which header template do I change the code in? Can someone help thanks in advance

[Bandit8007]

how to use repeat -x on the >>

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

on my own image then ....

gracias

Fixed!

[setishock]

Problem with a floating header is making it look like the filler is a part of the total overall header. Not just something tossed in to fill in the blank spot.
It's time consuming and a pain in the gazootenblatz. But if you take the time to do it right, it's beautiful. If you just toss something up there, it looks like you just tossed something up there.
The nuts and bolts of the code to make this work, while pretty cool, is just the begining. How you work the images and the filler, that's the magic...

Take your time. Get creative.

[znightmare]

Is there a way to do this so the logout, notifications, settings, and profile links stay under the banner instead of going inside the top part of the banner?

[dougdirac]

How do you make the left image a link?

[K4GAP]

I have used this on a couple of different sites I have built and or maintain.

For anyone that has that old vb looking header, they definitely need to check this out.

[john7911]

Thank you