CSS and Stylevars: How should I style my themes?
 

I am starting to design a new theme for my forum. I have done it before but in a very sloppy manner.

I want to create the theme entirely from scratch however I am confused as to how I should style objects.

Before I just added all my CSS into additional.css and prefixed my classes so they do not clash with the other CSS. I feel this is a sloppy way of designing because there is still loads of left over CSS from vBulletin.

I have tried manually changing the vBulletin CSS but it reverts back after certain actions such as updating forums.

So what I am asking is how do you design templates for your forums and what are the best practices when doing so?

Thank you!

You want to use vBulletin's 'Stylevars', if you are running vb4. I will toss you some reference links to get you started. Make sure you are using one of the later versions of vb4 as the stylevar system was not finished in the early versions.

Basic:
http://www.vbulletin.com/docs/html?m...rsion=40201500
https://vborg.vbsupport.ru/showthread.php?t=256370
http://www.vbulletin.com/vbcms/conte...-10-Easy-Steps

More Advanced:
https://vborg.vbsupport.ru/showthread.php?t=230309

More Advanced - Videos:
http://www.youtube.com/watch?v=sfwle1enLms


You will receive better answers here if you limit the scope of your questions, but ask as many questions as you would like. There are many users here that can give you great advice on what you are doing.

Hi thanks for your help.

One thing I find is that stylevars are not entirely customizable. Am I required to add more styles in additional.css? Using half stylevar and half CSS is a bit of a hassle not to mention a hit on site performance (due to the built in CSS and additional.css being used at the same time). :/.

Last time I went right in and edited the vB CSS directly, which made sense. However after updates and forum changes my styles reverted.

Also when I am creating templates, is it better to modify the original elements rather than create new ones? I have an ambitious design and will be changing the default style quite a bit.

Thank you.

I also start with additional.css from default style and my current theme is http://www.webmastersun.com (try to have a look). I think you need combine stylevars and additional.css to build a theme. Also you need to edit vbulletin templates to suit to your requirements.
If you need my support, send your questions to my inbox.