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

  • Rversion finale: Yokohama
  • Mis à jour 25 août 2025
  • 3 minutes de lecture

    • Remplacez le thème pour Recherche IA qu’il Portail de services corresponde à 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 de fonctionnalités 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 du résultat. Vous pouvez styliser plusieurs autres fonctionnalités à l’aide de variables CSS supplémentaires. Pour plus d’informations sur ces variables, reportez-vous à la section Thèmes pour Recherche IA dans Portail de services.

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

    Conteneur de résultats de recherche affichant des bordures de ligne autour des résultats de recherche.

    Filtres de recherche : supprimez les bordures de ligne autour des filtres de recherche.

    Filtres de recherche affichant les bordures de ligne.

    Couleur de surbrillance de l’accès : Changez la couleur affichant l’accès de recherche sur le texte recherché.

    Frapper les points forts.

    Procédure

    1. Créez un enregistrement de feuille de style.
      1. Entrez sp_css.do dans le navigateur de filtre.
      2. Remplissez les champs du formulaire.
        Tableau 1. Formulaire Feuille de style
        Champ Description
        Nom Nom unique de votre feuille de style. Par exemple, sp_ais.css.
        CSS Champ pour votre code CSS. Saisissez ce code, puis personnalisez les variables.

        • Pour supprimer la bordure du conteneur des résultats de recherche, collez ce code et personnalisez 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 code et personnalisez comme vous le souhaitez.

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

        • Pour changer les couleurs de surbrillance des touches, entrez dans le code la couleur RVB souhaitée.

          sn-search-results-container, sn-search-combobox {
  --now-color_alert--warning-1: rgb(40,103,178) !important;
}
        Le code 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 cette feuille de style s’applique. Global signifie que la feuille de style s’applique à toutes les applications.
      3. Sélectionnez Envoyer.
    2. Créez un enregistrement d’include CSS.
      1. Entrez sp_css_include.do dans le navigateur de filtre.
      2. Remplissez les champs du formulaire.
        Tableau 2. Inclure le formulaire CSS
        Champ Description
        Nom Nom unique de votre enregistrement d’include CSS.
        Source Source pour votre include CSS. Sélectionnez une 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 s’applique cet enregistrement d’include CSS. Global signifie que l’include CSS s’applique à toutes les applications.
        Chargement différé

        Option permettant de charger l’include CSS de manière asynchrone pour améliorer le temps de chargement des pages. Cette option doit être définie sur la même valeur pour tous les Includes CSS d’un thème. Il n’est pas recommandé d’activer le chargement asynchrone pour seulement certains includes CSS associés à un thème.

        Remarque :
        L’activation du chargement différé n’est pas recommandée pour les portails avec un clignotement 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 de chargement différé de l’enregistrement de thème.
    3. Saisissez votre remplacement CSS dans le formulaire des feuilles de style et remplacez le thème appliqué à votre interface utilisateur.
      1. Saisissez m2m_sp_theme_css_include dans le navigateur de filtre.
      2. Remplissez les champs du formulaire.
        Tableau 3. Formulaire Feuilles de style
        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 haut dans la liste. La pratique typique consiste à faire en sorte que ces nombres soient des centaines, par exemple, 100, 200, 300 et 400, afin de pouvoir placer de nouvelles icônes entre celles existantes à l’avenir.
        CSS Include Include CSS qui inclut les remplacements que vous avez créés aux étapes précédentes.
        Application Application à laquelle cette feuille de style s’applique. Global signifie que la feuille de style s’applique à toutes les applications.
        Thème Thème appliqué à votre interface utilisateur que vous souhaitez remplacer.
      3. Sélectionnez Envoyer.

    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 de l’accès affiche votre couleur personnalisée.
    Thématisation pour Recherche IA les résultats de Portail de services remplacement.