Customize theme-able empty state images for your theme

Customize default theme-able empty state images for your Next Experience and Theme Builder themes using the theme's Imagery record.

Before you begin

Role required: admin

About this task

Important: You can customize empty state images for Workspaces, but customization is not supported in the Core UI.

Procedure

1. Navigate to All > Now Experience Framework > Themes.

   The UX Themes table is displayed.

2. Select your custom theme from the UX Themes table.

   The UX Theme record for your chosen theme appears.

3. From the Compositional App Theme tab, select the Imagery record.

4. From the Imagery style record, enter the following empty state image theme hooks into the Style field.

   {
       "properties": {
           "--now-illustration--add-attachment-sm--url": "",
           "--now-illustration--add-attachment-md--url": "",
           "--now-illustration--add-attachment-lg--url": "",
           "--now-illustration--add-data-sm--url": "",
           "--now-illustration--add-data-md--url": "",
           "--now-illustration--add-data-lg--url": "",
           "--now-illustration--completed-tasks-sm--url": "",
           "--now-illustration--completed-tasks-md--url": "",
           "--now-illustration--completed-tasks-lg--url": "",
           "--now-illustration--error-sm--url": "",
           "--now-illustration--error-md--url": "",
           "--now-illustration--error-lg--url": "",
           "--now-illustration--first-time-user-sm--url": "",
           "--now-illustration--first-time-user-md--url": "",
           "--now-illustration--first-time-user-lg--url": "",
           "--now-illustration--interrupted-sm--url": "",
           "--now-illustration--interrupted-md--url": "",
           "--now-illustration--interrupted-lg--url": "",
           "--now-illustration--no-data-sm--url": "",
           "--now-illustration--no-data-md--url": "",
           "--now-illustration--no-data-lg--url": "",
           "--now-illustration--no-search-results-sm--url": "",
           "--now-illustration--no-search-results-md--url": "",
           "--now-illustration--no-search-results-lg--url": "",
           "--now-illustration--offline-sm--url": "",
           "--now-illustration--offline-md--url": "",
           "--now-illustration--offline-lg--url": "",
           "--now-illustration--permissions-sm--url": "",
           "--now-illustration--permissions-md--url": "",
           "--now-illustration--permissions-lg--url": "",
           "--now-illustration--unconfigured-sm--url": "",
           "--now-illustration--unconfigured-md--url": "",
           "--now-illustration--unconfigured-lg--url": "",
           "--now-illustration--no-activities-sm--url": "",
           "--now-illustration--no-activities-md--url": "",
           "--now-illustration--no-activities-lg--url": ""
       }
   }
   

5. Add your custom image in one of the following ways.

   • Add image to UX Style Assets list.
     1. On the UX Style Assets tab, select New.
     2. Select the Lookup icon(

    3.  In the UX Theme Assets list, select **New**.
    4.  Select the Manage Attachments icon \(

    5.  When the image asset is uploaded, close the Attachments window.

        **Note:** Verify that your image is in SVG format.

    6.  Enter the file name of the asset in the **Name** field and select **Submit**. The asset is added to the UX Style Assets list.
    7.  In the UX Style Assets tab, select and hold \(or right-click\) the asset and select **Copy sys\_id**.
    8.  Enter the sys\_id into the Style field using the following format:`"/uxta/ENTERYOURSYSID.assetx"`
-   Add your custom image to the Images \[db\_images\_list.do\] table.

    **Note:** Verify that your image is in SVG format.

    1.  For detailed instructions, see [Upload one or more images](upload-multiple-images.md).
    2.  From the Imagery style record, enter the image file name into the **Style** field using the following format: `"/FILENAME.svg"`.

1. Select Update.

   The custom images appear in your theme.

2. Customize the colors of your empty state images using the UX Style color record associated with your theme to override the default theme hooks.

   For a step-by-step tutorial on editing your UX Style color record, see Exercise 3, Activity 2 and 3 of the Next Experience Workshop in the ServiceNow Community.

   Note: Using the default theme hooks is recommended.

Parent Topic:Working with theme-able empty state images