Manage guide styling with themes

Last updated:

Themes help you manage your guide styling by setting the format and style of the layouts and building blocks within guides. Use themes to give guide creators the default styling they need to create visually consistent guide content quickly. You can apply themes when editing containers and building blocks in a guide in the Visual Design Studio.

As a Pendo Admin, you can set up a customized default theme. Any guide creator can apply these themes to default layouts when they create a guide. Then you can use the guide you set up and save it as a layout for other Pendo users who can create guides with layouts. For more information about layouts, see Guide layouts.

You can set up multiple themes for different product lines or different types of guide content, including mobile. You can duplicate themes between applications for consistency across your brand, or each application in your Pendo subscription can have its own theme. Your lightboxes, tooltips, and banners can each have their own theme for different customer engagement campaigns.

themes.png

Admins can set up a customized default theme. Any guide creator can apply these themes to default layouts when they create a guide. Then you can use the guide you set up and save it as a layout for other Pendo users who can create guides with layout. For more information about layouts, see Guide layouts.

Requirements

  • Pendo Admin users can access the Themes page and create, duplicate, and delete themes.
  • Pendo users with guide creation permissions can apply themes to a guide within the container and building block settings in the Visual Design Studio.

Default theme

Each application has a default theme, which you can't delete. You can rename and configure all of the styles in this theme as needed, and apply these styles to any guide in the Visual Design Studio. The easiest way to recognize the default theme is to find the theme that does not have a Delete button when you hover over it.

default_theme.png

Create a theme

To create a theme, navigate to Guides > Themes from the left side navigation. On the Themes page, you'll find a list of current themes. If this is your first time on the Themes page, your list populates with a default theme created for your application.

  1. Select + Create Theme in the top-right corner of the page.
  2. If you have multiple apps set up in your subscription, select the required app for the new theme.

    select_app.png

The Visual Design Studio opens in a new tab where you can edit the details of your new theme.

Edit a theme

Admins can edit themes. Changing the styles in a theme doesn't affect any of the guides using that theme. When you change a theme's styles, all of the guide steps using that theme change to Custom theme in container settings.

container_settings.png

Tip: When you edit a theme, existing guides using that theme aren't updated until the theme is re-applied from the Visual Design Studio. If a guide needs to be updated to use a new or edited theme, a guide creator can open the 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.

Hover over a theme on the Themes page to show the Edit Theme button.

edit_theme.png

Select Edit Theme and enter your app's URL to launch the Visual Design Studio.

theme_settings.png

In the Visual Design Studio, there are two panels:

  • The left panel contains individual theme elements: Guide Container, Typography, and Buttons
  • In the right panel, select an element to edit the guide container style.. When you make a change to the style, a preview displays in the left panel.

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

Guide container styles

Select the guide container to open the Guide Container Styles panel on the right side of the page. Use the panel to set up the following properties:

  • Background color
  • Border width, color, and radius
  • Caret size and dimensions
  • Drop shadow color, angle, distance, blur, and size*
  • Close button color, hover color, weight, size, and position*
  • Backdrop color
  • Z-index value
  • Supplemental CSS styles*

*Must have Advanced Options turned on.

Typography styles

Select a typography element (Title, Sub Title, Paragraph, Link) to open the corresponding styles panel on the right side of the page. Use the panel to set up the following properties:

  • Font family 
  • Font weight, size, color, and decoration (Underline)
  • Text transform*
  • Line height*
  • Letter spacing*

*Must have Advanced Options turned on.

Note: The Font Family dropdown list shows default browser fonts. If you have a font family that you use within your app already, choose Inherit to use it. If you're trying to use a secondary font family that's included in your style, you can enter the font name.

Button styles

Select a button element (Primary, Secondary, Tertiary) to open the corresponding button styles panel on the right side of the page. Each button has different default and hover styles you can define. Use the panel to set up the following properties:

Default styles

  • Background color
  • Border width, color, and radius
  • Font family 
  • Font weight, size, color
  • Text transform*
  • Letter spacing*
  • Padding

*Must have Advanced Options turned on.

Note: The Font Family dropdown list shows default browser fonts. If you have a font family that you use within your app already, choose Inherit to use it. If you're trying to use a secondary font family that's included in your style, you can enter the font name.

Hover styles

  • Background color
  • Border color
  • Font weight and color

Horizontal line styles

Select the Horizontal line element to open the Horizontal Line Styles panel on the right side of the page. Use the panel to set up the following line properties and line type:

  • Color
  • Thickness
  • Type (Web guides only)
    • Solid 
    • Dotted
    • Dashed

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, turn on Advanced Options in the Guide Container Styles panel. This provides access to the raw CSS styling that applies when this theme is used in a guide.

Note: This feature isn't available for mobile themes.

Add a CSS class to a theme

You can add a CSS class to a guide at the guide’s container level so that it inherits styling from your application’s stylesheet. This is done inside a Theme so that you can apply the class across many guides. The Inherit option allows Pendo to use the styling options that are already coded by your developers within your application.

Note: Changes to the CSS are not shown in the guide layout selection.

To add a CSS class to the Theme:

  1. Set a CSS Class style.
  2. In the Guide Container Styles panel, turn on Advanced Options.
  3. Locate the Supplemental Styles section and enter a name for the CSS class.

CSS_2.gif

Use custom code blocks

Code blocks in a guide step override theme styling if the targeted class or element ID is more specific than the general target in the theme. Any styling in a code block applies to that guide step only and is intended to provide additional customization as needed. For more information on custom code blocks, see Customize your guides with code.

Apply themes in the Visual Design Studio 

Now that you have multiple themes and styles, you and other guide creators can apply these themes and styles to your guides in the Visual Design Studio.

Apply a theme to a guide

  1. In a guide step, select the border of the guide container to open the container settings.
  2. Select a theme in the Theme dropdown menu.
    • Admins or users who can create guides from scratch can select Custom, which displays all styling settings and overrides the theme to further customize the look and feel of your guide.

ContainerTheme1.png

Applying a new theme to a guide overrides the theme settings of a building block. For example, if you have a primary button with Dark Theme and you apply your new Light Theme, the button uses the Primary Button style you have set in your Light Theme.

Apply a theme style to a text block

In the Theme Style dropdown, select the Title, Sub Title, or Paragraph style to apply the typography theme style from the theme selected in the guide container.

  • Admins or users who can create guides from scratch can select Custom, which displays all styling settings and overrides the theme to further customize the look and feel of your guide.

TextTheme1.png

Apply a theme style to a button

In the Button Style dropdown, select the Primary, Secondary, or Tertiary Button to apply button themes from the theme selected in the Guide Container.

  • Admins or users who can create guides from scratch can select Custom, which displays all styling settings and overrides the theme to further customize the look and feel of your guide.

ButtonTheme1.png

Duplicate a theme

Admins can duplicate a theme. This is a great way to copy themes between apps or modify an existing theme to make a new theme.

Hover over a theme and select the Duplicate Theme icon.

duplicate_theme.png

This opens a dialog that prompts you to name your theme. The default name is Copy of [Original Theme Name]. If you have multiple apps, you must also select the app the theme is being duplicated to.

duplicate_theme_confirm.png

Delete a theme

Admins can delete any theme other than the default theme. Hover over a theme and select the Delete Theme icon. 

delete_theme.png

This opens a dialog that asks you to confirm that you want to delete the theme. 

delete_theme_confirm.png

If you delete a theme, no guides are affected. The guide theme changes to Custom and allows you to update your guide theme separately.

Was this article helpful?
4 out of 8 found this helpful