You can edit the global CSS in Visual Design Studio to customize the styling of your guides and Resource Center. Global CSS is supported for both web-based (snippet) apps and extension apps, and is applied on top of the content Pendo loads on your site. For example, you can:
- Reposition badges
- Modify the Resource Center Home View
- Make standard changes across guides
- Switch between light and dark mode
Use cases for editing the global CSS
Editing the global CSS lets you apply consistent, approved styling across all your apps, including extension apps. This is useful when guide styling needs to meet brand or accessibility standards. The list below gives examples of the style changes you can make:
- Upload new caret SVG (primary tooltip or left and right carets)
- Add icons for headings
- Add icons to the Resource Center Home View modules
- Add borders to list items
- Add background color to list items
- Expand divider line width
- Modifications to the “unread” notifications in the Announcements module
- Responsive height and width
- Change the size or positioning of the Resource Center "x" button
- Remove or adjust the box shadow of the Resource Center
- Remove the box shadow of the Resource Center badge
- Change the pulse animation for unread notifications
- Sliding animations
- Add gradient colors to the border of the Resource Center and guides
Enable editing the global CSS
To enable editing of the global CSS, this feature must be turned on at subscription level. This allows account admins to access the global CSS functionality at the application level. Contact Pendo Support to enable this feature.
Global CSS is available for both web-based (snippet) apps and extension apps. To use global CSS with an extension app, both global CSS and extensions must be enabled on your subscription.
The feature can be disabled at any time to prevent users from adding the global CSS.
Edit the global CSS
After the global CSS is turned on for your subscription, you can edit it at the application level. The steps are the same for web-based and extension apps. For an extension app, your global CSS applies to the guides and Resource Center in the selected app.
Note: The default classes, such as ._pendo-guide-container, _pendo-guide-content, _pendo-launcher, in the custom CSS refer to Pendo Classic Guides. Editing the CSS for these classes only affects classic guides. If you add building block guide classes here, such as _pendo-step-container-styles, _pendo-step-container, _pendo-resource-center, the global CSS also applies to guides created using building blocks in Visual Design Studio. For a list of building block and Resource Center classes, see CSS classes.
- Navigate to Settings > Subscription Settings.
- Select your app from the Applications list. You can select a web-based or extension app.
- Select the Tagging & Guide Settings tab.
- In Advanced Settings, select Edit Global CSS.
- In the Launch Designer dialog, enter a URL where your app runs and select Launch Designer.
- In the Global CSS styles window, in the Set Stylesheet to use section, select Custom CSS.
- Make the required changes to the CSS and select Apply changes in the Visual Design Studio header.
Note: Editing the global CSS overrides any theme styles or styles on your app. You must use the
!importantrule to add more importance to a property or value so that that one takes precedence. The rule overrides all previous styling rules for that specific value.
Example scenario
If you want to create a Resource Center icon smaller than 50px, you'll need to utilize custom CSS because it isn't possible to choose a size less than 50px using the Visual Design Studio settings.
Here's an example of the CSS classes you may wish to change:
Resize the resource center badge image:
._pendo-resource-center-badge-image {
height: 40px !important;
width: 40px !important;
}
Resize the shadow for the badge container:
._pendo-resource-center-badge-container {
height: 40px !important;
width: 40px !important;
}
Resize the unread notification bubble so it is proportional to your badge:
.pendo-resource-center-badge-notification-bubble {
height: 13px !important;
width: 13px !important;
padding: 3px !important;
font-size: 12px !important;
}
Disable editing the global CSS
You can disable the ability to edit the global CSS at the application level.
- Access the Visual Design Studio following the steps detailed in Edit the global CSS.
- In the Global CSS styles window, in the Set Stylesheet to use section, select Pendo Default CSS.
- Select Apply changes and exit Visual Design Studio.
CSS classes
This section provides some examples of CSS classes that are used for the Resource Center and guides.
Building block Resource Center CSS classes
[
"_pendo-resource-center-global-container",
"_pendo-resource-center-view-transitions",
"_pendo-resource-center-view-container",
"_pendo-resource-center-home-container",
"_pendo-resource-center-home-title-container",
"_pendo-resource-center-onboarding-module-title-container",
"_pendo-resource-center-guidelist-module-title-container",
"_pendo-resource-center-sandbox-module-title-container",
"_pendo-resource-center-integration-module-title-container",
"_pendo-resource-center-home-title-text",
"_pendo-resource-center-onboarding-module-title-text",
"_pendo-resource-center-guidelist-module-title-text",
"_pendo-resource-center-sandbox-module-title-text",
"_pendo-resource-center-integration-module-title-text",
"_pendo-resource-center-close-button",
"_pendo-resource-center-home-list",
"_pendo-resource-center-module-list-item",
"_pendo-resource-center-module-list-item-text",
"_pendo-resource-center-module-list-item-style",
"_pendo-resource-center-module-list-item-text-container",
"_pendo-resource-center-module-list-item-title-text",
"_pendo-resource-center-module-list-item-subtitle-text",
"_pendo-resource-center-right-caret",
"_pendo-resource-center-left-caret",
"_pendo-resource-center-sandbox-module-code-container",
"_pendo-resource-center-integration-module-code-container",
"_pendo-resource-center-guidelist-module-list",
"_pendo-resource-center-onboarding-module-list",
"_pendo-resource-center-guidelist-module-listed-guide",
"_pendo-resource-center-onboarding-module-listed-guide",
"_pendo-resource-center-guidelist-module-listed-guide-link",
"_pendo-resource-center-guidelist-module-listed-guide-text",
"_pendo-resource-center-guidelist-module-search-bar",
"_pendo-resource-center-guidelist-module-no-matches-container",
"_pendo-resource-center-badge-container",
"_pendo-resource-center-badge-image-container",
"_pendo-resource-center-badge-image",
"_pendo-resource-center-onboarding-module-guide-row",
"_pendo-resource-center-onboarding-module-guide-complete-circle-container",
"_pendo-resource-center-onboarding-module-listed-guide-link",
"_pendo-resource-center-onboarding-module-listed-guide-text",
"_pendo-resource-center-onboarding-module-listed-guide-step-complete",
"_pendo-resource-center-onboarding-module-progress-bar",
"_pendo-resource-center-onboarding-module-progress-bar-container",
"_pendo-resource-center-onboarding-module-progress-bar-background",
"_pendo-resource-center-onboarding-module-progress-bar-fill",
"_pendo-resource-center-onboarding-module-percent-complete"
]
Building block guides CSS classes
[
"_pendo-step-container",
"_pendo-step-container-size",
"_pendo-backdrop",
"_pendo-step-container-styles",
"_pendo-close-guide",
"_pendo-simple-text",
"_pendo-text-",
"_pendo-text-plain",
"_pendo-text-link",
"_pendo-text-bold",
"_pendo-text-input",
"_pendo-text-italic",
"_pendo-text-strike",
"_pendo-text-underline",
"_pendo-text-list-unordered",
"_pendo-text-list-item",
"_pendo-text-list-ordered",
"_pendo-row",
"_pendo-button",
"_pendo-button-",
"_pendo-column",
"_pendo-image-wrapper",
"_pendo-image",
"_pendo-video-wrapper",
"_pendo-video",
"_pendo-youtube-video",
"_pendo-youtube-video-wrapper",
"_pendo-open-text-poll-question",
"_pendo-open-text-poll-wrapper",
"_pendo-open-text-poll-input",
"_pendo-yes-no-poll-question",
"_pendo-yes-no-poll-yes-button",
"_pendo-yes-no-poll-no-button",
"_pendo-number-scale-poll-question",
"_pendo-number-scale-poll-wrapper",
"_pendo-number-scale-poll-",
"-wrapper",
"_pendo-number-scale-poll-",
"_pendo-number-scale-poll-",
"-description",
"_pendo-number-scale-poll-",
"-input",
"_pendo-multi-choice-poll-question",
"_pendo-multi-choice-poll-select-border",
"_pendo-multi-choice-poll-select",
"_pendo-option",
"_pendo-badge",
"_pendo-badge-image",
"_pendo-badge-text",
"_pendo-nps-poll-question",
"_pendo-nps-poll-wrapper",
"_pendo-nps-poll-lowerbound-label",
"_pendo-nps-poll-",
"-wrapper",
"_pendo-nps-poll-",
"_pendo-nps-poll-upperbound-label",
"_pendo-nps-open-text-poll-question",
"_pendo-nps-open-text-poll-wrapper",
"_pendo-nps-open-text-poll-input",
"_pendo-nps-poll-success-message"
]