Customizing Styles
Fine-tune the looks of your website by changing LESS variables
You can change the looks of a Bootstrap-based starter site by changing values of LESS variables in ~/Frontend/Styles/bootstrap/variables.less:
- On your Bootstrap-based website, edit
~/Frontend/Styles/bootstrap/variables.less. - Change one or more variables.
- Save the
variables.lessfile. - Refresh the website (F5).
Most common variables to change
Below is the list of most important variables. Changing them changes the look and feel of the site.
Gray and brand colors
@gray-base: #000; @gray-darker: lighten(@gray-base, 13.5%); // #222 @gray-dark: lighten(@gray-base, 20%); // #333 @gray: lighten(@gray-base, 33.5%); // #555 @gray-light: lighten(@gray-base, 46.7%); // #777 @gray-lighter: lighten(@gray-base, 93.5%); // #eee @brand-primary: #4189ff; @brand-success: #5cb85c; @brand-info: #5bc0de; @brand-warning: #f0ad4e; @brand-danger: #d9534f;
Background color for <body>
@body-bg: #f0efed;
Global text color on <body>
@text-color: @gray-dark;
Typography
@font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; @font-size-base: 18px; @font-size-large: ceil((@font-size-base * 1.25)); // ~18px @font-size-small: ceil((@font-size-base * 0.85)); // ~12px @font-size-h1: floor((@font-size-base * 2.6)); // ~36px @font-size-h2: floor((@font-size-base * 2.15)); // ~30px @font-size-h3: ceil((@font-size-base * 1.7)); // ~24px @font-size-h4: ceil((@font-size-base * 1.25)); // ~18px @font-size-h5: @font-size-base; @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
Global textual link color
@link-color: @brand-primary; @link-hover-color: darken(@link-color, 15%); @link-hover-decoration: underline;