CSS
Brief Overview
Cascading Style Sheets (CSS) allow you to customize the look and feel of your WalkMe content, including the layout, colors, and fonts.
The CSS feature in WalkMe allows for customization of certain content types, including Smart Walk-Thru steps, Surveys, and the WalkMe Menu.
Get Stylin' with CSS Webinar
Use Cases
CSS use cases include the following:
- Insert an image or logo in a balloon
- Change the width of or remove arrows from a balloon
- Change the text of a Next button
How It Works
CSS is a style sheet language used for describing the formatting of a document written in a markup language. When writing CSS, you will need to refer to the different components, or elements of your WalkMe content.
Each WalkMe item includes a number of components (elements) that can be customized with CSS.
For example, you can target the title section of a balloon by using this class:
- .walkme-custom-balloon-title
Global vs. local rules
CSS can be applied globally or locally. Using the local CSS Console makes it easy to customize an individual WalkMe item. If you are customizing on the global level, you must enter the ID of the WalkMe item.
Local level example: .walkme-custom-balloon-title
Global level example: #walkme-balloon-XXXXXXX.walkme-custom-balloon-title
Edit local CSS
- Open the item settings 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
- Click Save
- Click Publish settings
Find & replace shortcuts
You can use the following keyboard shortcuts (Windows / Mac) to find and replace in the CSS Console:
- Find: Ctrl-F / Cmd-F (press enter to find next, Shift-Enter to find previous)
- Replace: Ctrl-R / Cmd-R
- Jump to line: Ctrl-J / Cmd-J
Watch a quick demo below:
Find WalkMe ID
- Hover over the item in the editor
- Click the Options menu
- Click Copy ID
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;
}
Most Common CSS Customizations
Smart Walk-Thrus
Surveys
WalkMe Menu
ActionBot
Classic ShoutOuts
General WalkMe
Change the global WalkMe font
Launchers
Change the font
font-family: /*your font here*/ !important;
}
SmartTips
Change the font
font-family: /*your font here*/ !important;
}
Hide tooltips
Technical Information
- Local CSS always overrides global CSS
- Adding CSS to your WalkMe content may also affect CSS on the site where the content is being viewed
- If proper indentation and whitespaces aren't added to the Global CSS, it won't be published or viewable in Play mode, but will remain visible in Preview mode
- The best practice is to format code in a Integrated Develop Environment (IDE), such as Visual Studio Code or Sublime, and first test in the Flow Tracker
- For CSS changes to take effect, you need to perform a Settings publish
- When changing text using CSS, keep in mind that this may override any translations
- The following terms are not supported and may cause errors:
- @import
- expression
- javascript
- -moz-binding
- -o-link
- behavior
- Only Classic ShoutOuts support CSS
- CSS cannot affect shadow Dom elements