Creating a Theme

 

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 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.

ThemesPage2.png

 

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

Every 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.

DefaultTheme.png

 

Creating 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 Themes, your list populates with a default Theme created for your applications.

ThemesNav.png

 

Select + Create Theme in the top, right-hand corner of the page.

CreateTheme.png

 

Note: If you have multiple applications set up in your Pendo Subscription, you will be asked to select your desired application for the new theme.

SelectApp1.png

 

The Visual Design Studio will open in a new tab where you can edit the details of your new 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.

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

EditTheme.png

 

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

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 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

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 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

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 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

Click on 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.

 

Applying Themes in the Designer 

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.

Applying a Theme to a Guide

In a Guide Step, click on 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.

ContainerTheme1.png

Applying a new Theme to a Guide will override 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 will use the Primary Button style you have set in your Light Theme.

 

Applying 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.

TextTheme1.png

 

Applying 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.

ButtonTheme1.png

 

Duplicating a Theme

Any Theme can be duplicated. This is a great way to copy Themes between apps or make a couple changes to an existing Theme to make a new Theme.

Hover over a Theme to show the Duplicate button and click Duplicate Theme.

DuplicateTheme.png

A popup will prompt 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.

DuplicateThemePopup.png

 

Deleting a Theme

Hover over a Theme to show the Delete button and click Delete Theme. Any Theme, except for Default Themes, can be deleted.

DeleteTheme.png

A popup will ask you to confirm that you want to delete the theme. Any Guides using that theme will not be affected.

DeleteThemePopup.png

 

Frequently Asked Questions

How Do Layouts & 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 will be affected. The Theme on the Guide will be changed to Custom. Then, you can go in and update your Guide Theme separately.

If I make a change to my theme, will it update all Guides that have that theme applied?

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 will allow 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 will 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 only to that Guide Step and intended to provide additional customization as needed.