1. Pendo Help Center
  2. Guides
  3. Classic Guides

Guide Styling (Classic)

Last Updated:

  
Note: This article covers the Guide experience launched before Feb. 18th 2019. If you became a customer after this date, you can achieve custom Guide styling via the Custom Code Building Block via the Visual Design Studio.

 

Overview

There are various ways to style your guides, whether you want to affect guides globally (across all of your guides), or individual guides.

Pendo guides get styled by a combination of:

  • The styles on your site (Pendo guides live in your DOM, and inherit the styles on your page)
  • The global Pendo guide style sheet.
  • Your custom global guide styles.
  • Styles in the CSS tab for each specific guide or template.

Style Hierarchy

  • Inline styling/guide-specific/template styling overrides
  • Global CSS which overrides
  • Your application’s CSS

Global CSS

Global styles can be specified that will be inherited by all of your guides. Admins can do this by:

  • Going to the in-app guide designer.
  • Select the "Global Settings" button in the top right corner of the window
  • Select the Global CSS tab
  • From here you can add any CSS that you wish to be inherited by all guides. You will see stubs for all of the CSS classes that Pendo uses. You can add styles to those classes, and/or you can add your own classes and IDs.
globalcss.png

  1. Guide Type: choose Lightbox or Tooltip to see how the Global CSS affects an example guide preview rendered within the designer. This will display automatically when the Global CSS is open.

  2. Preview Type: choose Desktop or Mobile to preview the example guide in different resolutions. The designer window will automatically resize itself.

  3. Default CSS vs Custom CSS: if "Use Pendo Default CSS" is chosen, the default Pendo styles will be loaded. See the Pendo guide style sheet.

     

Choose "Add Custom CSS" to make modifications to the Global CSS or to add your own styles. You can always reset the stylesheet to the default CSS by clicking "Reset to Default" next to "Add Custom CSS".

 

Note: The custom stylesheet will be loaded after the default styles, so if there are styles in your custom sheet with the same level of class specificity, the custom styles will outrank the Pendo default styles.
Warning: Global CSS is applied to your application and has the ability to modify its styling if CSS selectors are not scoped correctly. It is quite powerful and should be used with appropriate caution. Changes to your global styles can affect all existing guides.

 

Setting Styles for Each Guide

Within each guide, you have the ability to add styles in the "Source" of the guide. These can be added within the CSS tab of the specific guide or template. Generally, these should outrank any of the other methods of styling.

Was this article helpful?
3 out of 5 found this helpful

Articles in this section

See more