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