Skip to main content

Brand your site with Less

This page applies to:MindTouch Responsive

This article describes how to use Less variables and mixins to apply some basic branding to your MindTouch site.

How to brand your MindTouch site with Less

To apply Less to your site navigate to Site tools > Control panel > Branding > Custom Site CSS.

Less does NOT work if included in a CSS block in a template or other page.

Also, don't worry about breaking your CSS when entering Less into the control panel because Less is validated before your code is applied to your site. For more information on Less functionality, visit  See below for elements to start branding in your MindTouch site right now: 

Site highlight color

The entire color scheme of MindTouch is based on the @highlight-color variable. It is used to generate all color highlights found in links, highlight containers, tables, tabs, etc, as well as generating all the shades of grey used for different container types and secondary links. Changing this variable's value will affect the colors used across the entire site.


// Default value the product ships with
@highlight-color: #30b3f6;

To see how this highlight color will affect your entire site, try adding the following variable definition into the Custom CSS found in the control panel.


// Color redefined as orange
@highlight-color: #faa319;

Site font

The default font face for MindTouch Responsive is set using the @default-font-family variable. Additional style declarations are set using the .default-font-declaration mixin.


// Default font used for site - font-family: 'Lato', arial, helvetica, sans-serif;
@default-font-family: 'Lato', arial, helvetica, sans-serif;

// Default font rule use for the site - font: normal 100%/1.2 'Lato', arial, helvetica, sans-serif;
.default-font-declaration(@font-weight: normal; @font-size: 100%; @line-height: 1.2; @font-family: @default-font-family) {
    font: @font-weight @font-size/@line-height @font-family;

Font family

If you wish to change just the font family then only use the @default-font-family variable. If you would like to change the weight, size, line-height, and font-family then use the default-font-declaration mixin.

The following is an example of what you would use in the Custom CSS to change the site's default font. You only need to define the variable. There is no need to assign it to the body tag.


// Default body font changed to font-family: 'Times New Roman', Times, serif;
@default-font-family: 'Times New Roman', Times, serif;

Font declaration

If you would like to change the full font declaration for your site then use the mixin declaration inside a body rule set. Mixins must be referenced inside a CSS rule set. Note: if you are using a mixin that receives values passed into it, use a semi-colon ; to separate each value.

// Default font rule changed to font: normal 115%/1.5 'Times New Roman', Times, serif;
body {
    .default-font-declaration(normal; 115%; 1.2; 'Times New Roman', Times, serif);

Font color

Outside of the font declaration, there is the primary color used for text in your site. There are four different font colors that are calculated based on the primary font color variable. By default they are all shades of grey based on the primary color of black.

@primary-font-color: #000;

This variable is then desaturated in another variable (@primary-font-color-desaturated), then used to calculate the following three font colors: secondary, tertiary, and quaternary.


// Black
@primary-font-color: #000;

// Desaturated primary color in case a new color is declared in custom CSS
@primary-font-color-desaturated: desaturate(@primary-font-color, 75%);

// Dark grey
@secondary-font-color: lighten(@primary-font-color-desaturated, 20%); /* #333 */

// Medium grey
@tertiary-font-color: lighten(@primary-font-color-desaturated, 40%); /* #666 */

// Light grey
@quaternary-font-color: lighten(@primary-font-color-desaturated, 60%); /* #999 */


The default link colors for a site are generated based off of the @highlight-color variable but can be redefined using the following variables.


@primary-link-color: @highlight-color;
@primary-link-color-visited: @highlight-color;
@primary-link-color-hover: lighten(@highlight-color-desaturated, 13%);
@primary-link-color-active: lighten(@highlight-color-desaturated, 13%);
@primary-link-color-focus: lighten(@highlight-color-desaturated, 13%);

If you wish to change more than just the default link colors, than use the .mt-primary-link-style mixin to add additional declarations. The following code is the default shipped with MindTouch Responsive.

.mt-primary-link-style {
    color: @primary-link-color;
    &:visited {
        color: @primary-link-color-visited;
    .no-touch &:hover {
        color: @primary-link-color-hover;
    &:active {
        color: @primary-link-color-active;
    &:focus {
        color: @primary-link-color-focus;
        outline: @primary-link-color dotted 1px;

Here is the same mixin redefined in the Custom Site CSS with an underline that appears on hover. You do not need to redefine the color declaration if you'd like to keep them. This mixin rule set will only add to the existing one.

.mt-primary-link-style {
    .no-touch &:hover {
        text-decoration: underline;

The .no-touch class selector is used to define the :hover pseudo class for non-touch screen devices only since it's not required otherwise.


There are two main types of button styles in MindTouch: default and primary. All buttons start out with the default style and only call to action buttons are given the additional class that changes the style to MindTouch: default and primary. All buttons start out with the default style and only call-to-action buttons are given the additional class that changes the style to primary.

Default buttons

Default buttons are based on the @highlight-color-desaturated variable and appear as a light shade of grey and a highlight color drop shadow or border on :hover, :active and :focus.


// Default button style variables
@default-button-background-color: lighten(@highlight-color-desaturated, 36%);
@default-button-background-color-hover: darken(@default-button-background-color, 20%);
@default-button-background-color-focus: darken(@default-button-background-color, 20%);
@default-button-background-color-active: darken(@default-button-background-color, 20%);
@default-button-border-color: darken(@default-button-background-color, 35%);
@default-button-border-color-hover: @highlight-color;
@default-button-border-color-focus: @highlight-color;
@default-button-border-color-active: @highlight-color;
@default-button-color: contrast(@default-button-background-color);
@default-button-color-hover: contrast(@default-button-background-color-hover);
@default-button-color-focus: contrast(@default-button-background-color-focus);
@default-button-color-active: contrast(@default-button-background-color-active);
@default-button-font-family: @default-font-family;
@default-button-hover-glow: fade(@default-button-border-color-hover, 50%);
@default-button-inner-shadow: inset .2em .1em .5em rgba(0,0,0,.3);

Primary buttons

Primary buttons are dark grey with a highlight color drop shadow or border on :hover,:active and :focus


// Primary button style variables
@primary-button-background-color: darken(@highlight-color-desaturated, 10%);
@primary-button-background-color-hover: darken(@primary-button-background-color, 15%);
@primary-button-background-color-active: darken(@primary-button-background-color, 15%);
@primary-button-border-color: darken(@primary-button-background-color, 35%);
@primary-button-border-color-hover: darken(@highlight-color, 5%);
@primary-button-border-color-active: @highlight-color;
@primary-button-color: contrast(@primary-button-background-color);
@primary-button-color-hover: contrast(@primary-button-background-color-hover);
@primary-button-color-active: contrast(@primary-button-background-color-active);
@primary-button-inner-shadow: inset .2em .1em .5em rgba(0,0,0,.5);


One of the most important typographical elements in an article, headings help guide readers through an article in a logical and efficient manner. They are the street signs of your page and one of the easiest ways to capture the attention of your viewers. By default, the headings in MindTouch vary in size but not color and make use of the default font of the site. To update these elements you will need to use the following variables and mixins. 


// Default styles applied to all headers at once
@heading-color: @primary-font-color;
@heading-font-family: @default-font-family;
@heading-font-size: 200%;
@heading-font-style: normal;
@heading-font-weight: normal;
@heading-line-height: 1.2;
@heading-margin: 2rem 0 .5rem;
@heading-padding: 0;

Use these variables with other heading sizes by changing out the 1 to the number you need. Ex: @h1-color would become @h2-color

// H1 variables
@h1-color: @heading-color;
@h1-font-family: @heading-font-family;
@h1-font-size: 250%;
@h1-font-style: @heading-font-style;
@h1-font-weight: @heading-font-weight;
@h1-line-height: @heading-line-height;
@h1-margin: @heading-margin;
@h1-padding: @heading-padding;

This heading mixin makes use of media queries to shrink the heading font size down for mobile sized displays. For the full list of available heading mixins, go to [your site url]/skins/styles/elm/less/imports/variables.less.

// H1 mixin
.mt-heading-h1 {
    color: @h1-color;
    font: @h1-font-style @h1-font-weight @h1-font-size/@h1-line-height @h1-font-family;
    margin: @h1-margin;
    padding: @h1-padding;
    @media all and (min-width: 18.75em) {
        font-size: (@h1-font-size * .75);
    @media all and (min-width: 37.5em) {
        font-size: @h1-font-size;

Dynamic listings

Displaying a list of sub-pages, related pages, or search results filters these dynamic containers are found throughout the site. Their minimalistic design consists of a simple rounded grey border with a highlight color glow on hover and is meant to showcase the content within.

Basic container styling

The variables associated with these containers not only control the style, but the ability to resize to their environment. This means that if the screen size shrinks down, the listings will shrink or grow and change their row count automatically. 


// Basic dynamic listing style variables
@dynamic-listing-border-color: lighten(@highlight-color-desaturated, 13%);
@dynamic-listing-border-color-hover: @highlight-color;
@dynamic-listing-edit-border-color: darken(@highlight-color-desaturated, 18%);
@dynamic-listing-edit-border-color-hover: @highlight-color;
@dynamic-listing-hover-glow: fade(@default-button-border-color-hover, 30%);

// Basic dynamic listing mixins that control the above style variables
.flexbox-style {
    border: 1px solid @dynamic-listing-border-color;
    border-radius: @border-radius-lsf;
    box-sizing: border-box;
.flexbox-style-hover {
    border-color: @dynamic-listing-border-color-hover;
    box-shadow: 0 .1em 0 rgba(0,0,0,.05), 0 0 .8em @dynamic-listing-hover-glow;
.flexbox-style-edit {
    border: 1px dashed @dynamic-listing-edit-border-color;
    box-sizing: border-box;
.flexbox-style-edit-hover {
    border-color: @dynamic-listing-edit-border-color-hover;
    box-shadow: 0 .1em 0 rgba(0,0,0,.05), 0 0 .8em @dynamic-listing-hover-glow;

Advanced styling

For more advanced control over the flexibility of these dynamic listings, there are two advanced mixins that can be used. You will need experience with using media queries for different screen sizes. The first mixin, .display-flex is meant to be applied to the parent container the listings will be displayed in; usually an <ol> or <ul>. The second mixin .flexbox-listing is meant for the child elements or individual listings. The values that this mixin may contain have to do with the CSS3 specification for flexbox (CSS Flexible Box Layout) and require an advanced knowledge of CSS. For more information about flexbox please visit the specification page located at

// Flex display mixin for parent container
.display-flex {
    align-content: flex-start;
    align-items: stretch;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;

// Flex display mixin for each listing
.flexbox-listing(@flex-grow: 1; @flex-shrink: 1; @flex-basis: 18em) {
    -ms-flex: @flex-grow @flex-shrink @flex-basis;
    -webkit-flex: @flex-grow @flex-shrink @flex-basis;
    flex: @flex-grow @flex-shrink @flex-basis;
    min-width: 0;

What's next?

For the more advanced branding of your site, learn more about using CSS and Less to brand your site.