Manage or edit a theme with Theme Builder

Customize and manage your theme and styling in a time and cost efficient way. After customizing, publish your new theme to either a web or mobile implementation of your instance.

Before you begin

Role required: admin

Procedure

1. Navigate to All > Now Experience Framework > Themes > Theme Builder.
   The Theme Builder landing page opens in a new tab and is displayed in the Home page view.
2. From the Home page view, select Manager page view to see all available themes.

   Figure 1. Page menu

   

   From the Manager page view, you have the choice of viewing existing themes in two ways. You can choose the Grid view or the List view.

   Note:

   In both the Grid and List views, your published and unpublished themes are grouped separately. The published themes are themes that appear in the user's theme preference. View your web and mobile themes by selecting either the Web or Mobile button.

   Figure 2. Grid view

   

   Figure 3. List view

   

   The More actions () icon for published themes contains the following options:

   • Duplicate
   • Delete
   • Add alternate color palette
   • Unpublish
   • Mark as default
     Note:

     This option appears if the theme isn’t the current default theme.

   The More actions () icon for published themes with the alternate color palettes defined contains the following options:

   • Edit group name
   • Duplicate
   • Delete
   • Unpublish
   • Mark as default
     Note:

     This option appears if the theme isn’t the current default theme.

   The More actions () icon for the unpublished themes contains the following options:

   • Duplicate
   • Delete
   • Add alternate color palette
   • Publish
3. Select Editor page view and choose the theme you want to edit from the Theme drop-down list. In the Editor page view, you can see only the theme that you select.

   Figure 4. Select a theme from the Theme drop-down list

   

   Note:

   When you select the theme you want to work on, verify that you selected the correct scope for the theme from the application scope picker.

   Figure 5. Application Scope Picker

   

4. Review and update the Global styles, as needed.

   Figure 6. Review global styles

   

   Note:

   The following style records are generated with your theme:

   • Your brand palette: Update the interface colors for your brand.
   • Logo: Update the logo. You can upload the logo during the theme application either from imagery or the overview page. For more information, see Upload a logo while publishing a theme with Theme Builder.
   • Font Family: Update the fonts applied globally to your experience. The fonts are used in headlines, titles, subtitles, body text, and captions.
     Note:

     If you prefer to customize your font, see Create a Next Experience style. After you save your customized font type and refresh the page, the new font appears as Custom Font. If you delete the custom font from your theme record, the font reverts to Source Sans Pro as the default.
   • Shape: Update the corner shapes of on-screen components.
     Note:

     If you prefer to customize your shape, see Create a Next Experience style. After you save your customized shape and refresh the page, the new shape appears as Mixed. This custom value is also displayed in the Component Styles tab, where you can edit the custom value.
   1. Optional: To change the auto-generated UI colors for more in-depth editing, select the Color palette icon from the Global styles color panel. Use the drop-down list next to each UI element to access the color options.
      Note:

      After you have saved changes to any of the color hooks, a Remove override symbol appears. Select the Remove override symbol to revert your changes back to the original auto-generated colors.

      

5. Optional: To preview your theme before publishing it to your instance, select the Experience preview tab.

   

   Select the experience that you want to preview from the Experience drop-down list.

   

   An actual live instance appears with all the theme selections applied. You can preview it before implementing the selected themes on the actual instance.

   Note:

   Select the Open in new tab icon to open the experience in a new tab. You can see how your unpublished theme interacts with your selected experience.

   Figure 7. Preview of your experience with theme applied

   

   Note:

   For published themes, data in the Experience preview is live data. The changes that you make in the preview are reflected on your instance.
6. Publish your theme.
   For more information, see Publish your themes with Theme Builder.

• Core styles, colors, variants, and alternate color palettes
  You can tailor the look and feel of the Next Experience UI for different users by configuring the core styles, variants, and alternate color palettes.
• Add an alternate color palette
  Customize a Theme Builder theme by creating an alternate color palette for the theme and publishing it to your instance.
• Preview components
  As you’re creating or managing your theme, you can preview the components available for inclusion on your instance.
• Edit components
  Edit Theme Builder individual components to better suit your brand and to meet accessibility compliance standards. The theme hooks that you can edit are specific to each type of component.
• Working with Image styles
  Image styles enable you to experiment with different color schemes for illustrations and replace default illustrations with your own custom images. The Image styles feature provides flexibility in customizing the visual elements of your theme.