Click image for larger version  Name:	article3.png Views:	1 Size:	346.8 KB ID:	5408

This article is part one of a series of creating custom vBulletin Styles.

vBulletin 5's user output is created using a system of pages that are customizable by the site administrator. This system is called Site Builder. By breaking the system down into pages, a lot of control is given to the system administrator. By using Site Builder, you can create a unique site without any knowledge of HTML or CSS.

vBulletin's pages are created using layers built upon a grid layout. Each page starts with a layout which defines the content areas of the page. Layouts define the number of columns that will appear on the page. Currently, vBulletin offers layouts that contain one to four columns. Each page can have a single layout.

Next, modules are placed within the module to create areas for content to be displayed. Once placed a page, modules will expand their width to fill the column it is placed in and accounts for padding and margins that are applied automatically. The height of the module will be determined by the content it contains and it will grow vertically as needed. This is something to keep in mind if you want to keep a balanced page.

Once this is done, the page is stored. During the storage process, a page template is created. Page Templates are used to easily duplicate a page. However, a change made to one page on the template affects all pages created with that template.

Each vBulletin page will also include your Site Builder Menu, Header, Footer, Navigation Bar and space for breadcrumbs and notices. You cannot remove these sections from the page and their settings are global within the style. The basic vBulletin page looks like the image below.
Basic vBulletin Page Layout

Style Variables

Style Variables are the core component to customizing vBulletin. There are many available and they cover all the sections above. Using Style Variables allow you change fonts, backgrounds, colors, borders, etc... without knowing CSS. They are a good tool for beginners.

You will find a list of all Style Variables within the AdminCP. To get there go to Styles -> Style Manager. Find the Style that you wish to edit and choose "Style Variable Editor" from the Style Options menu. The Style Variable Editor is available in both the Core (download) and Cloud versions of the product.

Finding the right Style Variables.
Style Variables are grouped by the areas of the page they affect. For instance, all of the header style variables will be in the Header group. They are also defined by the sub-area they affect. Style Variables that change the navigation bar will be in the header_tabbar list of style variables. Those that change the sub-navigation will be in the header_subtabbar list of variables.

Fixing Style Variable Mistakes
If you make a mistake in a style variable, just click the revert link to return it to its default state.

Beyond Style Variables
If the Style Variables do not fit your needs, you can use CSS to customize your site. CSS is beyond the scope of this article but will be covered in the next article.