Skip to main content
MindTouch Success Center

Link variables

Links

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.

Primary links

These are the most common links in your site and usually exist inside your content areas. They use the @highlight-color variable to remain consistent with your the color theme.

Screenshot

link-primary.png

Variables

@primary-link-color
Default value: @highlight-color  
Definition: The color of a link when the page has finished loading and the user has taken no action.
Primary1.png
@primary-link-color-visited
Default value: @highlight-color  
Definition: The color of a link that has been previously clicked on.
Primary2.png
@primary-link-color-hover
Default value: lighten(@highlight-color-desaturated, 13%)  
Definition: The color of a link when the user moves their mouse over it.
Primary3.png
@primary-link-color-active
Default value: lighten(@highlight-color-desaturated, 13%)  
Definition: The color of a link when the user clicks on it. Can also be seen when a user tabs with a keyboard to the link and then presses enter.
Primary4.png
@primary-link-color-focus
Default value: lighten(@highlight-color-desaturated, 13%)  
Definition: The color of a link that has been tabbed to with a keyboard.
Primary5.png

Mixins

This mixin will generate all of the pseudo classes that go along with your links.

.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;
    }
}

CSS class

There is a CSS class selector that can be used to call in the Mixin. You will need to add a class to your HTML for this to work.

// Example of adding the class "mt-primary-link" to a link in your HTML
<a class="mt-primary-link" href="http://mindtouch.com">www.mindtouch.com</a>

 

Secondary links

Typically used for links that don't need to stand out from their content. Used for Article Feedback buttons, drop-downs, select menus, and other secondary controls.

Screenshot

link-secondary.png

dropdown-links.png

Variables

@secondary-link-color
Default value: lighten(@primary-font-color, 60%)  
Definition: The color of a link when the page has finished loading and the user has taken no action.
Secondary1.png
@secondary-link-color-visited
Default value: lighten(@primary-font-color, 60%)  
Definition: The color of a link that has been previously clicked on.
Secondary2.png
@secondary-link-color-hover
Default value: @highlight-color  
Definition: The color of a link when the user moves their mouse over it.
Secondary3.png
@secondary-link-color-active
Default value: @highlight-color  
Definition: The color of a link when the user clicks on it. Can also be seen when a user tabs with a keyboard to the link and then presses enter.
Secondary4.png
@secondary-link-color-focus
Default value: @highlight-color  
Definition: The color of a link that has been tabbed to with a keyboard.
Secondary5.png

Mixins

This mixin will generate all of the pseudo classes that go along with your links.

.mt-secondary-link-style {
    color: @secondary-link-color;
    &:visited {
        color: @secondary-link-color-visited;
    }
    .no-touch &:hover {
        color: @secondary-link-color-hover;
    }
    &:active {
        color: @secondary-link-color-active;
    }
    &:focus {
        color: @secondary-link-color-focus;
    }
}

CSS class

There is a CSS class selector that can be used to call in the Mixin. You will need to add a class to your HTML for this to work.

// Example of adding the class "mt-secondary-link" to a link in your HTML
<a class="mt-secondary-link" href="http://mindtouch.com">www.mindtouch.com</a>

Tertiary links

These are the rarest of the links in MindTouch Responsive. They can be found in the TOC expand/collapse toggle, the page settings toggle, and a few admin only features. It is best practice not to use them in regular content since there isn't enough contrast between the link and the font colors.

Screenshots

link-tertiary.png

toc-button.png

Variables

@tertiary-link-color
Default value:  
Definition: The color of a link when the page has finished loading and the user has taken no action.
Tertiary1.png
@tertiary-link-color-visited
Default value:  
Definition: The color of a link that has been previously clicked on.
Tertiary2.png
@tertiary-link-color-hover
Default value:  
Definition: The color of a link when the user moves their mouse over it.
Tertiary3.png
@tertiary-link-color-active
Default value:  
Definition: The color of a link when the user clicks on it. Can also be seen when a user tabs with a keyboard to the link and then presses enter.
Tertiary4.png
@tertiary-link-color-focus
Default value:  
Definition: The color of a link that has been tabbed to with a keyboard.
Tertiary5.png

Mixins

This mixin will generate all of the pseudo classes that go along with your links.

.mt-tertiary-link-style {
    color: @tertiary-link-color;
    &:visited {
        color: @tertiary-link-color-visited;
    }
    .no-touch &:hover {
        color: @tertiary-link-color-hover;
    }
    &:active {
        color: @tertiary-link-color-active;
    }
    &:focus {
        color: @tertiary-link-color-focus;
    }
}

CSS class

There is a CSS class selector that can be used to call in the Mixin. You will need to add a class to your HTML for this to work.

// Example of adding the class "mt-tertiary-link" to a link in your HTML
<a class="mt-tertiary-link" href="http://mindtouch.com">www.mindtouch.com</a>
  • Was this article helpful?