Help Center
Welcome to the WalkMe Help Center

Please login in order to continue:

Work flows better with WalkMe
Work flows better with WalkMe.

CSS for Smart Walk-Thrus

Last Updated June 13, 2024

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

Local CSS overrides all other designs.
  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
Tip

Configurable Smart Walk-Thru Components

DIV Editable Features
1 .walkme-custom-side-border Left side balloon border:
  • display
  • background
2 .walkme-custom-balloon-separator Balloon separator (bottom third):
  • display
3 .walkme-custom-balloon-title Balloon header:
  • text-align
  • font-color
  • font-size
  • font-family
  • padding
  • margin
4 .walkme-custom-balloon-content Balloon text:
  • text-align
  • font-color
  • font-size
  • font-family
  • padding
  • margin
5 .walkme-custom-balloon-subtext Step number:
  • text-align
  • font-color
  • font-size
  • font-family
  • display
6 .walkme-custom-balloon-back-button Back button:
  • color
  • font-size
  • font-family
  • width
  • height
  • background
  • border-radius
7 .walkme-custom-balloon-next-button Next button:
  • color
  • font-size
  • font-family
  • width
  • height
  • background
  • border-radius

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;
}

Remove an arrow from a balloon

.walkme-custom-balloon-arrow.walkme-custom-flow-balloon-xxxxxxx{
display: none !important;
}

Remove step numbers from a balloon

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

Change the font of a balloon

.walkme-custom-balloon-title,
.walkme-custom-balloon-content,
.walkme-custom-balloon-button-text {
font-family: /*your font here*/ !important;
}

Apply Z-Index changes to all Smart Walk-Thru balloons

.div.walkme-custom-walkthru-xxxxx.walkme-custom-simple-step {

z-index:0 !important;

}
.div.walkme-custom-walkthru-xxxxx.walkme-custom-balloon-arrow {

z-index:0 !important;

}

Make the default body text size match the header size

.walkme-custom-balloon-title, .walkme-custom-balloon-content {

font-size: 12px !important;

}

Reduce the white space in balloons that do not have the Next/Back button

.walkme-custom-balloon-bottom-div:has(.walkme-custom-balloon-no-buttons-div) {

display: none !important;

}

.walkme-custom-balloon-inner-div:has(.walkme-custom-balloon-no-buttons-div) {

padding-bottom: 20px !important;

}

Was this article helpful?

Thanks for your feedback!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×