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

For information on granular roles, see Granular admin roles.

Procedure

1. Navigate to All > Now Experience Framework > Theme Builder.
   The Theme Builder landing page opens in a new tab and is displayed in the Home page view.

   Figure 1. Page menu

   

2. From the Home page view, select Manager page view to see all available themes.
   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

   

   Use the More actions icon on a published theme to access these options:

   • Duplicate: creates a copy of the theme for reuse or modification.
   • Delete: permanently removes the theme from your list.
   • Add alternate color palette: applies a different color scheme to the theme for variation.
   • Unpublish: removes the theme from active use without deleting it, so you can edit or republish later.
   • Mark as default: sets the theme as the first option shown in the Next Experience Theme user preference. This option appears if the theme is not the current default theme.

   Use the More actions icon on a published theme with an alternate color palette defined to access these options:

   • Edit group name: renames the theme group, which includes the base theme and all its alternate color palettes.
   • Duplicate: creates a copy of the theme for reuse or modification.
   • Delete: permanently removes the theme from your list.
   • Unpublish: removes the theme from active use without deleting it, so you can edit or republish later.
   • Mark as default: sets the theme as the first option shown in the Next Experience Theme user preference. This option appears if the theme is not the current default theme.

   Use the More actions icon on an unpublished theme to access these options:

   • Duplicate: creates a copy of the theme for reuse or modification.
   • Delete: permanently removes the theme from your list.
   • Add alternate color palette: applies a different color scheme to the theme for variation.
   • Publish: makes the theme available for use.
3. Choose the theme you want to edit using one of the following ways.

   Page	Option
   Manager (Grid view)	From the Published or Unpublished section, choose the theme you want to edit and select Edit.
   Manager (List view)	From the Published or Unpublished section, choose the theme you want to edit and select the pencil icon .
   Editor	Choose the theme you want to edit from the Theme drop-down list. 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. Global styles overview

   

   Note:

   The following style records are generated with your theme:

   • Your brand palette: Update the interface colors for your brand. For more information, see Edit your theme colors.
   • Logo: Update the logo. You can upload the logo during the theme application from the Overview page. For more information, see Upload a new logo to your Theme Builder theme.
   • Typography: Update the fonts applied globally to your experience. The fonts are used in headlines, titles, subtitles, body text, and captions. For more information, see Edit your default font.
   • Shape: Update the corner shapes of on-screen components. For more information, see Edit corner shapes.
5. Optional: Preview your theme before publishing.
   1. Select the Experiences tab from the Global styles panel.
   2. Select the experience that you want to preview from the Experience drop-down list.
   3. Select the Open in new tab icon to open the experience in a new tab.

      Figure 7. Experience preview

      

      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:

      For published themes, data in the Experiences 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. Core styles define the base theme, variants support accessibility needs, and alternate color palettes provide cosmetic customization options for end users.
• 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.
• Working with Global styles
  Global styles enable you to edit and define core design elements like fonts, colors, and shapes that apply across your entire theme.
• Working with Component styles
  Component styles enable you to fine-tune the appearance of individual UI elements such as buttons, form controls, and navigation without affecting global theme settings. Use component styles when you need more granular control than what Global styles provide.
• 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.