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

[Big-Pete]

Originally Posted by syrus.xl

There is 5 serious errors in that coding, certain tags not closed, a div tag used within an 'a' tag.

It should be strict xHTML to comply with vBulletin 4.0, otherwise you are just breaking the correct coding. Google would probably penalize you, if that was in every page of your site's header code.

If it was done correctly it would require CSS to be defined and use all div's, not tables. Probably about 4-5 CSS rules is all that it requires, nothing major.

Syrus, Would you be able to do this for us in css? This is exacty what i'd like to use when we change over the main site to vb4..

[hoof]

To do this just add some lines to your CSS and then call it out in the template you want it to display.

Example: for a 3 part image in the CSS add

#headerFill{
background-image: url(your/path/to image/here.gif);
background-repeat: repeat-x;
height: 120px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#headerL{
background-image: url(your/path/to image/here.gif);
height: 120px;
background-repeat: no-repeat;
width: 468px;
float: left;
margin-left: -20px;
}
#headerR {
background-image: url(your/path/to image/here.gif);
background-repeat: no-repeat;
height: 120px;
width: 175px;
float: right;
margin-right: -20px;
}

You can name it however you like, I used headerFill, headerR, and headerL. Be sure to put the correct image height and width in. THe margin-right and left is to align the edges to your forum width...you may need to adjust it or remove it.

Then in your header template add the following:

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

You should now have a fluid banner

[Big-Pete]

@ Hoof, Thankyou for that, Much appreciated!

[VonDoom]

Originally Posted by hoof

To do this just add some lines to your CSS and then call it out in the template you want it to display.
You should now have a fluid banner

sorry for the newb question but v4 has me bent over a barrel witch CSS and where?

[TheSupportForum]

Originally Posted by hoof

To do this just add some lines to your CSS and then call it out in the template you want it to display.

Example: for a 3 part image in the CSS add

#headerFill{
background-image: url(your/path/to image/here.gif);
background-repeat: repeat-x;
height: 120px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#headerL{
background-image: url(your/path/to image/here.gif);
height: 120px;
background-repeat: no-repeat;
width: 468px;
float: left;
margin-left: -20px;
}
#headerR {
background-image: url(your/path/to image/here.gif);
background-repeat: no-repeat;
height: 120px;
width: 175px;
float: right;
margin-right: -20px;
}

You can name it however you like, I used headerFill, headerR, and headerL. Be sure to put the correct image height and width in. THe margin-right and left is to align the edges to your forum width...you may need to adjust it or remove it.

Then in your header template add the following:

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

You should now have a fluid banner

vb4 no longer using CSS it uses StyleVars

[hoof]

Originally Posted by simonhind

vb4 no longer using CSS it uses StyleVars

vB4 no longer uses the "Additional CSS Definitions" section, it does use several CSS's in your template list. I use this in the "vbulletin.css" and it works great.

[TheSupportForum]

Originally Posted by hoof

vB4 no longer uses the "Additional CSS Definitions" section, it does use several CSS's in your template list. I use this in the "vbulletin.css" and it works great.

i have attached a screenshot of the admincp with main css showing
as you may be aware it mentions

"This CSS file is obsolete and is available here for reference purposes only."

[Charlie98902]

Admin panel>> Styles and Templates>>>>>Edit Templates>>>>>>>vbulletin.css Go there I believe.

[mr3oobqatar]

thanks

[oddmud]

Originally Posted by simonhind

i have attached a screenshot of the admincp with main css showing
as you may be aware it mentions

"This CSS file is obsolete and is available here for reference purposes only."

That's because you're looking at main.css not vbulletin.css.. i think.