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

[j.steensen]

Updated to Beta 5, and my header got jacked up.

Was working 100% before the upgrade.

Bugs: The floating image incorrectly ends, the words go off the right side of the window, and there are now two grey lines between the header and the nav bar. It does not matter the size of the window.

See attached image to see bugged header.

Here is my current (bugged) header template code:

<div class="above_body">
<div id="header" class="floatcontainer">
	{vb:raw ad_location.ad_header_logo}
	<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/header/head.back.png">
  <tr>
    <td width="464" height="121" valign="top"><a href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q} ">
    <div><img src="images/header/head.left.png" border="0" /></div></td>
    <td width="22">&nbsp;</td>
    <td width="511" valign="top"><img src="images/header/head.right.png" align="right"></td>
  </tr>
</table>

	<div id="toplinks"  class="toplinks">
		<vb:if condition="$show['member']">
			<ul class="isuser">
				<li>{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
				<vb:if condition="$notifications_total">
				<li class="popupmenu" id="notifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
					<ul class="popupbody popuphover">
						{vb:raw notifications_menubits}
					</ul>
				</li>
				<vb:else />
				<li class="popupmenu" id="nonotifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
					<div class="popupbody popuphover">
						<p>{vb:rawphrase no_new_messages}</p>
						<p><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></p>
					</div>
				</li>
				</vb:if>
				<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
				<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li>
				<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
				</vb:if>				
				<li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
			</ul>
			<vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
		<vb:else />
			<ul class="nouser">
			<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
			</vb:if>			
				<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
			</ul>
			<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
			<form action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
				<fieldset id="logindetails">
					<div>
						<div>
					<input type="text" class="textbox default-value" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" onfocus="if (this.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'){this.value=''; this.style.color='black';}" onblur="if (this.value == '') {this.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; this.style.color='#828282';}"/>
					<input type="password" class="textbox default-value" name="vb_login_password" id="navbar_password" size="10" tabindex="102" onfocus="this.style.color='black';" />
					<input type="submit" class="loginbutton" value="{vb:rawphrase log_in}" tabindex="104" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
						</div>
					</div>
				</fieldset>
				<div id="remember">
					<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" /> {vb:rawphrase remember_me}</label>
				</div>
			
				<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
				<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
				<input type="hidden" name="do" value="login" />
				<input type="hidden" name="vb_login_md5password" />
				<input type="hidden" name="vb_login_md5password_utf" />
			</form>	
		</vb:if>
	</div>
	<div class="ad_global_header">
		{vb:raw ad_location.global_header1}
		{vb:raw ad_location.global_header2}
	</div>
	<hr />
	{vb:raw ad_location.ad_header_end}
</div>
</div>

Any ideas? Thanks!

[Beermonster]

You have a solid colour background there's no need to use this, just chose your image in your stylevar and the background colour to match.

[j.steensen]

No solid color. There is a gradiant along the top of the header. (Dark grey.) Somewhat hard to see in the resized thumbnails that were created when I uploaded.

[Beermonster]

Originally Posted by j.steensen

No solid color. There is a gradiant along the top of the header. (Dark grey.) Somewhat hard to see in the resized thumbnails that were created when I uploaded.

Then revert your template and use header_background in stylevar for that, add the left image to titleimage

[j.steensen]

Just making sure I am tracking properly...

Revert header templates (removing the fluid header).
Add repeating background gradient to header_background stylevar.
Add logo image to titleimage stylevar.

Correct? Thanks for the help.

[Charlie98902]

Why not use the code below? Does it not work?

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

[j.steensen]

It did work with Beta 4, perfectly.

Upgrade to Beta 5 broke it.

[Charlie98902]

Since it is a template or added css mod you may had to reput it back into its place again for it to work?

[Beermonster]

Originally Posted by j.steensen

Just making sure I am tracking properly...

Revert header templates (removing the fluid header).
Add repeating background gradient to header_background stylevar.
Add logo image to titleimage stylevar.

Correct? Thanks for the help.

That's right, the only benefit of using this mod is it gives you the ability to add a 3rd (right) image

[The Vegan Forum]

Are there any news regarding how to make a fluid three part header now when vB4 is in the Release Candidate stage? I searched for the string to replace (posted at the top of this page), but that code seems to have been changed.