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:

  1. On your Bootstrap-based website, edit ~/Frontend/Styles/bootstrap/variables.less.
  2. Change one or more variables.
  3. Save the variables.less file.
  4. 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;