Style Variables and Templates Guide?

[mrscot]

Is there a guide somewhere that defines what all the style variables and template names refer too? It seems I'm spending a lot of time making educational guesses and trial and error attempts to see how they all behave.
It would be nice if there was some type of documentation on "How to be a vBulletin developer". Even if it costs a little money.

[LockedOnLaw]

I highly recommend using Firefox with Greasemonkey. It will give you all of the information you want in one place at one time.

https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/

You can also use the built-in web developer tools by pressing F12 but Greasemonkey allows you to make changes and see them before applying them.

[Wayne Luke]

The areas that a style variable affects is generally built into its name.

First, they are broken up into groups... BBCODE, Button, Breadcrumb, etc... This is the general location where it is used. All the style variables in the header group affect the header of the page.

Next, they are named after the area of focus. header_search_* are style variables that change the button in the search tool in the header.

Finally, they tell you where they are applied. Background, color, font, border, margin, etc... header_search_button_background changes the background color, image, position of that button.

Templates are responsible for the HTML on a page. So they are named after the page and/or location they affect. Since most of the pages are in vBulletin 5 are created by "widgets" or "modules", their HTML is in the Module Templates group and ordered by module name. Reading them, you can see where they include other template bits to make up the entire module output. So if you wanted to see the HTML of a topic or conversation, you would start with widget_conversationdisplay.

Though you can turn on the names of templates in the rendered page as well under Settings -> Options -> General Settings.

[mrscot]

Thanks, this is very helpful.