Support Center

CSS for Balloons

Last Updated: Jul 09, 2017 08:27AM PDT

Customize

CSS

Cascading Style Sheets (CSS) allows you to customize the look and feel of a balloon including elements such as the layout, colors, and fonts.
 

Article Contents

 

The Short Version

The CSS feature in WalkMe allows for full customization of Walk-Thrus, Walk-Thru steps. 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


 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. When typing into the Custom CSS window, WalkMe displays autocomplete options for selectors, properties, and values.

CSS can be added locally via the rich text editor, or globally, is added in from the Customize menu accessed from in the Admin bar. Before entering the rules in the Customize CSS console tab, test it in the Custom CSS tab in the Flow Tracker.
 
 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 or locally. Local CSS overrides all other design and can be applied from the Rich Text Editor in the balloon Interaction Menu. Global CSS is can be added in the Customize Menu. Using the Local CSS editor will make it easy to apply customizing a single balloon. If an item is customized on the global level and the ID identifying it should appear before the class that identifies the balloon section.
On the Local Level:
.walkme-custom-balloon-title
On the Global Level enter:
#walkme-balloon-XXXXXXX.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
 

 

 

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;}

 

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 Menu Organizer, any changes that you apply in the Customize Menu, including changes to the Widget and custom CSS, changes that were applied to the Settings Menu, global segments, and more.

The reason for this is that 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 in the CSS, perform a "Blank publish":
  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

Related Resources

Contact Us

  • Email Us
  • FAQ
  • Call Us

    Toll Free (US Number) 1-855-4-WalkMe (1-855-492-5563)
http://assets0.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