CSS for ShoutOuts

Updated on October 21, 2018
Download PDF

Brief Overview

Cascading Style Sheets (CSS) allows you to apply advanced customization to ShoutOuts including elements such as the font, background, and border.

CSS can be used to customize ShoutOut:

  • Action and Close buttons
  • Text Header and Ribbon
  • Text
  • “X” 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 ShoutOut. 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, from the Customize menu in the Admin Bar.

Settings Breakdown

Configuring Balloon Components

Each ShoutOut includes a number of components (elements) that can be customized with CSS. For example, you can target the title section of a ShoutOut by using this class: .wm-title (see below for a full list of classes).

Global Versus Local Rules

CSS can be applied globally or locally. Local CSS overrides all other design and can be applied from the Rich Text Editor in a ShoutOut’s Interaction menu:

Global CSS can be added in the Customize menu:

Using the local CSS editor (Rich Text Editor) makes it easy to customize a single ShoutOut. If you are customizing a single ShoutOut on the global level, you must enter the ShoutOut’s ID* before the class that identifies the balloon section (i.e., on the local level: .wm-title; on the global level: #wm-shoutout-XXXXX .wm-title).

*Pro-Tip: Each ShoutOut has a unique ID number, located in the Engagement menu as the last five digits of the Permalink:

Insert these five digits into the class when making local CSS rules on the global level.

Using !important

By default, the WalkMe theme design overrides any other design changes to a balloon or app. In order for CSS to be applied, the CSS rule must contain “!important” to ensure that it overrides the default styling.

For example:
#wm-shoutout-XXXXX .wm-title {color: #000 !important;
}

Configurable Components

DIV EDITABLE FEATURES
1 .wm-outer-div This element is the ShoutOut ribbon. You’ll be able to edit:

  • Display
  • Background
2 .wm-ribbon This element is the ShoutOut ribbon. You’ll be able to edit:

  • display
  • background-color
  • border-color
3 .wm-title This element is the ShoutOut Header. You’ll be able to edit:

  • text-align
  • font-color
  • font-size
  • font-family​
  • padding​
  • margin
4 .wm-template-text This element is the ShoutOut Text. You’ll be able to edit:

  • text-align
  • font-color
  • font-size
  • font-family
  • padding
  • margin
5 .wm-blue-btn This element is the Action button. You’ll be able to edit:

  • font-color
  • font-size
  • font-family
  • width
  • height
  • background​
  • border-radius border-bottom
  • color
6 .wm-close-link This element is the Close button. You’ll be able to edit:

  • font-color
  • font-size
  • font-family
  • width
  • height
  • background
  • border-radius
7 .walkme-x-button This element is the “X” button. You’ll be able to edit:

  • font-color
  • font-size
  • font-family
  • margin

Common CSS Customizations

Changing ShoutOut Ribbon Color Using CSS

Main Template

Center ShoutOut Ribbon

#wm-shoutout-XXXXX .wm-main-ribbon.wm-template-main-bg,
.wm-ribbon-edge.left.wm-template-main-bg, .wm-ribbon-edge.right.wm-template-main-bg {
background-color: #XXXXXX !important;
}

Left End of ShoutOut Ribbon

#wm-shoutout-XXXXX .wm-ribbon-triangle.left.top.wm-main-border-right-color, .wm-ribbon-ripple.left.wm-main-border-right-color {
border-color: transparent #XXXXXX transparent transparent !important;
}

#wm-shoutout-XXXXX .wm-main-border-bottom-color {
border-color: transparent transparent #XXXXXX !important;
}

Right End of ShoutOut Ribbon

#wm-shoutout-XXXXX .wm-ribbon-triangle.right.top.wm-main-border-top-color, .wm-ribbon-ripple.right.wm-main-border-top-color.wm-main-border-left-color { border-color: #XXXXXX transparent transparent !important;
}

#wm-shoutout-XXXXX .wm-ribbon-triangle.right.bottom.wm-main-border-left-color { border-color: transparent transparent transparent #XXXXXX !important; }

Trapezoid Template

#wm-shoutout-XXXXX .wm-trapezoid {
border-top: 40px solid #XXXXXX !important;
}

#wm-shoutout-XXXXX .wm-main-border-bottom-color {
border-color: transparent transparent #XXXXXX !important;
}

Square Template

#wm-shoutout-XXXXX .wm-icon-square {
border-color: #XXXXXX !important;
}

Was this article helpful?

Related Articles