CSS for Player Menu

Updated on October 21, 2018
Download PDF

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 Player 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 Player 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

Structure of 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 the Player. 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; }

Closed Player

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 Player 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

 

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 “blank publish” as follows:

  1. Click Publish in the Admin Bar
  2. Open the Publish tab
  3. If all you are doing is publishing changes to CSS, deselect all items
  4. Click Publish

Was this article helpful?

Related Articles