[TheLastSuperman]

Originally Posted by Sage Knight

I have seen you around and I must say you're truly the Superman of vB. This article will go a long way in helping me understand vB's theme & template system.

I have a question, how can I remove the header content (use the background as a replacement) as if the header content was crystal clear and you can whatever image you have in the background.

I hope I made some sense.

Actually that's not as hard as some think and I've done it in a few styles, then using the background image made the style using it... for example here's a style where I did something similar - http://www.8bitfix.com/content/ now see how I've relocated the toplinks(login/welcome username) to the navbar and adjusted?

From another thread I helped in:

Create a new plugin:

AdminCP > Plugins & Products > Add new plugin

Product = vBulletin
Hook Location = process_templates_complete
Title = Login relocated to Navbar
Execution order = 5
Plugin PHP Code:

PHP Code:

vB_Template::preRegister('navbar', array('notification_menubits' => $notification_menubits)); 


Plugin is active = Yes

Now view your site, it should be there however this was a "Basic How 2 Guide" now you'll notice right off the bat it's to the right a bit too much and depending on your screen resolution and/or max width on your site it could flow under the search so you must adjust CSS and more to make it look right for your site and Lynne supplied one of you plus it's posted above some tricks to adjust the toplinks css .

Now you can take all the code within the <div id="toplinks"> <div> and paste into the navbar then move around accordingly, review your header template and it should be something very short now i.e.

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
	<vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:raw vboptions.bbtitle}" /></a></div><vb:else /><div>&nbsp;</div></vb:if>

	<div class="ad_global_header">
		{vb:raw ad_location.global_header1}
		{vb:raw ad_location.global_header2}
	</div>
	<hr />
</div>

^ So as you can see once done your header template will be very "short" . You've now relocated the toplinks to the navbar and either need to adjust them OR you can still do other little things and achieve the same effect namely tellinlg the toplinks css to be so far from the top i.e. change top:0; to top:200px; or something along those lines and not to mention you can use the plugin and leave the login in the header using a conditional then showcase the userinfo when they are logged in somewhere else as well but both must use the appropriate conditionals.

Now for the background use the stylevars and tell it what images to use or simply overwrite it using additional.css *(You still may want to set some of the header stylevars to transparent so basically if it has in #41f3b7 as the color backspace that and type in transparent (only the word no # or anything else) and save over that stylevar.

Paste into additional.css and adjust to suit:

body {
        background-color: #ffffff;
	background-image: url(images/myimagename.png);
	background-repeat: no-repeat;
	background-position: top;
}

The true body css info is in vbulletin.css however upon upgrading you would overwrite it so best bet is to add your own definition to additional.css.

Original body css from vbulletin.css:

/* BASIC PAGE ELEMENTS */

body {
	width:{vb:stylevar doc_width};
	min-width:{vb:stylevar doc_minWidth};
	max-width:{vb:stylevar doc_maxWidth};
	margin: {vb:stylevar doc_margin};
	font-size:{vb:stylevar font.fontSize}px;
	color:{vb:stylevar body_color};
	line-height:{vb:stylevar line_height};
}

And there you have it in so many ways and words (lol) so make a *child style of your main style and then test this so your not disturbing your members with style glitches as you tinker along .