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.
- Inline styling/guide-specific/template styling overrides
- Global CSS which overrides
- Your application’s 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.
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.
Preview Type: choose Desktop or Mobile to preview the example guide in different resolutions. The designer window will automatically resize itself.
- 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".
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.