Style References for vBulletin 4.x

[bitbender]

"Beverage of Choice"... Umm, I meant any kind of bev I too do not drink, unless it is somehting special, or anesthesia is needed (like an overextended visit of in-laws).

From all the years I have written code, good documentaation is good documentation. Doesn't mtter if it's a good set of comments in the code, or producted ia word doc, or PDF.

I do not accept the notion that doc is different because of what computing platform it represents. I have this "dialouge" all the time with mainframers, midrangers and Nix folks all the time. They too think it's differrent with the genre, but it really isn't. It can be done, just requires the time and effort, and in our leveraged societies, time to endeavors like that is not allowed by upper managment who have a "let them learn on their own dime" mentality. I know that my upper exec' at the large outsourcer I work at has this idea. leads to train wrecks in the technical ranks.

As the pioneers of open source, we can do much better.

[doc fluty]

So helpful.

I am going to bookmark this and come back often

thank you

[TheLastSuperman]

Originally Posted by doc fluty

So helpful.

I am going to bookmark this and come back often

thank you

Well each time post a question, after a few build up here in the thread I'll edit the article accordingly and add in more information .

[Wordplay]

this has been very helpful, the only thing that could make this better would be if you added the stylevars used in each picture/part.

[Divokymuz]

I just want to say thank you for this great article. You made my day TheLastSuperman

[fxwoody]

Hello again chief! I sent you a small PM for some advise.
Hope you don't mind ?!?

Cheers

[AttalaEA]

Very Informative. Thank You

[TheTrust]

really great work ........ thank you

[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.

[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 .