Support Center

CSS

Last Updated: May 22, 2017 06:31AM PDT

Customize

CSS

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 balloons, the Player, ShoutOuts, and Surveys.
 
 

Article Contents

 

The Short Version

The CSS feature in WalkMe allows for full customization of Walk-Thrus, Walk-Thru steps, and the WalkMe Player Menu. Before entering the rules in the Customize CSS tab, you can check if the CSS rule we created actually works by inserting it in the Custom CSS tab in the Flow Tracker

CSS can be used to: 
  • Insert an image/logo in a balloon
  • Customize a Welcome ShoutOut for your site
  • Change the width or remove arrows from a balloon
  • Change the text of the Next button


Deep Dive

How It Works
Cascading Style Sheets (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 (technically known as elements) of the WalkMe Balloons or Player Menu. CSS can be written globally for these items, or you can target one specific balloon or Walk-Thru by referring to the Step or Walk-Thru ID. When typing into the Custom CSS window, WalkMe displays autocomplete options for selectors, properties, and values. CSS is added in the Customize menu accessed from the Admin bar.

Configuring Balloon Components
Each Balloon includes a number of components (elements) that can be customized with CSS include different options for customization. For example, you can target the title section of a balloon by using this class: .walkme-custom-balloon-title (see below for a full list of classes).

Global versus Local rules for Balloons
CSS can be applied globally to all balloons or individually to a specific balloon.
To specify a single balloon, the ID identifying that balloon should appear before the class that identifies the balloon section.

For example:
#walkme-balloon-1760356.walkme-custom-balloon-title

The balloon number specified is called the Step ID and can be found in the Notes menu in your step options.

To identify a specific Walk-Thru, a similar format is used:
.walkme-custom-walkthru-[1234567].walkme-custom-balloon-title

The Walk-Thru ID can be found in the Walk-Thru Settings Menu under Advanced Settings.

Using !important
By default, the WalkMe theme design overrides any other design changes to a balloon or Walk-Thru. In order for CSS to get applied, the CSS rule must contain !important, to make sure it overrides the default styling.

For example:
#walkme-balloon-1760356 .walkme-custom-balloon-title {
color: #000 !important;
}


Configurable Components
  div Editable Attributes
1 .walkme-custom-side-border This element is the left side balloon border. You’ll be able to edit:
  • display
  • background
2 .walkme-custom-balloon-separator This element is the separator on the bottom third of the balloon. You’ll be able to edit:
  • display
3 .walkme-custom-balloon-title This element is the Balloon Header. You’ll be able to edit:
  • text-align
  • font-color
  • font-size
  • font-family
  • padding
  • margin
4 .walkme-custom-balloon-content This element is the Balloon Text. You’ll be able to edit:
  • text-align
  • font-color
  • font-size
  • font-family
  • padding
  • margin
5 .walkme-custom-balloon-subtext This element is step number. You’ll be able to edit:
  • text-align
  • font-color
  • font-size
  • font-family
  • display
6 .walkme-custom-balloon-back-button This element is the back button. You’ll be able to edit:
  • font-color
  • font-size
  • font-family
  • width
  • height
  • background
  • border-radius
7 .walkme-custom-balloon-next-button This element is the next button. You’ll be able to edit:
  • font-color
  • font-size
  • font-family
  • width
  • height
  • background
  • border-radius
8 .walkme-custom-balloon-close-button This element is the X button. You’ll be able to edit:
  • font-color
  • font-size
  • font-family
  • right
  • margin

Configuring The Player
Structure for the Player Menu
The Player Menu can only be customized globally, as there is only one Player Menu. Any CSS rule for the Player must begin with the following ID #walkme-menu. This rule can be further narrowed down by the player 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 a Player. In order for CSS to get applied, the CSS rule must contain !important, to make sure it overrides the default styling.

For example:
.walkme-out-wrapper {
color: #000 !important;
}


Closed Player
There are several different widget styles and themes you can choose from in the Customize Widget tab. When adding CSS, some of the following classes are relevant to all widget options while others appear only in some.
div Editable Attributes Applicable Player Styles
.walkme-out-wrapper This element surrounds the entire Player Menu. You’ll be able to edit:
  • border-radius
Danube
Colorado
Mississippi
.walkme-in-wrapper This element surrounds the entire Player 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:
  • background-color
  • width
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

Open Player
div Editable Attributes
.walkme-minimize This element contains the close button The element is a character and therefore can be designed using:
  • font-color
  • font-size
  • font-family
  • width & height
  • background-image
.walkme-main This element surrounds the entire Player Menu. You’ll be able to edit:
  • background
  • border
  • border-radius
  • box-shadow
  • dimensions
.Border-left-color This element contains the line on the left side of the menu. You’ll be able to edit:
  • color
.walkme-contents This element contains all the content. You’ll be able to edit:
  • top & bottom
  • padding
.walkme-deployables-list This element contains the outer wrapper of the deployable list, which includes Walk-Thrus, content items, and tasks. You’ll be able to edit:
  • width & height
  • padding & margin
  • top
  • border
  • background
.walkme-deployable-icon This element contains the deployable icon. You’ll be able to edit:
  • font-color
  • font-size
  • font-family
  • margin & padding
  • width & height
  • background-image
.walkme-text This element wraps the deployable name & description.You’ll be able to edit:
  • padding
  • width
.walkme-deployable-name This element wraps the text of a deployable. You’ll be able to edit:
  • font-color
  • font-size
  • font-family
  • white-space
.walkme-description This element contains the description that can be added to a deployable. You’ll be able to edit:
  • font-color
  • font-size
  • font-family
.walkme-tabs This is the tab's wrapper. You’ll be able to edit:
  • height
  • border
  • background
.walkme-tab-button

.walkme-tab-button-selected

.walkme-tab-button-not-selected

.walkme-tab-button:hover

.walkme-tab-button:active
This element is the individual tab. You’ll be able to edit:
  • width & height
  • background
  • border
  • border-radius
  • text-align
.walkme-tab-button-content This element contains the tab text and image. You’ll be able to edit:
  • margin & padding
  • top, bottom, left & right
  • text-align
.walkme-tab-button-image This is the tab image. You’ll be able to edit:
  • font-color
  • font-size
  • font-family
  • margin & padding
  • top & right
  • vertical-align
  • width & height
  • background-image
.walkme-tab-button-text This element contains the tab text.
You’ll be able to edit:
  • font-color
  • font-size
  • font-family
  • padding
  • background
.walkme-search-box-container This element contains the search box. You’ll be able to edit:
  • margin
.walkme-search-box This element is the search box itself. You’ll be able to edit:
  • width & height
  • padding
  • font-color
  • font-size
  • font-family
  • border
  • border-radius
  • background
.walkme-search-box-button

.walkme-search-box-button:active

.walkme-search-box-button:hover
This element is the button by the search box. You’ll be able to edit:
  • width & height
  • padding & margin
  • border
  • border-radius
  • background
.walkme-search-box-button-image This element is image inside the button. You’ll be able to edit:
  • font-color
  • font-size
  • font-family
  • margin & padding
  • top & right
  • width & height
  • background-image
.walkme-progress-bar-wrapper This element contains the progress bar. You’ll be able to edit:
  • margin
  • width & height
  • border
  • border-radius
  • background
.walkme-progress-bar-inner This element contains the inner element that expands according to progress. If no task is completed its width would be 0 and it would be invisible. You’ll be able to edit:
  • background
.walkme-progress-bar-text This element contains the text inside the progress bar ("X% completed"). It contains all the font attributes. You’ll be able to edit:
  • font-color
  • font-size
  • font-family
.walkme-footer This element contains everything in the outer wrapper. You’ll be able to edit:
  • height
  • margin
  • background
  • border
.walkme-open-ticket This is the support link at the bottom left corner of the menu. It can be set on the editor's "Help Desk" app. You’ll be able to edit:
  • font-color
  • font-size
  • font-family
  • padding
  • background
.walkme-jspVerticalBar This element contains the scroller. You’ll be able to edit:
  • width
.walkme-jspTrack This element contains the scrollbar "track". You’ll be able to edit:
  • background
  • border
  • border-radius
.walkme-jspDrag
.walkme-jspDrag:hover
.walkme-jspDrag:active
This element contains the scrollbar "handle". You’ll be able to edit:
  • background
  • border
  • border-radius

Most Common CSS Customizations

Remove the side border of a balloon
.walkme-custom-side-border{
display: none !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-step-xxxxxxx{
display: none !important;
}


Alter text of the next button
div#walkme-balloon-xxxxxxx
button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text{
font-size: 0 !important;

}

div#walkme-balloon-xxxxxxx button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text:before {
content: "new text" !important;
visibility: visible !important;
font-size: 12px !important;

}

Apply Z-index changes to all the balloons of a Walk-Thru:
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;}


Change the Menu's Z-index value
.walkme-main.walkme-override
{z-index: 0 !important;}

Change the Widget's z-index value
div.walkme-player
{z-index: 0 !important;}
Related Resources

Contact Us

  • Email Us
  • FAQ
  • Call Us

    Toll Free (US Number) 1-855-4-WalkMe (1-855-492-5563)
http://assets3.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete