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.