29 08 2010
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:
|
1 |
<div class="forumhead foruminfo L1 collapse"> |
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):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.forumhead { -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; background:url("newbtn_middle.png") repeat-x scroll 0 0 #7192A8; border:1px solid #5A7F97; clear:both; color:#FFFFFF; float:left; font:bold 12px Arial,Tahoma,Calibri,Verdana,Geneva,sans-serif; margin-top:8px; padding:0; width:100%; } |
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:
|
1 2 3 4 5 6 7 8 9 |
.forumbits .forumbit_nopost .forumhead { margin-top: 0; background: {vb:stylevar forumhead_background}; _background-image: none; -moz-border-radius: 0; -webkit-border-radius: 0; border: {vb:stylevar forumbits_border}; border-top: 0; } |
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.
Setup Local Web Development Environment on Mac How to Import Posts from a Text File into WordPress
Muchly appreciated, been trying to figure out how to add borders to my BF3 websites forumhead, the stylevars i didn’t know about until now, i thought vb4 styles were hand coded.
Awesome, Thanks
cool Tips, I will try addition css for make vbb style.
Thanks