Skip to main content
MindTouch Success Center

Touchpoint branding variables

Written by Ricky Nguyen
Product Analyst at MindTouch
This page applies to:MindTouch (current)

Getting Started


If needed, be sure to learn more about CSS and Less. You can get started by reading more here.

 

Prerequisites


Touchpoint branding requires familiarity with CSS and LESS. You can target specific variables for your Touchpoints in two ways:

  1. Use the lists below to identify various elements to target.
  2. Create and deploy a Touchpoint. Leverage your browser's developer tools (for example, inspect from Chrome) to identify the exact element you want to target.

 

General Touchpoint variables


The following CSS variables can be used to target styles in your Touchpoints.

/* BACKGROUND COLORS */
@body-background: transparent;
@background: #fff;
@secondary-background: darken(@background, 10%);

/* F1 STYLES */
@f1-container-background-color: lighten(@highlight-color-desaturated, 36%);
@f1-container-border-color: lighten(@highlight-color-desaturated, 13%);
@f1-container-border-radius: .5em;

/* FONT COLORS */
@primary-font-color: #000;
@primary-font-color-desaturated: desaturate(@primary-font-color, 75%);
@secondary-font-color: lighten(@primary-font-color-desaturated, 20%); /* #333 */
@tertiary-font-color: lighten(@primary-font-color-desaturated, 40%); /* #666 */
@quaternary-font-color: lighten(@primary-font-color-desaturated, 60%); /* #999 */
@quinary-font-color: lighten(@primary-font-color-desaturated, 70%);  /*#b3b3b3 */

/* FONT FAMILY */
@default-font-family: 'Arial', 'Helvetica', sans-serif;

/* LINK COLORS */
@highlight-color: #30b3f6;
@highlight-color-desaturated: desaturate(@highlight-color, 95%);
@icon-color: #999;
@primary-link-color: @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%);
@primary-container-border-color: #bbb;
@border-radius-default: .25em;
@box-shadow-inner: inset .1em .1em .4em rgba(0, 0, 0, .15);

/* DISABLED */
@disabled-background: #ececec;
@disabled-border-color: #c6c6c6;
@disabled-link-color: #b9b9b9;

/* BUTTONS */
@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-hover-glow: fade(@default-button-border-color-hover, 50%);
@default-button-inner-shadow: inset .2em .1em .5em rgba(0, 0, 0, .3);

@primary-button-background-color: darken(@highlight-color-desaturated, 12%);
@primary-button-background-color-focus: darken(@primary-button-background-color, 15%);
@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-focus: darken(@highlight-color, 5%);
@primary-button-border-color-active: @highlight-color;
@primary-button-color: contrast(@primary-button-background-color);
@primary-button-color-focus: contrast(@primary-button-background-color-focus);
@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);

 

Touchpoint specific variables


Not all variables are used for every type of Touchpoint. You may need to get more specific using CSS selectors. Below are a few examples of important selectors for each Touchpoint.

This is a list of the most popular selectors; it is not the complete list.  Use your browser's developer tools to inspect the iframe where the Touchpoint is generated to discover more selectors.

Search in place

#mt-search-results li:nth-child(odd)
#mt-search-results li:nth-child(even)
#mt-search-results li 
.mt-widget-search-input svg path:hover
.mt-widget-search-input:hover + svg path
.mt-widget-search-input:active + svg path
.mt-widget-search-input:focus + svg path 
button.mt-icon-search
.mt-widget-search-input 

Contextual help

Contextual help Touchpoint styling is a little different compared to the other Touchpoints. You will be able to control the frame around the content, but not the content inside it (this is controlled by site branding). Additionally, the spinner and overlay can be styled but not the modal at this time.

/* TOP BAR SELECTORS */
.mt-f1-dialog-top
.mt-f1-dialog-top li
.mt-f1-dialog-top a

/* SEARCH SELECTORS */
.mt-f1-dialog-search-submit
.mt-f1-dialog-search-input

/* WRAPPER AROUND CONTENT BOX */
.mt-f1-dialog-content

/* BOTTOM BAR - THERE BUT INVISIBLE BY DEFAULT*/
.mt-f1-dialog-bottom

/* "X" BUTTON */
.mt-f1-close

Sign in

a.mt-widget-login
a.mt-widget-login a:hover
a.mt-widget-login svg

Customer insights

.mt-widget-view-activity-container
.mt-widget-result .mt-age-0
.mt-widget-result .mt-age-1
.mt-widget-result .mt-age-2
.mt-widget-result .mt-age-3

/* LEGEND BOX */
.mt-widget-color-legend 

/* SEARCH */
button.mt-icon-search
.mt-widget-search-input

 

Next steps


Refer to our overview of Touchpoint branding.

 

  • Was this article helpful?