Edit the global CSS in Visual Design Studio

Last updated:

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 the global CSS

To enable editing of the global CSS, this feature must be turned on at subscription level. Contact Pendo Support to enable this feature.

Edit the global CSS

After the global CSS  is turned on for your subscription, you can edit it at the application level.

  1. Navigate to Settings > Subscription Settings.
  2. Select your app from the Applications list.
  3. Select the Tagging & Guide Settings tab.

    Global_css_setting.png
  4. In Advanced Settings, select Edit Global CSS.
  5. In the Launch Designer dialog, enter your app URL and select Launch Designer.
  6. In Global CSS styles, make the required changes to the CSS and select Apply changes in the designer header.

    editglobalcss.png

 

 

Was this article helpful?
2 out of 2 found this helpful