PingOne

Adding a theme

PingOne delivers several built-in themes. Use the Branding and Themes page to add a theme to the current environment. The new theme uses your Company Name and Logo if you added them in Global Settings. Learn more in Editing environment branding.

Steps

  1. In the PingOne admin console, go to User Experience > Branding and Themes.

  2. Click the icon.

  3. On the Choose a Base Theme page, click the theme you want to start with.

    When you select a base theme, PingOne generates a unique name for the new version. For example, if you select the Focus theme as your base theme, your new theme is named Focus 1 by default. You can edit this name before you continue.

  4. Click Next and select the tabs on the Customize page to change settings for the different page types.

    Page previews display in the left panel, and you configure settings in the Theme Styles panel on the right. The previews update in real time as you make changes to the settings. To switch between previews for desktop or mobile devices, click the Desktop or Mobile icon (p1 branding themes desktop mobile icon).

    A screen capture of the Customize theme page showing the Theme Styles panel with Global and Component Specific tabs.

    All page types include global theme settings, which apply across all components. Some page types also have Component Specific settings, which apply only to the specific component.

  5. Click the All tab to edit global theme settings that apply to all pages that aren’t affected by component-specific styles.

    Setting Description

    Logo

    An image to represent the environment. Hover over the box and click the Camera icon () to upload an image. Select an image in .jpg, .jpeg, .gif, or .png format up to 2 MB in size.

    To change the image used for the logo, click and select Upload New Image.

    To delete a logo from a theme, click and select Remove Image.

    Footer

    Text that appears at the bottom of each page. Click the toggle to the right (blue) to enable footer text, then enter the text.

    You can include HTML in the footer, including the following elements and attributes:

    • a(href, target)

      To use an href, you must include the protocol in the address, such as ftp, http, https, mailto, tel, or sms.

    • b

    • blockquote(cite)

    • br

    • cite

    • code

    • dd

    • dl

    • dt

    • em

    • i

    • li

    • ol

    • p

    • pre

    • q(cite)

    • small

    • span

    • strike

    • strong

    • sub

    • sup

    • u

    • ul

    Button

    Configure the color of the buttons, such as the Sign on and Save buttons:

    • Button Fill: The background color for the buttons.

    • Button Text: The color of the text on the buttons.

    • Link Text: The color of the text for links displayed on the buttons.

    Text

    The color of the text on the pages:

    • Heading Text: The color of the text in headings.

    • Body Text: The color of non-heading text.

    Background

    The background to use on each page.

    • None: Do not use a background.

    • Image: To use an image for the background, hover over the box and click the Camera icon () to upload an image. Select an image in jpg, jpeg, gif, or png format up to 2 MB in size.

      To change the image used for the background, click and select Upload New Image.

      To delete a background image from a theme, click and select Remove Image.

    • Color: Select a color to use for the background.

    Card Color

    The color of the box around form fields.

  6. Click the Forms tab to edit global theme settings and preview the updated appearance of the PingOne forms in your environment.

    There are no component-specific styles for Forms.

    Your selections affect all forms, and can’t be set at the form level, but you can select a form from the Form Preview list to preview it with theme styling applied. You can also click Edit Form to open the Forms page in a separate tab and make updates as necessary.

    Learn more in Forms.

  7. On the Verify tab, click one of the tabs in the Theme Styles panel:

    • Global: Edit global theme settings and preview the updated appearance of identity verification pages.

    • Component Specific: Edit settings that only affect the appearance of the images on identity verification pages.

      Identity verification image with numbered callouts to indicate what each setting affects.

      Setting Description

      Foreground Main (1)

      The color used for the border around the front image and around the internal shapes in the front image.

      Foreground Highlight (2)

      The fill color used for the front image.

      Background Outline (3)

      The color used for the borders around the background images and around the internal shapes in the background images.

  8. On the End User Application tab, click one of the tabs in the Theme Styles panel:

    • Global: Edit global theme settings and preview the updated appearance of system applications, such as the Application Portal and Self-Service - My Account.

    • Component Specific: Edit settings that only affect the appearance of system applications, such as the Application Portal and Self-Service - My Account.

      Setting Description

      Background Color

      The background color used for the application.

  9. Click the Authentication Policy tab to edit global theme settings and preview the updated appearance of the sign-on and registration pages in your environment.

    There are no component-specific styles for Authentication Policy.

  10. Click Save.

    The theme is added to the list on the Branding and Themes page.

    You can also customize an existing theme. Learn more in Editing a theme.

Next steps

Selecting an active theme