How Can We Help?

Themes

Last Updated:

Overview

Themes help you manage your Guide stying by setting the formatting and style of the Layouts and Building Blocks your Guide creators can use. Use Themes to give Guide creators the default styling they need to easily create visually consistent Guide content. Themes can be applied when editing Containers and Building Blocks in a Guide in the Visual Design Studio.

Default Theme

Every application has a Default Theme. This Theme can't be deleted and the styles configured in this Theme can be applied to any Guide in the Visual Design Studio. You can rename and configure all of the styles in the Default Theme. 

Creating a Theme

Click on Manage Theme in the Guides section. Then select an application that you'd like to modify.

mceclip0.png

The Visual Design Studio will open in a new tab where you can edit the details of your Theme.

Editing a Theme

Any Theme can be edited by an Admin. Changing the styles in a Theme will not affect any of the Guides using that Theme. All the Guide Steps using that Theme will change to Custom Theme in Container Settings.

Tip: If a Guide needs to be updated to use a new or edited Theme, a Guide creator should open that Guide in the Visual Design Studio, apply the Theme, review the Guide content for any issues with the new styling, and save the Guide to apply the changes.

EditThemePage.png

In the Visual Design Studio you will see two main panels. In the left panel, you will see the individual Theme elements: Guide Container, Typography, and Buttons. Click into an element to edit styles in the right panel. When you make a change to the style, a preview displays in the left panel.

Tip: Toggle Advanced Options in the styles panel on the right to show additional properties such as Supplemental Styles.

Guide Container Styles

Click on the Guide Container to see the Guide Container Styles panel on the right side of the page. 

Use the Guide Container Styles panel to setup the following properties.

  • Background Color
  • Border Width
  • Border Color
  • Border Radius
  • Caret Size and Dimensions
  • Drop Shadow Color
  • Drop Shadow Angle*
  • Drop Shadow Distance*
  • Drop Shadow Blur*
  • Drop Shadow Size*
  • Close Button Color
  • Close Button Hover Color
  • Close Button Weight
  • *Close Button Size
  • Close Button Position*
  • Backdrop Color
  • Z-Index Value
  • Supplemental CSS Styles*

*Must have Advanced Options toggled on

Typography Styles

Click on a Typography element (Title, Sub Title, Paragraph, Link) to show the Typography Styles panel on the right side of the page. 

Use the Typography Styles panel to setup the following properties.

  • Font Family Name - The dropdown list shows default browser fonts. You can still type in the name of your application's font and Pendo will inherit your fonts in the Guide.
  • Font Weight
  • Font Size
  • Font Color
  • Font Decoration (Underline)
  • Text Transform*
  • Line Height*
  • Letter Spacing*

*Must have Advanced Options toggled on

Buttons Styles

Click on a Button element (Primary, Secondary, Tertiary) to show the Button Styles panel on the right side of the page. Each button has different default and hover styles you can define. 

Use the Button Styles panel to setup the following properties.

Default Styles

  • Background Color
  • Border Width
  • Border Color
  • Border Radius
  • Font Family Name - Note: the dropdown lists default browser fonts. You can still type in the name of your application's font and Pendo will inherit your fonts into the Guide.
  • Font Weight
  • Font Size
  • Font Color
  • Font Decoration (Underline)
  • Text Transform*
  • Line Height*
  • Letter Spacing*
  • Padding

Hover Styles

  • Background Color
  • Border Color
  • Font Weight
  • Font Color

*Must have Advanced Options toggled on

Supplemental Styles

Supplemental styles in the Guide Container Styles panel allow you to use CSS to style Container elements.

/* Guide Container Size */
._pendo-step-container-size {
}

/* Guide Backdrop */
._pendo-backdrop {
}

/* Guide Container Style */
._pendo-step-container-styles {
}

/* Close Guide "X" */
._pendo-close-guide {
}

To edit Supplemental Styles, enter the Visual Design Studio and toggle Advanced Options in the Guide Container Styles panel. This provides access to the raw CSS styling that will be applied when this Theme is used in a Guide.

Related articles