---
sourceDocument: Interface utilisateur de la Now Platform Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interface utilisateur de la Now Platform Xanadu

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Créer un include CSS pour remplacer le thème dans Recherche IAPortail de services

# Créer un include CSS pour remplacer le thème dans Recherche IAPortail de services {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes de lecture

Remplacez la thématisation pour Recherche IA être Portail de services conforme à l'image de marque de votre entreprise.

## Avant de commencer

Rôle requis : sp_admin ou admin

## Pourquoi et quand exécuter cette tâche

À titre d'exemple d'attributs de style de dans Portail de services, cette procédure supprime les bordures autour du conteneur des résultats de recherche et des filtres de Recherche IA recherche, et modifie la couleur de surbrillance des résultats. Vous pouvez appliquer un style à plusieurs autres fonctionnalités à l'aide de variables CSS supplémentaires. Pour plus d'informations sur ces variables, reportez-vous à la section [Thème pour Recherche IA dans Portail de services](https://servicenow-prod.fluidtopics.net/azRU745QZkJPadgSqXYvcQ "Vous pouvez personnaliser l’apparence de l’expérience Recherche IA en Portail de services mettant à jour les variables CSS pertinentes.").

Conteneur des résultats de recherche : supprimez la bordure de ligne autour de chaque élément récupéré lors de la recherche.

Filtres de recherche : supprimez la bordure de ligne autour des filtres de recherche.

Couleur de surbrillance des résultats : modifie la couleur affichant l'accès à la recherche sur le texte recherché.

## Procédure

1. Créez un enregistrement de feuille de style.
   1. Saisissez <kbd class="ph userinput">sp_css.do</kbd> dans le navigateur de filtre.
   2. Renseignez les champs du formulaire.  
      {#css-override-ais-theming-sp__table_qxq_4mh_wqb__entry__2}

      | Champ | Description |
      |-|-|
      | Nom | Nom unique de votre feuille de style. Par exemple, sp_ais.css. |
      | CSS | Champ de script pour votre script CSS. Entrez ce script, puis personnalisez les variables. * Pour supprimer la bordure du conteneur des résultats de recherche, collez ce script et personnalisez-le comme vous le souhaitez. sn-search-results-container  { --now-container--border-width: 0px !important; --mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important; --mv9-jvmzramtz--kvzptz-9apz8: 0px !important; } * Pour supprimer la bordure des filtres de recherche, collez ce script en le personnalisant comme vous le souhaitez. sn-search-facets { --now-color--divider-tertiary: 0px !important; } * Pour changer les couleurs de surbrillance des résultats, entrez dans le script la couleur RVB souhaitée. sn-search-results-container, sn-search-combobox { --now-color_alert--warning-1: rgb(40,103,178) !important; } {#css-override-ais-theming-sp__ul_bsb_rpp_wqb} Le script doit ressembler à ceci avec vos personnalisations incluses lorsque vous avez terminé. 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; } |
      | Application | Application à laquelle s'applique cette feuille de style. Global signifie que la feuille de style s'applique à toutes les applications. |
      [Tableau 1. Formulaire Feuille de style]

      {#css-override-ais-theming-sp__table_qxq_4mh_wqb}
   3. Sélectionnez Soumettre.
2. Créez un enregistrement d'include CSS.
   1. Entrez <kbd class="ph userinput">sp_css_include.do</kbd> dans le navigateur de filtre.
   2. Renseignez les champs du formulaire.  
      {#css-override-ais-theming-sp__table_f1c_zmh_wqb__entry__2}{#css-override-ais-theming-sp__p_nmg_nfg_h1c}

      | Champ | Description |
      |-|-|
      | Nom | Nom unique de votre enregistrement d'include CSS. |
      | Source | Source pour votre CSS include. Sélectionnez la feuille de style. |
      | Feuille de style | La feuille de style que vous souhaitez incorporer à ce formulaire d'include CSS. Sélectionnez la feuille de style que vous avez créée à l'étape 1. |
      | Application | Application à laquelle cet enregistrement d'inclusion CSS s'applique. Global signifie que l'inclusion CSS s'applique à toutes les applications. |
      | Chargement différé | Option permettant de charger l'include CSS de manière asynchrone afin d'améliorer le temps de chargement de la page. Cette option doit être définie sur la même valeur pour tous les CSS Includes d'un thème. Il n'est pas recommandé d'activer le chargement asynchrone uniquement pour certains includes CSS associés à un thème.{#css-override-ais-theming-sp__p_lmg_nfg_h1c} Remarque : L'activation du chargement différé n'est pas recommandée pour les portails avec flashage de contenu sans style. Les includes CSS pour lesquels le chargement différé est activé sont répertoriés dans la liste connexe Includes CSS à chargement différé dans l'enregistrement de thème. |
      [Tableau 2. Formulaire CSS Include]

      {#css-override-ais-theming-sp__table_f1c_zmh_wqb}
   {#css-override-ais-theming-sp__substeps_tx2_rmh_wqb}
3. Saisissez votre remplacement CSS dans le formulaire des feuilles de style et remplacez le thème appliqué à votre interface utilisateur.
   1. Saisissez <kbd class="ph userinput">m2m_sp_theme_css_include</kbd> dans le navigateur de filtre.
   2. Renseignez les champs du formulaire.  
      {#css-override-ais-theming-sp__table_jgc_4nh_wqb__entry__2}

      | Champ | Description |
      |-|-|
      | Ordre | Entier qui donne la priorité à l'incorporation de cette feuille de style par rapport à d'autres feuilles de style. Plus le nombre est bas, plus il est haut dans la liste. La pratique typique consiste à faire de ces nombres des centaines, par exemple, 100, 200, 300 et 400, afin de pouvoir placer de nouvelles icônes entre les icônes existantes à l'avenir. |
      | Portail de services Include CSS | Include CSS qui inclut les remplacements que vous avez créés dans les étapes précédentes. |
      | Application | Application à laquelle s'applique cette feuille de style. Global signifie que la feuille de style s'applique à toutes les applications. |
      | Thème | Thème appliqué à votre interface utilisateur que vous souhaitez remplacer. |
      [Tableau 3. Formulaire Feuilles de style]

      {#css-override-ais-theming-sp__table_jgc_4nh_wqb}
   3. Sélectionnez Soumettre.
   {#css-override-ais-theming-sp__substeps_olg_jnh_wqb}
{#css-override-ais-theming-sp__steps_mwq_mwb_wqb}

## Résultats

Les bordures autour du conteneur des résultats de recherche et des filtres de recherche sont supprimées et la couleur de surbrillance des résultats affiche votre couleur personnalisée.  

* **[Thème pour Recherche IA dans Portail de services](https://servicenow-prod.fluidtopics.net/azRU745QZkJPadgSqXYvcQ)**   
  Vous pouvez personnaliser l'apparence de l'expérience Recherche IA en Portail de services mettant à jour les variables CSS pertinentes.