Créer un include CSS pour remplacer la thématisation pour Recherche IAPortail de services

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 3 minutes de lecture

    • Remplacez le thème pour Recherche IA être conforme Portail de services à l’image de marque de votre société.

    Avant de commencer

    Rôle requis : sp_admin ou admin

    Pourquoi et quand exécuter cette tâche

    À titre d’exemple des 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 surlignage 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 à Thème 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 la recherche.

    Conteneur des résultats de recherche.

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

    Filtres de recherche.

    Couleur de surlignage : permet de modifier la couleur affichant l’accès à la recherche sur le texte recherché.

    Faits saillants des frappes.

    Procédure

    1. Créez un enregistrement de feuille de style.
      1. Entrez sp_css.do dans le navigateur de filtre.
      2. Renseignez 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 Script pour votre script CSS. Saisissez 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 comme vous le souhaitez.

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

        • Pour modifier les couleurs de surbrillance, 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;
}
        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.
      3. Sélectionnez Envoyer.
    2. Créez un enregistrement Include CSS.
      1. Saisissez sp_css_include.do dans le navigateur de filtre.
      2. Renseignez les champs du formulaire.
        Tableau 2. Formulaire Include CSS
        Champ Description
        Nom Nom unique de votre enregistrement CSS Include.
        Source Source pour votre include CSS. Sélectionnez Feuille de style.
        Feuille de style La feuille de style que vous souhaitez incorporer à ce formulaire Include CSS. Sélectionnez la feuille de style que vous avez créée à l’étape 1.
        Application Application à laquelle cet enregistrement CSS Include s’applique. Global signifie que le CSS include s’applique à toutes les applications.
        Chargement différé

        Option permettant de charger le CSS Include 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 CSS Includes associés à un thème.

        Remarque :
        L’activation du chargement différé n’est pas recommandée pour les portails avec flashage de contenu sans style.

        Les CSS Includes pour lesquels la fonctionnalité Chargement différé est activée sont répertoriées dans la liste connexe Includes CSS de chargement différé dans 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. Entrez m2m_sp_theme_css_include dans le navigateur de filtre.
      2. Renseignez les champs du formulaire.
        Tableau 3. Formulaire Feuilles de style
        Champ Description
        Ordre Nombre 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 aux é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.
      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 affiche votre couleur personnalisée.
    Thèmes pour AI Search dans les résultats de remplacement du portail de services.