Guide styling (Classic)

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 by admins so that the styles are inherited by all of your guides.

To access the Global CSS:

1. Go to app.pendo.io/guides and select Manage in Classic Designer.
2. In the URL bar, type in https://app.pendo.io. A left navigation bar loads with a Loading Error message.
3. Select Show advanced Options.
4. Select the dropdown arrow and select any app name.
5. Select Override app.

To specify global styles:

1. Go to the in-app guide designer.
2. Select Global Settings in the top right corner of the window.
3. Select the Global CSS tab.
4. Add any CSS that you wish to be inherited by all guides. You can 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.
   
   
   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.
5. Select 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 selecting Reset to Default.
6. Select Save to finish.

Note: The custom stylesheet is 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.

Set 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.