Skip to main content

Exercise 1 - Activity 3

Apply the theme to the instance​

In this section, the Manager page will be used to apply a theme to the instance. Applying a theme can also be done from the Editor page. Theme Builder can apply the theme to the web (desktop) version of the instance, mobile-only, or both. This means the theme can span across the desktop version of the instance and mobile, or mobile apps such as Now Agent and Now Mobile can have a different theme.

  1. At the top left of the page click the Page pill, next to the Theme Builder logo. Select the Manager page.

  2. The Manager page will load and display the themes currently available on the instance. The Polaris theme and U.S. Web Design System theme are available by default.

    note

    As of this lab, Theme Builder will only display themes created from Theme Builder, and not themes created via the UX Themes table.

  3. Themes can be viewed in either a grid or list view, and sorting is available. Theme Builder will display in a grid view by default.

  4. Locate the Wasabi Donut card, and click the three vertical dots or hamburger menu, to reveal the Duplicate and Delete options. These options can be used to manage themes that are no longer needed or create a new copy of a theme for further editing.

  5. The pencil icon on the theme card will open the theme in the Editor page.

  6. The theme card will display if the theme is part of the currently selected scope, so accidental editing does not occur in a different scope.

  7. To apply the theme only to the instance, click the down arrow (v) next to the Apply button on the theme card, and choose Web only. A modal window will appear asking to apply the theme, click Apply.

  8. A message will appear at the top stating the theme has been applied to the instance, this may take a moment, notice the status icon at the top right corner turns brown with a horizontal line, meaning that Theme Builder is performing the operation.

Explore the theme on the instance​

In this section, the theme has been applied to the instance. A quick tour of the default landing page and Classic Environment lists and forms will display how the theme looks on the instance.

  1. Click on the browser tab of your instance, recall that Theme Builder opened in a new tab. If the instance tab has been closed out, remove the /now/theme-builder/manager portion from the URL to return to the instance.

  2. Refresh the browser window to reflect the theme changes.

  3. Click the ServiceNow logo to return to the landing page.

  4. Notice how the theming is applied to the default landing page shipped with Next Experience UI, the Unified Navigation header at the top, and the logo at the top left corner of the Unified Navigation header.