Available LESS variables in the theme

In the theme folder you can find the LESS variables in the following files:

  • /assets/less/variables.less (Twitter Bootstrap variables)
  • /assets/less/{theme-name}-variables.less (where {theme-name} is the current theme name like schema-corporate)

You can edit these files directly or (which is better if you want to get automatic updates): you can edit the variables directly on the themes options page. Just activate custom colours and scroll down to the “LESS Variable Changer”.

Here is a short excerpt of the variables.less:

// Grays
// -------------------------
@black:                 #000;
@grayDarker:            #222;
@grayDark:              #333;
@gray:                  #555;
@grayLight:             #999;
@grayLighter:           #eee;
@white:                 #fff;

// Accent colors
// -------------------------
@blue:                  #049cdb;
@blueDark:              #0064cd;
@green:                 #46a546;
@red:                   #9d261d;
@yellow:                #ffc40d;
@orange:                #f89406;
@pink:                  #c3325f;
@purple:                #7a43b6;

// Scaffolding
// -------------------------
@bodyBackground:        @white;
@textColor:             @grayDark;

// Links
// -------------------------
@linkColor:             #08c;
@linkColorHover:        darken(@linkColor, 15%);

// Typography
// -------------------------
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;

@baseFontSize:          14px;
@baseFontFamily:        @sansFontFamily;
@baseLineHeight:        20px;
@altFontFamily:         @serifFontFamily;

@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight:    bold;    // instead of browser default, bold
@headingsColor:         inherit; // empty to use BS default, @textColor

// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height

@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
@fontSizeMini:          @baseFontSize * 0.75; // ~11px

@paddingLarge:          11px 19px; // 44px
@paddingSmall:          2px 10px;  // 26px
@paddingMini:           0 6px;   // 22px

@baseBorderRadius:      4px;
@borderRadiusLarge:     6px;
@borderRadiusSmall:     3px;

// Tables
// -------------------------
@tableBackground:                   transparent; // overall background-color
@tableBackgroundAccent:             #f9f9f9; // for striping
@tableBackgroundHover:              #f5f5f5; // for hover
@tableBorder:                       #ddd; // table and cell border

// Buttons
// -------------------------
@btnBackground:                     @white;
@btnBackgroundHighlight:            darken(@white, 10%);
@btnBorder:                         #bbb;

@btnPrimaryBackground:              @linkColor;
@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);

@btnInfoBackground:                 #5bc0de;
@btnInfoBackgroundHighlight:        #2f96b4;

@btnSuccessBackground:              #62c462;
@btnSuccessBackgroundHighlight:     #51a351;

@btnWarningBackground:              lighten(@orange, 15%);
@btnWarningBackgroundHighlight:     @orange;

@btnDangerBackground:               #ee5f5b;
@btnDangerBackgroundHighlight:      #bd362f;

@btnInverseBackground:              #444;
@btnInverseBackgroundHighlight:     @grayDarker;

// Forms
// -------------------------
@inputBackground:               @white;
@inputBorder:                   #ccc;
@inputBorderRadius:             @baseBorderRadius;
@inputDisabledBackground:       @grayLighter;
@formActionsBackground:         #f5f5f5;
@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border

// Dropdowns
// -------------------------
@dropdownBackground:            @white;
@dropdownBorder:                rgba(0,0,0,.2);
@dropdownDividerTop:            #e5e5e5;
@dropdownDividerBottom:         @white;

@dropdownLinkColor:             @grayDark;
@dropdownLinkColorHover:        @white;
@dropdownLinkColorActive:       @white;

@dropdownLinkBackgroundActive:  @linkColor;
@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;

// (and a lot more)

Here is the content of the schema-corporate-variables.less (Version 1.4):

@fontSizeXL: @baseFontSize * 2; // ~24px
@fontSizeXXL: @baseFontSize * 2.75; // ~40px

// The standard border colors
@border-color: #d4d4d4;
@border-width: 1px;
@border-style: solid;
@border: @border-width @border-style @border-color;
@border-radius: 5px;

// the header (with title, subtitle, logo, etc.)
@header-background-color: #fcfcfc;
@header-border: @border;

@header-title-font-family: @headingsFontFamily;
@header-title-font-size: @fontSizeXXL;
@header-title-font-color: #515151;

@header-subtitle-font-family: @headingsFontFamily;
@header-subtitle-font-color: #777777;
@header-subtitle-font-size: @baseFontSize;

// the background color of some rows
@frontpage-row-background-color: #f3f3f3;

// The twiter widget
@widget-twitter-background: #ffffff;
@widget-twitter-border: @border;

// Gradients
@gradient-start-color: #ffffff;
@gradient-end-color: #efefef;

// Box shadows
@box-shadow-outer: 0 1px 3px -1px rgba(0, 0, 0, 0.15);

@layout-box-shadow-outer: 0 2px 3px 1px rgba(0, 0, 0, 0.15);

// The footer sections
@footer-1-font-size: @baseFontSize;
@footer-1-font-color: @textColor;
@footer-1-link-color: @textColor;
@footer-1-link-color-hover: @textColor;
@footer-1-background: url( %("%s/assets/img/textile-light.jpg", @theme-uri) );

@footer-2-font-size: @fontSizeMini;
@footer-2-font-color: fade( @textColor, 50% );
@footer-2-link-color: @footer-2-font-color;
@footer-2-link-color-hover: @footer-2-font-color;
@footer-2-background: none;

// Headerbar colors
@headerbar-font-size: @fontSizeSmall;
@headerbar-font-color: #ffffff;
@headerbar-link-color: @headerbar-font-color;
@headerbar-link-color-hover: @headerbar-link-color;
@headerbar-background: url( %("%s/assets/img/textile-black.jpg", @theme-uri) );

// Sidebars
@sidebar-background-color: #F4F4F4;

// Content background colors
@content_background_color: #ffffff;

// Header navigation link colors
@header-nav-link-color: #0088CC;

Available icons

We always support the latest version of FontAwesome. Please go to your themes documentation page to check out what version is currently built in.

[box type=”info”]Note: To use an icon you only need the name of the icon. For example if you want to use the “icon-exclamation-sign” icon you only need to copy and paste exclamation-sign (without the icon- at the beginning). Browse icons. [/box]

Font Awesome Icon Examples

Example: How to use an icon for a button

  1. Go to the website of FontAwesome.
  2. Search for any icon you want. For example: the icon-medkit ([icon icon=”medkit”])
  3. For a button you can use the following shortcode, included the icon:
[[button icon="medkit"]This is a button with medkit icon.[/button]]