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.

Avant de commencer

Role required: ui_builder_admin

For information on granular roles, see Granular admin roles.

Pourquoi et quand exécuter cette tâche

The components that you can edit in Theme Builder were created in the ServiceNow AI Platform Design System. For more information, see Next Experience Components on the ServiceNow Developer Site.

For instructions on editing the Unified Navigation component, see Align with your brand by using the Unified Navigation component.

The total number of accessibility violations is indicated on the red numbered badge icon alongside the Accessibility inspector panel.

Procédure

1. Navigate to All > Now Experience Framework > Themes > Theme Builder.
   The Theme Builder landing page displays in the Home page view.
2. Use the Page drop-down list to select the Editor page view.

   Figure 1. Page drop-down list

   

3. From the Theme drop-down list, select the theme that you want to edit components for.
4. From the Editor page view, select the Component styles tab.
   The component styles are graphically listed.

   

5. Select the Editing tab.

   

   Remarque :

   The components that can be edited are displayed. For information on how to filter the list of components to locate the component you want to edit, see Preview components.
6. Select the component that you want to edit to access the Configurable Style panel.
   When you’re looking at the components listed in the Editing page, notice that some components may display the following symbol.

   

   Remarque :

   The accessibility warning symbol indicates that the color contrast of the selected component doesn’t adhere to Web Content Accessibility Guidelines (WCAG) 2.1 accessibility standards for color contrast. For information on editing components with accessibility violations, see Adjust a component to meet accessibility standards.
7. From the Configurable style panel, edit the theme hooks that are available for the selected component, as needed.

   Figure 2. Configurable style panel

   

   The editable theme hooks that are available depend on the type of component you selected. For example, if you select a Badge component, you can edit the colors and accessibility hooks for the badge. If you select a Text link component, you can edit the base color and accessibility hooks.

   Remarque :

   After you update the component-specific hooks, any changes that you make from global styles won't affect your component edits. Component-specific styles take precedence over globally defined styles.
8. If you select a color to be edited, the color picker opens.

   Figure 3. Color picker

   

   Remarque :

   By default, the color picker shows all the available colors for the component. Use the My Colors tab to select from a predefined list of colors or choose the Custom tab to select the specific color model that you prefer: HEX, RGB, or HSL.
9. When you have completed your color changes, select Save changes.
10. If you select a shape to be edited, use the selector modals to choose border width and corner radius.
11. When you have completed your shape changes, select Save changes.
12. If you select a font family or font face to be edited, the selector modal opens.

    Figure 4. Edit font family modal

    

    Remarque :

    If you have uploaded a custom font, it will appear in the modal for selection. You can also upload a custom font directly from the selector modal making it available for use throughout your theme. For more information, see Upload a custom font to your theme.
13. When you have completed your font changes, select Save changes.
14. Facultatif : Select the undo icon to revert your font to Source Sans Pro, if needed.
15. Access the Component Editor where you can style various aspects of a component by using one of the two ways listed:
    • Double-click the component tile.
    • Select either the Style interactions, Style subcomponents, or Style variants button within the configurable styles panel, depending on what is available for that specific component.
      Remarque :

      Not all components contain editable parts.

      Figure 5. Component Editor

      

16. From the Component Editor, choose the interaction, variant, or subcomponent of the selected component, then edit the available theme hooks.
    Remarque :

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

    

17. Facultatif : Return to the Component Overview screen using the links within the navigational path.

    Figure 6. Component editing breadcrumb navigation

    

Résultats

If your theme is published, your component edits are visible to users who have your theme applied on refresh. For information on publishing your theme, see Publish your themes with Theme Builder.