Skip to main content
NICE CXone Expert

We will be updating our infrastructure on Dec 2, 2023. Sites will be down starting at 8pm Pacific time. This may last up to 3 hours.

Expert Success Center

Home page variables

Applies to:
MindTouch (current)
Role required:
N/A
The MindTouch custom homepage allows site owners to brand their site faster with LESS variables and mixin associated with the custom home template.

 

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);
    }
}
  • Was this article helpful?