Tweet
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.
Pages and 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 a future article.
This article is part one of a series of creating custom vBulletin Styles.
