Create a CSS include to override theming for AI Search in Service Portal

  • Freigeben Version: Australia
  • Aktualisiert 12. März 2026
  • 3 Minuten Lesedauer

    • Override theming for AI Search in Service Portal to match your company branding.

    Vorbereitungen

    Role required: sp_admin or admin

    Warum und wann dieser Vorgang ausgeführt wird

    As an example of styling features of AI Search in Service Portal, this procedure removes the borders around the search results container and search filters and changes the hit highlight color. You can style several other features using additional CSS variables. For more information about these variables, see Theming for AI Search in Service Portal.

    Search results container: Remove the line border around each item retrieved in the search.

    Search results container showing line borders around search results.

    Search filters: Remove the line borders around search filters.

    Search filters showing line borders.Search filters panel showing line borders.

    Hit highlight color: Change the color displaying the search hit on the text searched.

    Hit highlights.

    Prozedur

    1. Create a style sheet record.
      1. Enter sp_css.do in the Filter navigator.
      2. On the form, fill in the fields.
        Tabelle : 1. Style Sheet form
        Field Description
        Name Unique name for your style sheet. For example, sp_ais.css.
        CSS Field for your CSS code. Enter this code and then customize the variables.

        • To remove the border for the search results container, paste this code and customize as desired.

          sn-search-results-container  {
  --now-container--border-width: 0px !important;
  --mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important;
  --mv9-jvmzramtz--kvzptz-9apz8: 0px !important;
}

        • To remove the border for search filters, paste this code aand customize as desired.

          sn-search-facets {
  --now-color--divider-tertiary: 0px !important;
}

        • To change the hit highlight colors, enter in code the desired RGB color.

          sn-search-results-container, sn-search-combobox {
  --now-color_alert--warning-1: rgb(40,103,178) !important;
}
        The code should look like this with your customizations included when you're done.
        sn-search-results-container  {
  --now-container--border-width: 0px !important;
  --mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important;
  --mv9-jvmzramtz--kvzptz-9apz8: 0px !important;
}
 
sn-search-facets {
  --now-color--divider-tertiary: 0px !important;
}
 
sn-search-results-container, sn-search-combobox {
  --now-color_alert--warning-1: rgb(40,103,178) !important;
}
        To remove the border for the search filters panel, paste this code and customize as desired.
        sn-search-facets {
  --now-color--divider-tertiary: 0px !important;
}
        Application Application this style sheet applies to. Global means the style sheet applies to all applications.
      3. Select Submit.
    2. Create a CSS include record.
      1. Enter sp_css_include.do in the filter navigator.
      2. On the form, fill in the fields.
        Tabelle : 2. CSS Include form
        Field Description
        Name Unique name for your CSS include record.
        Source Source for your CSS include. Select Style Sheet.
        Style sheet The style sheet you want to incorporate with this CSS include form. Select the style sheet you created in step 1.
        Application Application this CSS include record applies to. Global means the CSS include applies to all applications.
        Lazy Load

        Option to load the CSS Include asynchronously to improve page load time. This option should be set to the same value for all CSS Includes of a theme. Enabling asynchronous loading for only some CSS Includes associated with a theme isn’t recommended.

        Hinweis:
        Enabling Lazy Load isn’t recommended for portals with flashing of unstyled content.

        The CSS Includes with Lazy Load enabled are listed in the Lazy load CSS includes related list in the theme record.
    3. Input your CSS override into the style sheets form and override the theme that's applied to your UI.
      1. Enter m2m_sp_theme_css_include in the filter navigator.
      2. On the form, fill in the fields.
        Tabelle : 3. Style Sheets form
        Field Description
        Order An integer that prioritizes the incorporation of this style sheet against other style sheets. The lower the number, the higher in the list. The typical practice is to make these numbers hundreds, for example, 100, 200, 300, and 400, so you can put new icons between existing ones in the future.
        CSS Include CSS include that includes the overrides you created in previous steps.
        Application Application this style sheet applies to. Global means the style sheet applies to all applications.
        Theme Theme that's applied to your UI that you want to override.
      3. Select Submit.

    Ergebnisse

    The borders around the search results container and search filters are removed and the hit highlight color displays your custom color.
    Theming for AI Search in Service Portal override results.
    Search filters panel with line borders removed.