Skip to main content

 

MindTouch Success Center

Customize the home template

This page applies to:MindTouch (current)

The MindTouch custom home page allows site owners to brand their site faster. This article contains the LESS variables and mixin associated with the custom home template.

 

Screenshots


Desktop screenshot

custom-home-desktop.png
 

Tablet screenshot

custom-home-tablet.png
 

Mobile screenshot

custom-home-mobile.png
 

Variables


@splash-container-base-color
Default value: @highlight-color  
Definition: The color that the splash container background gradient is based on. Defaults to site's highlight color.
@splash-container-background-color
Default value: fade(@splash-container-base-color, 35%)  
Definition: This is the background color underneath the semi-transparent gradient.
@splash-container-background-color-lighter
Default value: fade(lighten(@splash-container-base-color, 37%), 75%)  
Definition: A lighter version of the splash container's base color.
@splash-container-background-color-darker
Default value: fade(darken(@splash-container-base-color, 15%), 50%)  
Definition: A darker version of the splash container's base color.
@splash-container-border-color
Default value: @splash-container-base-color  
Definition: The color of the border around the splash container.
@splash-container-color
Default value: contrast(@splash-container-background-color);  
Definition: The font color for any text added to the splash container.
@splash-container-color-h1
Default value: contrast(@splash-container-background-color-lighter);  
Definition: An override for the <h1> font color found inside the splash container. This text color will change from white to black to get the most contrast between it and the background gradient.
@splash-container-font-family
Default value: @default-font-family
Definition: The typeface used inside the splash container.
@splash-container-link-color
Default value: @splash-container-base-color  
Definition: The color of links inside the splash container.
@splash-container-link-color-visited
Default value: @splash-container-base-color  
Definition: The color of a link in the splash container that has previously been clicked.
@splash-container-link-color-hover
Default value: darken(@splash-container-base-color, 15%)  
Definition: The color of a link in the splash container when a user moves their mouse over it.
@splash-container-link-color-active
Default value: darken(@splash-container-base-color, 15%)  
Definition: The color of a link in the splash container when a user clicks on it or hits enter after tabbing to it with their keyboard.
@splash-container-link-color-focus
Default value: darken(@splash-container-base-color, 15%)  
Definition: The color of a link in the splash container when a user has tabbed to it.
 

Mixin


The splash container has a mixin that will calculate the background gradient, generate styles for links and headers, and sets a color for the border and text.

.mt-splash-container {
    background: radial-gradient(ellipse at 50% 65%,@splash-container-background-color-lighter 35%,@splash-container-background-color 75%, @splash-container-background-color-darker 100%) @splash-container-background-color;
    border: solid @splash-container-border-color;
    border-width: 1px 0;
    color: @splash-container-color;
    font-family: @splash-container-font-family;
    .columbia-browser-safari & {
        background: radial-gradient(ellipse at 50% 65%,fade(@splash-container-background-color-lighter, 5%) 45%,fade(@splash-container-background-color, 35%) 75%, fade(@splash-container-background-color-darker, 35%) 100%) @splash-container-background-color-lighter;
    }
    & a {
        color: @splash-container-link-color;
        &:visited {
            color: @splash-container-link-color-visited;
        }
        .no-touch &:hover {
            color: @splash-container-link-color-hover;
        }
        &:active,
        .no-touch &:active {
            color: @splash-container-link-color-active;
        }
        &:focus {
            color: @splash-container-link-color-focus;
        }
    }
    & h1 {
        color: @splash-container-color-h1;
        text-shadow: 1px 1px 1px contrast(@splash-container-color-h1);
    }
}