Themes help you manage your guide styling 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 create visually consistent guide content quickly. Themes can be applied when editing containers and building blocks in a guide in the Visual Design Studio.
You can set up multiple themes for different product lines or different types of guide content, including mobile. You can duplicate themes between apps for consistency across your brand, or each app in your Pendo subscription can have its own theme. Your lightboxes, tooltips, and banners can each have their own theme creating a recognizable image for your different customer engagement campaigns.
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 in container and building block settings in the Visual Design Studio.
Default theme
Each app 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. The easiest way to recognize the default theme is to find the theme that does not have a Delete button.
Create a theme
Select Themes in the Guides section. On the Themes page, you'll see a list of current themes. If this is your first time in the Themes page, your list populates with a default theme created for your applications.
Select + Create Theme in the top, right-hand corner of the page.
Note: If you have multiple applications set up in your Pendo Subscription, select the required application for the new theme.
The Visual Design Studio opens in a new tab where you can edit the details of your new theme.
Edit a theme
Any theme can be edited by an Admin. Changing the styles in a theme doesn't affect any of the guides using that theme. All the guide steps using that theme change to Custom Theme in Container Settings.
Tip: When a theme is edited, existing guides using that theme aren't updated until the theme is re-applied from the Designer. 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.
Select Edit Theme and enter your app's URL to launch the Visual Design Studio.
In the Visual Design Studio, there are two main panels:
- In the left panel are the individual Theme elements: Guide Container, Typography, and Buttons.
- In the right panel, select an element to edit styles. 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
Select the Guide Container to see the Guide Container Styles panel on the right side of the page.
Use the Guide Container Styles panel to set up 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
Select 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 set up 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
Select 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 set up 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
Horizontal Line Styles
Select the Horizontal Line element to show the Horizontal Line Style panel on the right side of the page.
Use the Horizontal Line Style 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, 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.
Note: This feature is not available for mobile application 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 the class can be applied across many guides.
Note: Changes to the CSS are not shown in the Guide layout selection.
To add a CSS class to the Theme:
- Set a CSS Class style.
- In the Guide Container Styles panel, toggle on Advanced Options, and in Supplemental Styles, enter a name for the CSS class, for example, "my-class".
Apply themes in the Visual Design Studio
Now that you have multiple themes and multiple typography and button styles, you and your users can apply these themes and styles to your guides in the Visual Design Studio.
Apply a theme to a guide
- In a Guide Step, select the border of the Guide Container to open Container Settings.
- 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.
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
Select Title, Sub Title, or Paragraph style in the Theme Style dropdown 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.
Apply a theme style to a button block
Select Primary, Secondary, or Tertiary Button in the Button Style dropdown 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.
Duplicate a theme
Any theme can be duplicated. This is a great way to copy themes between apps or make changes to an existing theme to make a new theme.
Hover over a theme to show the Duplicate button and select Duplicate Theme.
A popup 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.
Delete a theme
Hover over a theme to show the Delete button and select Delete Theme. Any theme, except for Default Themes, can be deleted.
A popup asks you to confirm that you want to delete the theme. Any guides using that theme are not affected.
Frequently asked questions
How do layouts and themes work together?
As a Pendo Administrator, you can set up a customized default theme. These themes can be applied to default layouts when you 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.
Can I update my themes across all of my guides at once?
Not at this time. Bulk theme actions are being explored.
What happens if I delete a theme that's applied to a guide?
No guides are affected. The guide theme changes to Custom. Then, you can go in and update your guide theme separately.
If I make a change to my theme, are all guides that use that theme updated?
No, bulk theme actions are being explored. For now, you have to go into the guide and re-apply or re-save the guide with the new theme.
What is Inherit?
The "Inherit" option allows you to have Pendo pull in the styling options that are already coded by your developers within your application.
Why can’t I see the font family name that I use in my app?
If you have a font family that you use within your application already, choose Inherit to use it. If you're trying to use a secondary font family that's included in your style, you can type in the font name.
What if I add a custom code block to my guide?
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 is applied to that guide step only and is intended to provide additional customization as needed.