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

[joeman]

A friend and I have a forum using vb 4.0.6 and we are trying to do this mod on our header however the color of the header is off for some reason. Pictures are sized the same and opacity is equal for all 3 images, however the middle image is very dark and we can't figure out why.

I changed the header to one solid color just to make sure the image we were using before didnt have a problem. I included a screen shot so you can see what I mean.

Center image original file size is 2px wide.

Any advice on what to do?






Heres the code we are using:

#headerFill{
background-image: url(images/headercenter.png);
background-repeat: repeat-x;
height: 145px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#headerL{
background-image: url(images/headerleft.png);
height: 145px;
background-repeat: no-repeat;
width: 800px;
float: left;

}
#headerR {
background-image: url(images/headerright.png);
background-repeat: no-repeat;
height: 145px;
width: 200px;
float: right;

}

We also put this code in place of the header code:

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

[joeman]

Anyone have a suggestion on how to fix this?

Thanks

[mattyphatty]

I have the same problem, anyone know what the problem might be?

[joeman]

Originally Posted by mattyphatty

I have the same problem, anyone know what the problem might be?

I guess it looks like I'm not the only one having this issue.

I still didn't hear from anybody on a fix for this yet. Did you ever solve your problem with this?

[mattyphatty]

Originally Posted by joeman

A friend and I have a forum using vb 4.0.6 and we are trying to do this mod on our header however the color of the header is off for some reason. Pictures are sized the same and opacity is equal for all 3 images, however the middle image is very dark and we can't figure out why.

I changed the header to one solid color just to make sure the image we were using before didnt have a problem. I included a screen shot so you can see what I mean.

Center image original file size is 2px wide.

Any advice on what to do?






Heres the code we are using:

#headerFill{
background-image: url(images/headercenter.png);
background-repeat: repeat-x;
height: 145px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#headerL{
background-image: url(images/headerleft.png);
height: 145px;
background-repeat: no-repeat;
width: 800px;
float: left;

}
#headerR {
background-image: url(images/headerright.png);
background-repeat: no-repeat;
height: 145px;
width: 200px;
float: right;

}

We also put this code in place of the header code:

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

Mine is doing this same thing. VB 4.0.6

[joeman]

Have any of you that have done this mod had success with getting it work properly?

If so can you post a link of this working on your site.

Any of you that have suggestions what is wrong with the code above to create that darker area for the moving part of the header please chime in and help out if you can.

It would be GREATLY appreciated to get ANY suggestions from ANYONE here at vbulletin.org.

[jeffcoast]

I used some of this to add a right image to the site I help out with, but am having an issue I need some help with.

We want the right image to go under the left image if the page size isn't wide enough to not have the images overlap. But no matter what I tried, it wouldn't work right. The right is always on top.

http://www.amusementinsider.com/foru...php?styleid=17

<div style="position: absolute; top: 0px; right: 0px; padding: 2px; overflow: hidden; width: 1556px;" class="panelsurround">
<a href="http://www.amusementinsider.com" target="_blank">  <img src="images/tztot/towerghosts.gif"  width="1556" height="115"alt="Ghosts" border="0" title="Spooky!"></a></div>

That code is just added to the regular header template, along with the default code.

[Internetcafe]

Originally Posted by joeman

Have any of you that have done this mod had success with getting it work properly?

If so can you post a link of this working on your site.

Working well on 4.0.8 .. DeereTalk

[orangefive]

Ive made it so that it only uses the left one, tried the others but didnt work. How do I make the image display the Website name on hover and if clicked on it goes to forum.php?

http://www.thewoollybacks.co.uk is the site. Thanks

[Baf_Jams]

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

just when i expand vbulletin cms templates theres a list as long as your arm ?