Manage or edit a theme with Theme Builder

You can customize and manage your theme and styling in a time and cost efficient way. New themes can be applied to web only, mobile only, or both web and mobile implementations 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 displays in the Home page view.
2. You can select the theme you want to edit from either the Manager or Editor page view.

   Figure 1. Page menu

   

   • From the Manager page view, you have the choice of viewing existing themes in two ways, in Grid view or List view as selected using the following icons. In Manager page view, you can see all of the themes you created on the same screen.

     Figure 2. Grid view

     

     Figure 3. List view

     

     Note:

     The List view indicates the experiences upon which themes have been applied. For example, ABC Co. theme has been applied in web instances and the Blimey theme has been applied in mobile instances. The Apply drop-down allows you to select Web & mobile, Web only, or Mobile only. For more information, see Apply your theme with Theme Builder.
   • From the Editor page view, you can select the theme you want to edit from the Theme drop-down list. In Editor page view, you can see only the theme you select. To see all of the themes you have created in the same screen, switch to Manager page view.

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

     

   Note:

   When you have selected the theme you want to work on, it is a good idea to verify that you have selected the correct scope for the them from the application scope picker.

   Figure 5. Application Scope Picker

   

3. When you've selected the theme you want to edit, review and update the Global styles components as required.

   Figure 6. Review global styles

   

   Note:

   The following are the style records generated with your theme.

   • Your brand palette: Update the interface colors for your brand.
   • Logo: Update the logo. You can upload the logo during theme application either from imagery or the overview page. See Upload a logo while applying a theme for more information.
   • Font Family: Update the fonts applied globally to your experience. The fonts are used in headlines, titles, subtitles, body text, and captions.
   • Shape: Update the corner shapes of on-screen components.
4. Optional: To preview your theme before applying it to your instance, select the Experience preview tab.

   

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

   Figure 7. Preview of your experience with theme applied

   

   Note:

   Data in the Experience preview is live data; changes made in preview are reflected on your instance.
5. To apply the theme to your instance, select Apply theme in the upper right corner.
   Note:

   You can apply your theme to only web implementations of your instance, only mobile implementations, or both web and mobile implementations.

   

6. After you've made a selection, select Apply in the confirmation box.
   Note:

   If the theme name is the same as the currently applied theme, the Apply theme button is disabled. For more information, see Apply a theme.

• 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
  After you have created a theme, you can further customize it by creating an alternate color palette for the theme and applying it to your instance.
• Preview components
  As you are creating or managing your theme, you can preview the components available for inclusion on your instance.
• Edit components
  As you create or manage your theme, you can edit individual components to better suit your brand and to meet accessibility compliance standards. The theme hooks you can edit are specific to each type of component.