How Style Variables Interact with CSS 
vBulletin uses Style Variables to dynamically build your CSS during rendering either during page load or when the files are written to the server, if you have enabled that option. This allows you to quickly and easily build different styles that your users can choose from.

When you look at the CSS templates you will see code like this:
.postbit, .postbitlegacy, .eventbit {
    margin-bottom: {vb:stylevar padding};
    display:block;
    width: 100%;
    clear:both;
    position: relative;
    float: {vb:stylevar left};
    color: {vb:stylevar body_color};
    border: {vb:stylevar postbit_border};
}
This code contains several style variables as denoted by the {vb:stylevar} tags. The vBulletin template engine will retrieve the values of those style variables and insert them directly into the CSS as it is rendered.

CSS Math
Primarily used within CSS, this is used to evaluate the result of the mathematical expression specified.

{vb:math expression}

An example of this might look like:
height:{vb:math 8px + {vb:math {vb:stylevar font.fontSize}-1}};

This determines the height of an element based on the font size specified in the font style variable and an extra value of 8 pixels.
Copyright © 2024 MH Sub I, LLC dba vBulletin. All rights reserved. vBulletin® is a registered trademark of MH Sub I, LLC dba vBulletin.