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.
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:
- Hover over the Smart Walk-Thru in the editor
- Click the Options menu
- 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
- Open the Smart Walk-Thru Step Options menu
- Go to the Interaction tab
- Click Edit CSS
- Enter the custom CSS in the CSS Console
- Click Save
Edit global CSS
- Click Edit global CSS in the WalkMe Editor settings menu
- Enter the custom CSS in the CSS editor
- Replace highlighted sections in the CSS below with your customizations
- Click Save
- Click Publish settings
Configurable Smart Walk-Thru Components
DIV | Editable Features | |
---|---|---|
1 | .walkme-custom-side-border | Left side balloon border:
|
2 | .walkme-custom-balloon-separator | Balloon separator (bottom third):
|
3 | .walkme-custom-balloon-title | Balloon header:
|
4 | .walkme-custom-balloon-content | Balloon text:
|
5 | .walkme-custom-balloon-subtext | Step number:
|
6 | .walkme-custom-balloon-back-button | Back button:
|
7 | .walkme-custom-balloon-next-button | Next button:
|
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-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;
}