vBulletin 4: StyleVars vs Additional.css

Those of you new to vBulletin 4 may be wondering what is the best way to go about customizing the default style. Should you use StyleVars of just add custom css rules to additional.css? I use a combination of both.

vBulletin is the first release after Jelsoft decided to convert to php5. The full conversion is not complete yet so some of the new features may seem incomplete. That is definitely the case with StyleVars.

Some of the StyleVars have confusing names, sometimes it is hard to find the right StyleVar to change etc.

There is a css file called additional.css that is included on every page. It is located in Styles & Templates > STYLENAME > Edit Templates > CSS Templates. If you are seasoned with CSS you might be tempted to simply make all of your theme changes here, overwriting the default css with new rules.

I am going to recommend that at the moment you use StyleVars as much as possible and only use custom css to make custom changes that are not possible using StyleVars. I think in the coming versions of vBulletin the interface will be cleaned up more and will make it easier to use. If you use StyleVars it does make it easier for others to customize your style further as well.

How to find the right StyleVar to edit

Get the firebug extension for firefox. Then open up your vbulletin forum.

Just say that I want to edit the color and background of the forum headers on the forum home page.

This is how you find the right stylevar to edit: Open Firebug, Tools > FireBug > Open FireBug

Click to arrow to begin inspecting the document and hover over the html elements that you want to change, in this case it is:

As you click this div block, you will see the associated css rules in the style window. All you have to do now is copy the css declarations and do a template search.

Using firebug, I found that the css declaration to edit the forum headers is called .forumhead and it is defined like this (in the default style):

Do a simple template search for this css declaration: .forumhead {.

In this case I got a few matches such as forumdisplay.css and forumbits.css. I chose to open forumdisplay.css and then I searched in the css to find the exact place it was defined. Here is the css I found:

As you can see the background css property is defined as {vb:stylevar forumhead_background}.

Now open the StyleVars for the template you are editing and type in forumhead_. All related styles will then show up, you can edit the forumhead background, border etc.

That is how you find the a pesky vbulletin StyleVar that is not easy to find.

2 thoughts on “vBulletin 4: StyleVars vs Additional.css

Leave a Reply

Your email address will not be published. Required fields are marked *