Touchpoint variables

Overview of the branding elements of Touchpoints, including CSS variables and selectors.

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