How Can We Help?

Guide Themes

Last Updated:

Themes allow you to set the default formatting and style of the Layouts and Building Blocks your guide creators can use to create visually consistent guide content.

Every application has a default Theme that can't be deleted. The theme configuration can be applied to any guide. Admins can rename and reconfigure the default theme. 

Open your Theme

To open the details of a theme for your application:

1. Navigate to Guides from the left-side menu in Adopt.

2. Select Manage Theme at the top of the page.

 

Adopt_Guides_ManageTheme.png

 

3. Select the application that you'd like to configure a theme for from the dropdown menu and then select Edit in the bottom right of the modal. This opens Theme Settings where you can Edit your Theme.

 

Adopt_Guides_ManageTheme_ChooseApp.png

Edit your Theme

Themes can be edited by admin users. Editing a theme doesn't affect any of the existing guides using that theme. The only change is that guide steps already using that pre-edited theme change to Custom Theme in Container Settings.

Tip: If you need to update an existing guide use a new or edited theme, the guide creator can open that guide in Adopt Studio, apply the theme, review the guide content for any issues with the new styling, and then save the guide to apply the changes.

To edit a theme, you must first find and Open your Theme. This opens Theme Settings. The right panel is where you edit specific styles depending on what you select to edit in the left panel. The left panel shows individual theme elements that you can edit.

To edit the Theme Name, select the existing text and enter a new name. To edit the guide container or typography, hover over the relevant element in the left panel and select the edit icon in the top right of the element.

 

Adopt_ManageTheme_EditElement.png

 

The panel on the right changes to provide you with all the options for that particular element. When you make a change to the style, a preview displays in the left panel.

The Advanced Options toggle in the right panel shows your additional properties that you can edit, such as supplemental styles, line height, and letter spacing.

 

Adopt_ManageThemes_Advanced.png

Guide Container Styles

To see the available container styling options, hover over Container element in the left panel and select the edit icon in the top right of the element. Use the Guide Container Styles panel on the right to set up the following properties:

  • Background Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Border Width in pixels (px).
  • Border Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Border Radius (corner rounding), set with a slider or by defining the pixels (px).
  • Container Padding, set using the numbers representing the top, right, bottom, and left of the container.
  • Caret Size (the width and height of the triangle arrow attached to the container) in pixels (px).
  • Drop Shadow Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Close Button Color and Hover Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Close Button Weight, which can be Thin, Regular, or Bold.
  • Backdrop Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Z-Index Value (the order of the container for overlapping elements in the UI).

 

If you toggle on Advanced Options, you can additionally edit the following:

  • Drop Shadow Angle, Distance, Blur, and Size.
  • Close Button Size and Position.
  • Supplemental Styles. This allows 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 {
    }

Typography Styles

To see the available typography styling options, hover over Title, Sub Title, Paragraph, or Link element in the left panel and select the edit icon in the top right of the element. Use the styles panel on the right to set up the following properties:

  • Font Family using the dropdown menu, which lists default browser fonts. You can also type the name of your application's font.
  • Font Weight using the dropdown menu, which lists the typeface thickness options in intervals of 100, up to 900. 
  • Font Size using the dropdown menu, which lists standard font size options. You can also type a number for your font size.
  • Font Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Font Text Decoration, which allows you to choose between none and underline from the dropdown menu.

 

If you toggle on Advanced Options, you can additionally edit the following:

  • Text Transform, which allows you to choose between none, capitalize, uppercase, and lowercase.
  • Line Height by percentage (%).
  • Letter Spacing in pixels (px).

 

At the bottom of the styles panel on the right is a Color Contrast Checker, which gives you a contrast ratio for the styling options you've chosen and comparative WCAG requirements for sufficient color contrast ratios.

Button Styles

Each button has different default and hover styles that you can define. To see the available button styling options, hover over the Primary, Secondary, or Tertiary button type in the left panel and select the edit icon in the top right of the element. Use the styles panel on the right to set up the following properties:

Default Styles

  • Background Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Border Width in pixels (px).
  • Border Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Border Radius (corner rounding), set with a slider or by defining the pixels (px).
  • Font Family using the dropdown menu, which lists default browser fonts. You can also type the name of your application's font.
  • Font Weight using the dropdown menu, which lists the typeface thickness options in intervals of 100, up to 900. 
  • Font Size using the dropdown menu, which lists standard font size options. You can also type a number for your font size.
  • Font Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Font Text Decoration, which allows you to choose between none and underline from the dropdown menu.
  • Button Padding, set using the numbers representing the top, right, bottom, and left of the button.

 

If you toggle on Advanced Options, you can additionally edit the following:

  • Text Transform, which allows you to choose between none, capitalize, uppercase, and lowercase.
  • Letter Spacing in pixels (px).

 

Hover Styles

  • Background Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Border Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Font Weight using the dropdown menu, which lists the typeface thickness options in intervals of 100, up to 900. 
  • Font Size using the dropdown menu, which lists standard font size options. You can also type a number for your font size.

Horizontal Line

To see the styling options for a horizontal line, hover over the Horizonal line element in the left panel and select the edit icon in the top right of the element. Use the styles panel on the right to set up the following properties:

  • Line Thickness in pixels (px).
  • Line Color, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Line Type, which allows you to choose between solid, dotted, dashed, and double.

 

Related articles