Skip to main content
MindTouch Success Center

Customize text links

This page applies to:MindTouch (current)

Links are styled with pseudo classes in addition to their default selector rule set. They need to stand out from their surrounding content in all their states for accessibility reasons. There are a few ways to control how your links will look: through a variable, a mixin, or a class added to an element.

 

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?