Last Updated June 2, 2022
Please note, this article only provides a basic understanding of using CSS with the WalkMe Menu and Widget. It is recommended to have prior knowledge of using CSS beforehand.
Brief Overview
Cascading Style Sheets (CSS) allows you to customize the look and feel of a document including elements such as the layout, colors, and fonts. We can use CSS to apply advanced customization to the WalkMe Menu.
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 the WalkMe Menu.
When typing into the Custom CSS window, WalkMe displays auto-complete options for selectors, properties, and values. Global CSS is added in the Customize menu accessed from the Admin Bar.
Before entering the rules in the Customize menu’s CSS tab, you can check if the CSS rule works by inserting it in the Custom CSS tab in the Flow Tracker.
How it Works
The WalkMe Menu can only be customized globally, as there is only one Menu. Any CSS rule for the Menu must begin with the following ID: #walkme-menu. This rule can be further narrowed down by the type, which is #walkme-menu.walkme-penguin. Additional components of the player can be added to this chain.
For example:
#walkme-menu.walkme-penguin .walkme-title (see below for a full list of classes).
Using !important
By default, the WalkMe theme design overrides any other design changes to the Menu. In order for CSS to be applied properly, the CSS rule must contain !important to ensure it overrides the default styling.
For example:
.walkme-out-wrapper { color: #000 !important; }
There are several different widget styles and themes you can choose from in the Customize Player tab in the Customize menu. When adding CSS, some of the following classes are relevant to all Menu options, while others appear only in some.
| div |
Editable Attributes |
Applicable Menu Styles |
| .walkme-out-wrapper |
This element surrounds the entire WalkMe Menu. You’ll be able to edit:
|
Danube
Colorado
Mississippi |
| .walkme-in-wrapper |
This element surrounds the entire WalkMe Menu. You’ll be able to edit:
- border radius
- height & width
- background
- border
- border-radius
- box-shadow
|
Danube
Colorado
Mississippi |
| .walkme-title |
This element contains the text. The default position is absolute. You’ll be able to edit:
- font-color
- font-size
- font-family
|
Danube
Colorado
Mississippi |
| .walkme-bar |
This element contains the text. You’ll be able to edit:
|
Danube
Mississippi |
| .walkme-question-mark |
This element contains the question mark on the left side. The question mark itself is a character and therefore can be designed using:
- font-color
- font-size
- font-family
- width
- padding
|
Colorado |
| .walkme-arrow |
This element contains the arrow to the right of the text. The default position is absolute. The arrow is a character and therefore can be designed using:
- font-color
- font-size
- Font-family
- right & bottom
|
Mississippi |
| #walkme-player |
The Zambezi triangle widget is an image. In order to change its color, a new image should be designed, uploaded and replace the existing image:
background-image: url(‘https://knowledge.walkme.com/download/thumbnails/6915638/puppy.png’) !important; |
Zambezi |
Publish Changes in CSS
In order for changes in CSS to become live, you will need to publish.
Some changes that can be applied to your account aren’t reflected in the Publish menu. These include changes that are made to the following items and more:
This is because any change in your account that doesn’t relate to a specific WalkMe item will be pushed to your environment as soon as you publish any new or existing content. This means that if you’ve recently applied changes to one of your global segments, and then published an unrelated Walk-Thru, the changes made to your segment will be published as well.
To publish changes you’ve made to the CSS, perform a “settings publish” as follows:
- Click Publish in the Admin Bar
- Open the Publish tab
- If all you are doing is publishing changes to CSS, deselect all items
- Click Publish
Tip Tuesday Videos
To see more Tip Tuesday videos on WalkMe World click here.
