CSS-Include erstellen, um das Design für KI-Suche in Serviceportalzu überschreiben

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 2 Minuten Lesedauer

    • Überschreiben Sie das Design für KI-Suche in Serviceportal, um dem Branding Ihres Unternehmens zu entsprechen.

    Vorbereitungen

    Erforderliche Rolle: sp_admin oder admin

    Warum und wann dieser Vorgang ausgeführt wird

    Als Beispiel für die Stilfunktionen von KI-Suche in Serviceportalentfernt dieses Verfahren die Rahmen um den Suchergebniscontainer und die Suchfilter und ändert die Farbe der Trefferhervorhebung. Sie können mehrere andere Funktionen mithilfe zusätzlicher CSS-Variablen formatieren. Weitere Informationen zu diesen Variablen finden Sie unter Design für KI-Suche in Serviceportal.

    Suchergebniscontainer: Entfernen Sie den Linienrahmen um jedes in der Suche abgerufene Element.

    Suchergebniscontainer.

    Suchfilter: Entfernen Sie den Linienrahmen um Suchfilter.

    Suchfilter.

    Farbe der Trefferhervorhebung: Ändern Sie die Farbe, in der der Suchtreffer im gesuchten Text angezeigt wird.

    Hervorhebungen von Treffern.

    Prozedur

    1. Erstellen Sie einen Stylesheet-Datensatz.
      1. Geben Sie sp_css.do in den Filternavigator ein.
      2. Füllen Sie die Felder des Formulars aus.
        Tabelle : 1. Formular „Formatvorlage“.
        Feld Beschreibung
        Name Eindeutiger Name für Ihr Stylesheet. Beispiel: sp_ais.css.
        CSS Skriptfeld für Ihr CSS-Skript. Geben Sie dieses Skript ein, und passen Sie die Variablen an.

        • Um den Rahmen für den Suchergebniscontainer zu entfernen, fügen Sie dieses Skript ein, und passen Sie es wie gewünscht an.

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

        • Um den Rahmen für Suchfilter zu entfernen, fügen Sie dieses Skript wie gewünscht ein.

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

        • Um die Hervorhebungsfarben für Treffer zu ändern, geben Sie im Skript die gewünschte RGB-Farbe ein.

          sn-search-results-container, sn-search-combobox {
  --now-color_alert--warning-1: rgb(40,103,178) !important;
}
        Das Skript sollte mit Ihren Anpassungen so aussehen, wenn Sie fertig sind.
        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;
}
        Anwendung Anwendung, für die dieses Stylesheet gilt. Global bedeutet, dass das Stylesheet für alle Anwendungen gilt.
      3. Wählen Sie Absenden.
    2. Erstellen Sie einen CSS-Include-Datensatz.
      1. Geben Sie sp_css_include.do in den Filternavigator ein.
      2. Füllen Sie die Felder des Formulars aus.
        Tabelle : 2. Formular „CSS-Einbindung“.
        Feld Beschreibung
        Name Eindeutiger Name für Ihren CSS-Include-Datensatz.
        Quelle Quelle für Ihre CSS-Einbindung. Wählen Sie Formatvorlage aus.
        Stylesheet Das Stylesheet, das Sie in dieses CSS-Include-Formular integrieren möchten. Wählen Sie die Formatvorlage aus, die Sie in Schritt 1 erstellt haben.
        Anwendung Anwendung, für die dieser CSS-Include-Datensatz gilt. Global bedeutet, dass die CSS-Einbindung für alle Anwendungen gilt.
        Verzögertes Laden

        Option zum asynchronen Laden der CSS-Einbindung, um die Seitenladezeit zu verbessern. Diese Option sollte für alle CSS-Einbindungen eines Themas auf denselben Wert festgelegt werden. Es wird nicht empfohlen, das asynchrone Laden nur für einige CSS-Einbindungen zu aktivieren, die einem Thema zugeordnet sind.

        Hinweis:
        Das Aktivieren von „ Verzögertes Laden“ wird nicht für Portale empfohlen, in denen nicht formatierte Inhalte angezeigt werden.

        Die CSS-Includes mit aktiviertem verzögerten Laden werden in der zugehörigen Liste „CSS-Includes verzögert laden “ im Themendatensatz aufgelistet.
    3. Geben Sie Ihre CSS-Überschreibung in das Formular „Stylesheets“ ein, und überschreiben Sie das auf Ihre UI angewendete Design.
      1. Geben Sie im Filternavigator m2m_sp_theme_css_include ein.
      2. Füllen Sie die Felder des Formulars aus.
        Tabelle : 3. Formular „Formatvorlage“.
        Feld Beschreibung
        Reihenfolge Eine Ganzzahl, die die Einbindung dieser Formatvorlage gegenüber anderen Formatvorlagen priorisiert. Je niedriger die Zahl, desto weiter oben in der Liste. In der Regel werden diese Zahlen auf Hunderte gesetzt, z. B. 100, 200, 300 und 400, damit Sie in Zukunft neue Symbole zwischen vorhandenen Symbolen platzieren können.
        CSS beinhaltet CSS-Include, das die in den vorherigen Schritten erstellten Überschreibungen enthält.
        Anwendung Anwendung, für die dieses Stylesheet gilt. Global bedeutet, dass das Stylesheet für alle Anwendungen gilt.
        Design Design, das auf Ihre UI angewendet wird und das Sie überschreiben möchten.
      3. Wählen Sie Absenden.

    Ergebnisse

    Die Rahmen um den Suchergebniscontainer und die Suchfilter werden entfernt, und die Trefferhervorhebungsfarbe zeigt Ihre benutzerdefinierte Farbe an.
    Design für die KI-Suche in SP – Ergebnisse überschreiben.