Skip to main content

Exercise 1 - Activity 1

Explore the Theme Builder home page​

This section will cover the Theme Builder Home page. The Home page provides information on the benefits of using Theme Builder, additional theming resources, and quick links to theme other products such as Service Portal, Virtual Agent, etc.

  1. In the All menu navigate to Now Experience Framework > Theme Management > Theme Builder.

  2. Theme Builder will open in a new tab in the browser window, be sure to keep the instance tab open during the lab as well as it will be used later.

    note

    If Theme Builder does not open in a new tab, ensure the browser is allowing pop-ups for the instance.

  3. The Home page is the current page and is the visible section under the Page menu at the top left of the screen next to the Theme Builder logo.

  4. Scroll down the page to get familiar with the sections.

    1. The Benefits section provides information on Theme Builder, such as the assets needed to create a theme and visual images of Theme Builder.

    2. The Resources section contains links to other theming tools to brand products such as Service Portal, Virtual Agent, and more.

      note

      There is a Feedback button at the top right corner of each of the Theme Builder pages. You can use this button to send Feedback directly to the Theme Builder product team in your customer instance. It is not used for feedback for this lab.

Create a Theme and enter branding colors​

In this section, the built-in wizard will walk through creating a theme in a few steps.

  1. On the Home page in Theme Builder, click the Create a theme button at the top of the page.

  2. The "Before we get started" modal window will display information about the brand assets required to create a theme such as a logo and colors. The assets will be provided in the steps below.

  3. Click the Continue button at the bottom right corner of the modal window.

  4. Complete the following fields in the "First, let’s name your theme (Step 1 of 9)" window:

    1. Name: Wasabi Donut

    2. Description: Theme created in the Knowledge 2024 Theme Builder Lab

  5. Click Next.

  6. In the following "What’s your brand’s primary color? (Step 2 of 9)" window:

    1. Click the Primary color box to reveal a color palette. Click HEX, enter #032D42 then click Apply.

    note

    The color palette tool, color slider, or the dropdown can be used to enter a color. Clicking the down arrow next to HEX will reveal options for RBG and HSL.

  7. In the preview image displayed within the modal, notice the color selection is represented in areas such as the Unified Navigation header, buttons, etc. The primary brand color will be featured in prominent parts of the interface, such as application navigation, menus, and other common components.

  8. Click Next.

  9. In the following "Do you want to add a secondary color? (Step 3 of 9)" window:

    1. Click the Secondary color box to reveal a color palette. Click HEX, enter #62D84E, then click Apply.

  10. In the preview image displayed within the modal, notice the color selection is represented in areas such as the Contextual Sidebar on the bottom right side of the image. A secondary color supports a primary color, if there is no secondary color, the primary brand color will be used.

  11. Click Next.

  12. In the following "Now, choose a neutral brand color (Step 4 of 9)" window:

    1. The suggested Neutral color will be used in this lab and defaults to #CCCCCC. No adjustments are needed for this step.

  13. In the preview image displayed, the color selection is not displayed. The neutral color is used to develop relationships between objects such as divider lines and surface containers. Theme Builder will set this color automatically to comply with most brands.

  14. Click Next.

  15. In the following "Do you want to add any additional colors? (Step 5 of 9)" window:

    1. Click +Add new link.

    2. Click Color 1 to reveal a color palette. Click HEX, enter #009156, then click Apply.

    3. Repeat to add the following colors:

      1. Color 2: #5274FF, Color 3: #24C2CE, Color 4: #FC7786, Color 5: #FFDE1D, Color 6: #FCA822.

  16. There is no preview image displayed for additional colors, as these colors are not applied automatically and can be selected when using the Editor. Additional colors can be added to provide seasonal or other colors that add pops of color to an experience.

  17. Click Next.

In this section, the company’s logo could be uploaded and added to the theme to override the default ServiceNow logo. There are image requirements for adding a logo in Theme Builder:

  • Files cannot be larger than 400 x 50px

  • Files must be under 120 KB in size

  • File type must be SVG, PNG, or JPG

  1. In the Next, let’s add your company logo (Step 6 of 9) window, we will not be uploading a logo for the purposes of this lab.

  2. Click Next.

Choose a font​

In this section, a font will be selected for the theme from one of the out-of-the-box fonts in Theme Builder. The fonts included in Theme Builder work with a wide range of experiences, and include multiple weights, styles, and character sets.

  1. In the "Which font would you like to use? (Step 7 of 9)" window, there are four out-of-the-box fonts to choose from: Cabin, Lato, Open Sans, and Source Sans Pro.

    note

    Lato is the font that is shipped with the Next Experience UI by default.

  2. Click on each font option to see a preview of the font weights and styles.

  3. Select the Source Sans Pro font.

  4. Click Next.

Choose corner styling​

Corner styling applies to components such as buttons, modal windows, dropdown menus, and assists in establishing the visual tone of the interface for the instance.

  1. In the "Almost done. Choose the corner shape you prefer (Step 8 of 9)" window click through each of the four corner styling options to view a preview in the picture to the right.

  2. Select Less rounded.

  3. Click Next.

Review theme selections​

The built-in theming wizards walks through building a theme in a few steps and provides an opportunity to review selections prior to the theme creation.

  1. In the "Finally, review your selections (Step 9 of 9)" window, verify the selections displayed are the ones chosen from the previous sections. Prior to theme generation, an admin can go back to a previous step to make any adjustments at this point.

  2. Click the Create theme button.

  3. The Editor page will open with selections chosen previously in the wizard.