vBulletin Manual - Inheritance Mechanics

In the vBulletin styles system, each element of a style can be customized from the vBulletin default value, and each customization will be inherited by any child styles of the style in which the customization was made, unless the value is further customized in the child style.

In order to explain this in simple terms, let us assume that a vBulletin style consists of [x] individual elements, those being a background color, a text color, a font style and a few templates. For the purposes of this example, we will represent the contents of a style like this:

	Background Color	Text Color	Font Style	Header Template	Footer Template
*vBulletin Default*	#FFFFFF	#000000	10pt verdana, arial, helvetica, sans-serif	<p>This is the default 'header' template!</p>	<div>This is the default 'footer' template!</div>

Using the example of the customized header and footer templates we used in our first look at style inheritance, we can imagine that we could represent the 'Custom Header / Footer' style like this:

	Background Color	Text Color	Font Style	Header Template	Footer Template
*vBulletin Default*	#FFFFFF	#000000	10pt verdana, arial, helvetica, sans-serif	<p>This is the default 'header' template!</p>	<div>This is the default 'footer' template!</div>
Custom Header / Footer	#FFFFFF	#000000	10pt verdana, arial, helvetica, sans-serif	<p>This is my custom 'header' template!</p>	<div>This is my custom 'footer' template!</div>

In this example, items that have been customized in a style are shown in red. You can see that the background color, text color and font style values are all shown in black, meaning that they are unchanged from the default values, while both the header and footer templates are shown in red, meaning that they have been customized, and therefore override their default contents.

We will now add the final branch of the style tree from our previous example, namely the 'Blue' style.

	Background Color	Text Color	Font Style	Header Template	Footer Template
*vBulletin Default*	#FFFFFF	#000000	10pt verdana, arial, helvetica, sans-serif	<p>This is the default 'header' template!</p>	<div>This is the default 'footer' template!</div>
Custom Header / Footer	#FFFFFF	#000000	10pt verdana, arial, helvetica, sans-serif	<p>This is my custom 'header' template!</p>	<div>This is my custom 'footer' template!</div>
Blue	#0000FF	#FFFFFF	10pt verdana, arial, helvetica, sans-serif	<p>This is my custom 'header' template!</p>	<div>This is my custom 'footer' template!</div>

Here we can see that both the background and text color values have been customized, and are therefore shown in red, while the font style value has not been changed and therefore is being inherited from the vBulletin default values. However, both the header and footer templates have been customized in the parent 'Custom Header / Footer' style, and so those custom versions are inherited by the 'Blue' style. This inheritance is shown as an orange value.

Furthermore, if we now decided to customize the header template in the 'Blue' style, we would have something like this:

	Background Color	Text Color	Font Style	Header Template	Footer Template
*vBulletin Default*	#FFFFFF	#000000	10pt verdana, arial, helvetica, sans-serif	<p>This is the default 'header' template!</p>	<div>This is the default 'footer' template!</div>
Custom Header / Footer	#FFFFFF	#000000	10pt verdana, arial, helvetica, sans-serif	<p>This is my custom 'header' template!</p>	<div>This is my custom 'footer' template!</div>
Blue	#0000FF	#FFFF00	10pt verdana, arial, helvetica, sans-serif	<p>This is my special BLUE 'header' template!</p>	<div>This is my custom 'footer' template!</div>

Here we can see that the customized (red) header template in the 'Blue' style overrides not only the default vBulletin header template, but also the customized header template from its parent 'Custom Header / Footer' style, while the Footer template is still inherited from its parent.

To illustrate the ability of vBulletin's style system to allow a theoretically infinte level of parent/child relationships between styles, we will now add a child style to the 'Blue' style, in which we will set the font size to be extra large. We will call this style 'Big Font Blue'.

In this style, we will customize the font size attribute to be larger than normal, which will result in a style inheritance diagram like this:

	Background Color	Text Color	Font Style	Header Template	Footer Template
*vBulletin Default*	#FFFFFF	#000000	10pt verdana, arial, helvetica, sans-serif	<p>This is the default 'header' template!</p>	<div>This is the default 'footer' template!</div>
Custom Header / Footer	#FFFFFF	#000000	10pt verdana, arial, helvetica, sans-serif	<p>This is my custom 'header' template!</p>	<div>This is my custom 'footer' template!</div>
Blue	#0000FF	#FFFF00	10pt verdana, arial, helvetica, sans-serif	<p>This is my special BLUE 'header' template!</p>	<div>This is my custom 'footer' template!</div>
Big Font Blue	#0000FF	#FFFF00	14pt verdana, arial, helvetica, sans-serif	<p>This is my special BLUE 'header' template!</p>	<div>This is my custom 'footer' template!</div>

Here you can see that the vBulletin default font style is inherited by the 'Custom Header / Footer' style and the 'Blue' style, but is overridden by the customized version in the 'Big Font Blue' style.

Were we to now customize the font style in the 'Custom Header / Footer' style, the change would automatically be inherited by the 'Blue' style, but would not be inherited by the 'Big Font Blue' style, as it has its own customized version.

	Background Color	Text Color	Font Style	Header Template	Footer Template
*vBulletin Default*	#FFFFFF	#000000	10pt verdana, arial, helvetica, sans-serif	<p>This is the default 'header' template!</p>	<div>This is the default 'footer' template!</div>
Custom Header / Footer	#FFFFFF	#000000	12pt verdana, arial, helvetica, sans-serif	<p>This is my custom 'header' template!</p>	<div>This is my custom 'footer' template!</div>
Blue	#0000FF	#FFFF00	12pt verdana, arial, helvetica, sans-serif	<p>This is my special BLUE 'header' template!</p>	<div>This is my custom 'footer' template!</div>
Big Font Blue	#0000FF	#FFFF00	14pt verdana, arial, helvetica, sans-serif	<p>This is my special BLUE 'header' template!</p>	<div>This is my custom 'footer' template!</div>

Additionally, were we now to revert the customized footer template in the 'Custom Header / Footer' style, its child styles would automatically inherit the vBulletin default value.

	Background Color	Text Color	Font Style	Header Template	Footer Template
*vBulletin Default*	#FFFFFF	#000000	10pt verdana, arial, helvetica, sans-serif	<p>This is the default 'header' template!</p>	<div>This is the default 'footer' template!</div>
Custom Header / Footer	#FFFFFF	#000000	12pt verdana, arial, helvetica, sans-serif	<p>This is my custom 'header' template!</p>	<div>This is the default 'footer' template!</div>
Blue	#0000FF	#FFFF00	12pt verdana, arial, helvetica, sans-serif	<p>This is my special BLUE 'header' template!</p>	<div>This is the default 'footer' template!</div>
Big Font Blue	#0000FF	#FFFF00	14pt verdana, arial, helvetica, sans-serif	<p>This is my special BLUE 'header' template!</p>	<div>This is the default 'footer' template!</div>

The system does not allow you to alter the vBulletin default value for any item, so you can revert any of your customizations at any time to their original contents.

This diagram illustrates the decision system used by vBulletin when loading each element from a style.