CSS for Surveys

Updated on June 3, 2020 Download PDFDownload as PDF
Download PDF

Brief Overview

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

CSS can be used to customize Surveys and NPS Surveys:

  • Action and Close buttons
  • Text for Title
  • 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 Survey. When typing into the Custom CSS window, WalkMe displays autocomplete options for selectors, properties, and values. 

Settings Breakdown

Configuring Balloon Components

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

Global Rules

Global CSS for surveys can be added in the Customize menu:

Finding Survey ID

  1. Hover over the name of your Survey
  2. Navigate to the Pencil Icon
  3. Click on “Copy ID”

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:

#walkme-survey-balloon-37897  .walkme-survey-title {

color: #000 !important;

}

Configurable Survey Components

DIV EDITABLE FEATURES
1 #walkme-survey-balloon-37897 This element is the main portion of the survey. You’ll be able to edit:

  • Display
  • Background
  • positioning on the screen
  • z-index
  • width
  • height
2 .walkme-survey-title This element is the main title for the survey. You’ll be able to edit:

  • text-align
  • font-color
  • font-size
  • font-family​
  • padding​
  • margin
3 .walkme-survey-question-title This element is the Survey question(s). You’ll be able to edit:

  • text-align
  • font-color
  • font-size
  • font-family​
  • padding​
  • margin
4 #walkme-survey-answer-text-XXXXXX This element is the survey answers. You’ll be able to edit:

  • text-align
  • font-color
  • font-size
  • font-family
  • padding
  • margin
5 #walkme-survey-answer-radiobutton-110079 This element is the radio buttons for the answers. You’ll be able to edit:

  • positioning
  • width
  • height
  • background​
  • border-radius border-bottom
  • color
6 .walkme-click-and-hover.walkme-custom-balloon-close-button.walkme-action-close.walkme-inspect-ignore 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-custom-balloon-content-wrapper This element is the general selector for all the content/text in the survey. You’ll be able to edit:

  • font-color
  • font-size
  • font-family
  • background-color

Configurable NPS Survey Components

DIV EDITABLE FEATURES
1 .walkme-survey-question-nps-answers This element are all the answers in your NPS survey (typically from 0-10). You’ll be able to edit:

  • Display
  • Background
  • Positioning
2 .walkme-survey-nps-answer selected .walkme-survey-answer-label-nps-radiobutton This element is the selected NPS answer. You’ll be able to edit:

  • background-color
  • border-color
3 .walkme-survey-low-score-div span or walkme-survey-high-score-div span This element is the high and low score labels on either end of the balloon. You’ll be able to edit:

  • text-align
  • font-color
  • font-size
  • font-family​
  • padding​
  • margin
4 .walkme-custom-side-border This element is the side border for the survey. You’ll be able to edit:

  • background-color
  • display

 

Common Survey CSS Customizations

Change the font size of Survey Title

#walkme-survey-id-XXXXXX .walkme-survey-title {

    font-size: XXpx !important;

}

Change Color of Sidebar and Submit button

#walkme-survey-balloon-XXXXX .walkme-custom-side-border{

    background-color: #XXXXXX !important;

}

#walkme-survey-balloon-XXXXX .walkme-custom-balloon-submit-button{

background-color: #XXXXXX !important;

}

Change or Fix Margin of the NPS choices (1-10)

#walkme-survey-question-nps-answers-XXXX .walkme-survey-nps-answer {

    margin: Xpx !important;

}

Change the font of the survey questions

#walkme-survey-balloon-XXXXX .walkme-custom-balloon-content {

    font-family: (font here) !important;

}

Change the color of NPS survey answers

.walkme-survey-question-nps-answers.selected .walkme-survey-nps-answer.selected label {

background: XXX !important;

border-color: XXX !important;

}

Change the color of NPS survey answers when hovered over

.walkme-survey-answer-label-nps-radiobutton.walkme-survey-answer-label-nps-radiobutton-unchecked:hover {

background: XXX !important;

border-color: XXX !important;

}

 

Was this article helpful?

Related Articles