Thèmes pour Recherche IA dans Portail de services

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 4 minutes de lecture

    • Vous pouvez personnaliser l’aspect et la convivialité de l’expérience Recherche IA en Portail de services mettant à jour les variables CSS pertinentes.

    Les variables CSS suivantes contrôlent l’aspect et la convivialité des Recherche IA fonctionnalités dans Portail de services. Pour plus d’informations sur les Recherche IA fonctionnalités, consultez Utilisation de Recherche IA.

    Vous pouvez modifier ces variables dans le champ de variables CSS d’un enregistrement de thème [sp_theme]. Vous pouvez également configurer ces variables avec un Include CSS associé au thème d’un portail. Pour en savoir plus, consultez les rubriques suivantes :

    Variable Valeur par défaut Description
    $now-sp-font-family-sans-serif « SourceSansPro », Helvetica, Arial, sans-serif Famille de polices pour tous les textes.
    $now-sp-color--text-primary $gray foncé Couleur des onglets non sélectionnés, du texte du bouton de résultat Genius, de la couleur du texte d’accès, des icônes de résultats et du texte de l’élément de liste déroulante de la barre de recherche et couleur de l’icône.
    $now-sp-text-link--primary--color $gray foncé Couleur du texte du titre dans les résultats de la recherche.
    $now-sp-display-type--tertiaire--couleur $gray foncé Couleur de l’extrait de texte dans les résultats de recherche.
    $now-sp-color--neutre-12 $gray foncé Couleur d’icône développée (chevron) des facettes dans la vue mobile.
    $now-sp-global-border-radius 4px Les angles arrondis des résultats de recherche affectent le volet de contenu et non les cartes de résultats de recherche. Cette variable affecte également les résultats Genius, les boutons des résultats Genius et les surbrillances de l’arrière-plan du survol de l’icône de la barre de recherche. Cette variable n’affecte pas les facettes.
    $now-sp-color--focus-ring $brand-primaire Couleur du focus des onglets.
    $now-sp-tabs--selected--color $brand-primaire Couleur du texte de l’onglet sélectionné. N’inclut pas lors du survol.
    $now-sp-tabs--color--hover $brand-primaire Couleur du texte de tous les onglets survolés.
    $now-sp-tabs--border-color $sp-b-couleur-bordure Couleur du soulignement des onglets.
    $now-sp-tabs--selected--background-color $brand-primaire Couleur de soulignement de l’onglet sélectionné.
    $now-sp-heading--title-primary--color $gray foncé Étiquette Filtres de couleur.
    $now-sp-checkbox-label--color $gray foncé Couleur de l’élément de filtre (étiquette de la case à cocher).
    $now-sp-button--primary--bare--color $link couleur Tout effacer et Effacer la couleur du lien dans le filtre à facettes.
    $now-sp-button--primary--bare--color--active $link couleur Effacer tout et Effacer la couleur du lien dans le filtre des facettes lors d’un clic.
    $now-sp-button--primary--bare--color--hover $link-couleur de survol  Effacer tout et Effacer la couleur du lien dans le filtre des facettes lors du survol.
    $now-sp-pill--selected--background-color $brand-primaire Arrière-plan de pastille de filtre sélectionné.
    $now-sp-pill--selected--border-color $brand-primaire Couleur de bordure des pastilles de filtre sélectionnée.
    $now-sp-button--secondary--background-color $btn-default-bg Arrière-plan du bouton de résultat Genius.
    $now-sp-button--secondary--color $btn-couleur-par défaut Couleur du texte du bouton de résultat Genius.
    $now-sp-button--secondary--border-color $btn-bordure par défaut Couleur de bordure du bouton de résultat Genius.
    $now-sp-button--secondary--background-color--hover assombrir ($btn-default-bg, 10 %) Couleur d’arrière-plan du bouton de résultat Genius lors du survol.
    $now-sp-button--secondary--color--hover $btn-couleur-par défaut Couleur du texte du bouton de résultat Genius lors du survol.
    $now-sp-button--secondary--border-color--hover assombrir ($btn-bordure-défaut, 12 %) Bordure du bouton Résultat Genius lors du survol.
    $now-sp-button--secondary--background-color--active assombrir ($btn-default-bg, 10 %) Arrière-plan du bouton de résultat Genius au clic.
    $now-sp-button--secondary--color--active $btn-couleur-par défaut Couleur du texte du bouton de résultat Genius au clic.
    $now-sp-button--secondary--border-color--active assombrir ($btn-bordure-défaut, 12 %) Couleur de bordure du bouton de résultat Genius lors d’un clic.
    $now-sp-highlighted-value--tertiaire--couleur $gray foncé Couleur du texte de la balise du meilleur résultat Genius.
    $now-sp-button--border-radius $now-sp-global-border-radius Différencie le rayon des boutons de bouton et de la barre de recherche.
    $now-sp-container--border-radius $now-sp-global-border-radius Rayon de bordure pour les cartes de résultats de recherche, les cartes de résultats Genius et le conteneur des résultats de recherche. N’affecte pas la frontière entre les résultats individuels.
    $now-sp-button--primary-negative--background-color $btn-primaire-bg Couleur d’arrière-plan du bouton Genius dans la fenêtre modale de confirmation de l’action EVAM.
    $now-sp-button--primary-negative--border-color $btn-primaire-bordure Couleur de bordure du bouton Genius dans le modal de confirmation de l’action EVAM.
    $now-sp-button--primary-negative--background-color--hover assombrir ($btn-primaire-bg, 10 %) Couleur d’arrière-plan du bouton Genius lors du survol dans la fenêtre modale de confirmation de l’action EVAM.
    $now-sp-button--primary-negative--border-color--hover assombrir ($btn-primaire-bordure, 12 %) Couleur de bordure du bouton Genius lors du survol à l’intérieur de la confirmation.
    $now-sp-button--primary-negative--background-color--active assombrir ($btn-primaire-bg, 10 %) Couleur d’arrière-plan du bouton Genius lors d’un clic dans la fenêtre modale de confirmation.
    $now-sp-button--primary-negative--border-color--active assombrir ($btn-primaire-bordure, 12 %) Couleur de bordure du bouton Genius lors d’un clic dans le modal de confirmation.
    $now-sp-button--primary--background-color $btn-primaire-bg Couleur d’arrière-plan du filtre sélectionné (pastille).
    $now-sp-button--primary--border-color $btn-primaire-bordure Couleur de bordure du filtre sélectionné (pastille)
    $now-sp-button--primary--color $btn-couleur primaire Couleur du filtre (pastille) sélectionné.
    $now-sp-button--primary--background-color--hover assombrir ($btn-primaire-bg, 10 %) Couleur d’arrière-plan du filtre sélectionné (pastille) lors du survol.
    $now-sp-button--primary--border-color--hover assombrir ($btn-primaire-bordure, 12 %) Couleur de bordure du filtre (pastille) sélectionné lors du survol.
    $now-sp-button--primary--background-color--active assombrir ($btn-primaire-bg, 10 %) Couleur d’arrière-plan du filtre sélectionné (pastille) au clic.
    $now-sp-button--primary--border-color--active assombrir ($btn-primaire-bordure, 12 %) Couleur de bordure du filtre (pastille) sélectionné au clic.
    $now-sp-rem-factor 5 Même variable que --classicsponlydonotuse--rem-multipy.
    Remarque :
    Il n’est pas recommandé d’utiliser cette variable.
    $sp-search-result-title-highlight--background-color Aucun Couleur d’arrière-plan du texte pour mettre en surbrillance le titre dans les résultats de recherche.
    Remarque :
    Pour que ce paramètre de thème prenne effet, vous devez ajouter la valeur statique removeHitHighlighting avec la valeur « faux » pour le composant sn-search-result-evam-card dans le modèle de vue pertinent EVAM , comme indiqué dans cet exemple :
    {
  "component": "sn-search-result-evam-card",
  "staticValues": {
    "removeHitHighlighting": {
      "translatable": true,
      "key": "false"
    }
  },
}

    Pour en savoir plus sur la configuration des paramètres des EVAM modèles de vue, reportez-vous à la section Define an EVAM view template.