vBulletin Manual - Inheritance Example

The concept of inheritance as used by vBulletin 3 styles is best illustrated with an example of a common use for the system.

Many site owners will want to customize the look of their vBulletin installation so that it fits in with the style of the rest of the site. This is normally done by editing the colors used by vBulletin, and by editing the header and footer templates.

Let us imagine that we want to customize your header and footer templates, but we also want to offer three different color schemes for our visitors to choose between. For argument's sake, we'll call these the 'Red', 'Green' and 'Blue' styles.

We could create three new styles, calling one 'Blue', one 'Green' and one 'Red', then customize the header and footer templates in each style. That would be a perfectly valid solution, but has one serious disadvantage, in that should we decide that we want to alter the HTML in the customized header template, we would need to go through and edit the template in each of our three styles individually.

A much more manageable solution would be to create a single new style, which we will call 'Custom Header / Footer' and customize the header and footer templates within this style.

Now in order to offer site visitors the three color variants we want, we create the 'Red', 'Green' and 'Blue' styles as child styles of the 'Custom Header / Footer' style.

Each of these child styles will inherit the customized header and footer templates from the 'Custom Header / Footer' parent style, so we will not need to edit that template in the child styles, and if we choose to change the HTML of either the header or footer templates at some point in the future, we need only edit those templates in the parent style, and the changes will be automatically inherited by the three child styles.

While this is a very simple example, involving only the site color scheme and the header and footer templates, the vBulletin styles system allows you to individually customize every template and every CSS attribute of a style, and each of those customized attributes can be inherited by all child styles.

In the next section we will look into the mechanics behind this system in order to gain a good understanding of how to use vBulletin styles most effectively.