Edit the global CSS in Visual Design Studio

Last updated: November 06, 2024 10:27

You can edit the global CSS in the Visual Design Studio to customize the styling of your guides and Resource Center. 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

The list below gives examples of use cases for making style changes:

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.

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.

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 the 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.
Select the Tagging & Guide Settings tab.
In Advanced Settings, select Edit Global CSS.
In the Launch Designer dialog, enter your app URL 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 !important rule 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 the 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"
]