When styling your site with CSS, you have access to 60+ predefined LESS variables. (Not sure what LESS is? See the LESS docs.) These allow you to quickly change your design side wide (e.g., colors, fonts, spacing). This page lists and describes these predefined variables. (Learn more about styling with CSS.)
LESS extends CSS and adds features that are common in programming languages. LESS is a preprocessor language, which means that after you write LESS CSS, Moboom’s renderer processes it and generates standard CSS. So visitors to your site see only that standard CSS. (See the LESS docs.)
Variables are a feature of LESS. Like variables in other programming languages, LESS variables allow you to define a value once, and then use the variable throughout your CSS. That way, you can quickly change your site’s styles in one place instead of hard-coding a font, color, size, etc.
With LESS, you can create and manage variables to use throughout your CSS.
/* First create a variable */
@favcolor: #0981b6;
/* Then use it */
.section { background: @favcolor; }
Your site comes with several predefined variables, which you can access and edit on the LESS Variables page. Before we talk about the LESS Variables page, let’s talk about how your site generates CSS.
By default your site loads two stylesheets:
This stylesheet is loaded first, and it comprises classes for a variety of predefined, Bootstrap classes. If you remember from styling with CSS, your site is built on a Bootstrap framework, and this is the CSS component of that framework. (For more information on the Bootstrap classes that are loaded, check out the Bootstrap 2.3.2 docs.)
The LESS Variables page allows you to change aspects of the Bootstrap classes without having to override them.
Tip You can also define custom variables on the LESS Variables page. Then you can use these variables on the LESS Variables page (e.g., to configure other variables) or in Widget and Site Styles.
This stylesheet is loaded right after the Bootstrap styles, and it comprises the CSS that you wrote on the Widget Styles and Site Styles pages.
Of course, you can also use variables from the LESS Variables page in your Widget and Site Styles. (Learn more about styling with CSS.)
In the Widget & Site Styles stylesheet, the Site Styles come before the widget styles. So remember this order of precedence when writing CSS.
Also because of this processing order, you can define a variable or class in the Site Styles, and then reuse it in the Widget Styles, but not vice versa. (The LESS docs talk more about mix-in classes.)
Editing a LESS variable is pretty straightforward.
To edit a LESS variable:
You can also save presets, which you can then switch between to revert to an old style or to try out new styles.
To create a preset:
To switch between presets:
Here are a few quick tips for setting variables:
#cccccc), or use an RGBA color with the proper formatting (e.g., rgba(1,2,3,0.4)).
darken(@linkColor, 15%)).
As you build more sites, you’ll realize that you almost never use certain LESS variables, and certain ones you use all the time. (Many of the variables are only really useful if you develop your own custom widgets.)
Tip Bookmark this section or the cheat sheet, as they’re the sections you’ll use most often while building a site.
Here’s a list of those commonly used variables:
| @baseBorderRadius | 4px |
| @baseFontFamily | @sansFontFamily |
| @baseFontSize | 14px |
| @baseLineHeight | 20px |
| @bodyBackground | @white |
| @headingsFontFamily | inherit |
| @linkColor | #0088CC |
| @paddingLarge | 11px 19px |
| @paddingSmall | 2px 10px |
| @textColor | @grayDark |
While the LESS variables are described in detail in the following sections, you can generally figure out what a variable affects just by reading the name.
Tip Bookmark this section or the most commonly used variables, as they’re the sections you’ll use most often while building a site.
So here’s a list of every variable with its default value:
Change these variables to change the colors of links and buttons.
Sets the color or background-color for links and buttons.
#0088CC
Sets the color or background-color when hovering over links and buttons.
darken(@linkColor, 15%)
By default, the Bootstrap stylesheet does not use these variables. But you can use them to quickly add the appropriate color to a style without having to remember a hex code.
Not used by default.
#049CDB
Not used by default.
#46A546
Not used by default.
#F89406
Not used by default.
#C3325F
Not used by default.
#7A43B6
Not used by default.
#9D261D
Not used by default.
#FFC40D
These variables relate to tables. Bootstrap includes several of table-related classes. These variables will allow you to change some of the colors used in those classes.
Sets the background-color for <table>.
rgba(0,0,0,0)
Sets the background-color for the cells in an odd row when using .table-striped.
#F9F9F9
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
background: #F9F9F9;
}
Sets the hover background-color of a cell using .table-hover.
#F5F5F5
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
background: #1F5FDE;
}
Changes the border color used in several table-related classes.
#DDDDDD
These variables allow you to change the styles used in forms such as those created by the Form Constructor widget.
Sets the background color of .btn-primary. For example, a Submit button created by the Form Constructor widget uses .btn-primary.
Note The actual color of .btn-primary is a gradient from @btnPrimaryBackground to @btnPrimaryBackgroundHighlight.
Sets the hover background color of .btn-primary. For example, a Submit button created by the Form Constructor widget uses .btn-primary.
Note The actual color of .btn-primary is a gradient from @btnPrimaryBackground to @btnPrimaryBackgroundHighlight.
spin(@btnPrimaryBackground, 20%)
(See the LESS docs for an explanation of .)
Sets the background-color for .form-actions, which is a Bootstrap class that contains actions such as submit and cancel. (See the Bootstrap docs for more details.)
Note The Form Constructor widget does not use .form-actions.
#F5F5F5
Sets the background-color for <input>.
@white
Sets the border color for <input>.
#CCCCCC
Sets the border-radius for <input>.
@baseBorderRadius
Sets the background-color for a disabled (or readonly) <input>.
<input ... placeholder="This input is disabled" disabled> <input ... placeholder="This input is readonly" readonly>
@grayLighter
Sets the placeholder color for <input>.
<input ... placeholder="Here is some placeholder text">
@grayLight
The font-related variables are probably your most useful variables. With them, you can quickly change font families, sizes, weights, and colors.
Not used by default.
@serifFontFamily
Sets the font-family for the <body> and several form-related elements.
We recommend that you use this variable with another variable such as @sansFontFamily, @serifFontFamily, @altFontFamily, or even @monoFontFamily.
@sansFontFamily
Sets the font-sizes used across your site. Changing this variable will change not only paragraph text, but also, indirectly, headings (<h1> – <h6>).
In fact, this variable is used in several places throughout the Bootstrap stylesheet. So even if you need to set very specific font sizes, we recommend that you first change @baseFontSize.
14px
Besides setting the line-height for <body> and <h1> – <h6>, this variable is also used to calculate spacing through the Bootstrap stylesheet.
So even if you’d like to set line-height individually for certain elements, we recommend that you start by adjusting this variable.
20px
Sets the font-size for a couple .*-large classes:
.btn-large
.pagination.pagination-large
@baseFontSize * 1.25
Sets the font-size for a couple .*-mini classes:
.btn-mini
.pagination-mini
@baseFontSize * 0.75
Sets the font-size for a couple .*-small classes:
.btn-small
.pagination-small
@baseFontSize * 0.85
Sets the color of <h1> – <h6>.
inherit
Sets the font-family of <h1> – <h6>.
inherit
Sets the font-weight of <h1> – <h6>.
bold
Sets the font-family for <pre> and <code>.
Monaco, Menlo, Consolas, "Courier New", monospace
Sets the font-family that you would like to use for sans-serif fonts.
Tip You can use this variable as the value for other variables (such as @baseFontFamily or @headingsFontFamily) to quickly change fonts site wide.
"Helvetica Neue", Helvetica, Arial, sans-serif
Sets the font-family that you would like to use for serif fonts.
Tip You can use it as the value for other variables (such as @baseFontFamily or @headingsFontFamily) to quickly change fonts site wide.
Georgia, "Times New Roman", Times, serif
The spacing-related variables are useful when you just want to add some space between items. By using variables, you can also easily keep the spacing consistent across your site.
Sets the padding for a couple .*-large classes:
.btn-large
.pagination-large
11px 19px
Sets the padding for a couple .*-mini classes:
.btn-mini
.pagination-mini
0 6px
Sets the padding for a couple .*-small classes:
.btn-small
.pagination-small
2px 10px
The border radius–related elements set rounded corners on various elements throughout the Bootstrap stylesheet.
Try using these variables is to create a mix-in class:
.rounded-corners (@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
And then use that class whenever you want to add rounded corners:
.my-nifty-class {
.rounded-corners (@baseBorderRadius);
}
Sets rounded corners (border-radius) on several classes and elements.
4px
Sets the border-radius for several .*-large classes.
6px
Sets the border-radius for several .*-small classes.
3px
These variables set the styles for .hero-unit. (For information on the hero unit, see the Bootstrap docs.)
Note The Hero widget does not use .hero-unit.
Sets the background-color for .hero-unit.
@grayLighter
Sets the background-color for .hero-unit h1.
inherit
Sets the color for .hero-unit.
inherit
These variables set the colors for alert-related classes. (For more information on alerts, see the Bootstrap docs.)
Sets the background-color for various error classes such as .alert-danger and .alert-error.
#F2DEDE
Sets the color for various error classes such as .text-error, .alert-error, and .alert-danger.
#B94A48
Sets the background-color for various info classes such as .alert-info and .info.
#D9EDF7
Sets the color for various info classes such as .text-info and .alert-info.
#3A87AD
Sets the background-color for various success classes such as .alert-success and .success.
#DFF0D8
Sets the color for various success classes such as .text-success and .alert-success.
#468847
Sets the background-color for .text-warning and .alert.
#FCF8E3
Sets the color for .text-warning and .alert.
#C09853
The navbar variables are used to control various aspects of the Bootstrap navbar. Several widgets, such as the Responsive Menu widget, are built on the navbar. (For more information on the Bootstrap navbar, see the Bootstrap docs.)
Sets the background color for .navbar-inner.
Note The background of .navbar-inner is a gradient from @navbarbackgroundhighlight to @navbarBackground.
darken(@navbarBackgroundHighlight, 5%)
Sets the background color for .navbar-inner.
Note The background of .navbar-inner is a gradient from @navbarBackgroundHighlight to @navbarBackground.
#FFFFFF
Sets the color of .navbar .brand.
Not used by default.
@navbarCollapseWidth + 1
Not used by default.
979px
Sets height for .navbar and other classes that make up a navbar.
40px
Sets the background-color for a navbar link that has :focus.
darken(@navbarBackground, 5%)
Sets the hover background-color of navbar links.
rgba(0,0,0,0)
Sets the color of navbar links.
#777777
Sets the color for a navbar link that has :focus.
@gray
Sets the hover color of navbar links.
@grayDark
Sets the color of .navbar-text.
#777777
Dropdown variables set the colors of a dropdown menu. A dropdown menu is basically an <ul> often used as component of a navbar. (For more information on dropdown menus, see the Bootstrap docs.)
For example, .dropdown-menu is used in the Responsive Dropdown Menu widget, which is a navbar that comprises links and dropdown menus.
Sets the background-color of .dropdown-menu.
@white
Sets the border color of .dropdown-menu.
rgba(0,0,0,0.2)
Sets the background color when hovering over a .dropdown-menu link.
@dropdownLinkBackgroundActive
Sets the color of .dropdown-menu li > a.
@grayDark
Sets the color when hovering over a .dropdown-menu link.
@white