CSS for Smart Walk-Thrus

Brief Overview

Using Cascading Style Sheets (CSS) allows you to customize Smart Walk-Thru elements, including the layout, colors, and fonts.

When writing CSS, references to various components or elements of the Smart Walk-Thru are essential. This article provides an overview of the CSS options available for personalizing these advanced elements.

To customize Smart Walk-Thrus using the default options, view the Smart Walk-Thru: Getting Started Guide.

CSS

How It Works

Smart Walk-Thru components

Each Smart Walk-Thru includes a number of components (elements) that can be customized with CSS. Smart Walk-Thrus can be customized both locally and globally.

If you are customizing a single Smart Walk-Thru on the global level, you must enter the Smart Walk-Thru ID before the class that identifies the balloon.

Local level example:

• .walkme-custom-balloon-title

Global level example:

• #walkme-balloon-XXXXXXX.walkme-custom-balloon-title

The Smart Walk-Thru ID can be found in the WalkMe Editor:

1. Hover over the Smart Walk-Thru in the editor
2. Click the Options menu 
3. Select Copy ID

See below for a full list of classes.

Using !important

By default, the WalkMe theme design overrides any other design changes.

In order for CSS to be applied, the CSS rule must contain “!important” to ensure that it overrides the default styling.

Example:

#walkme-balloon-1760356.walkme-custom-balloon-title {

color: #000 !important;

}

Edit local CSS

1. Open the Smart Walk-Thru Step Options menu
2. Go to the Interaction tab
3. Click Edit CSS
4. Enter the custom CSS in the CSS Console
5. Click Save

Edit global CSS

1. Click Edit global CSS in the WalkMe Editor settings menu
2. Enter the custom CSS in the CSS editor
3. Replace highlighted sections in the CSS below with your customizations
4. Click Save
5. Click Publish settings

Configurable Smart Walk-Thru Components

Common CSS Customizations

Remove the 'X' button from a balloon

.walkme-custom-balloon-close-button {
display:none !important;
}

Remove the side borders of a balloon

.walkme-custom-side-border {
display: none !important;
}

Change the balloon side border color

.walkme-custom-side-border {
background-color: red !important;
}

Change balloon background color

#walkme-balloon-XXXXXXX .walkme-custom-balloon-content-wrapper {
background-color: green !important;
}

Alter the width of a balloon

#walkme-balloon-xxxxxxx {
width: 300px !important;
min-width: 0 !important;
padding: 10px !important;
}