Erstellen Sie eine CSS-Einbindung, um das Design für KI-Suche in Serviceportalzu überschreiben.

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 2 Minuten Lesedauer

    • Überschreiben Sie das Design für KI-Suche in Serviceportal, um es an das Branding Ihres Unternehmens anzupassen.

    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 mit zusätzlichen 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: Linienrahmen um Suchfilter entfernen.

    Suchfilter.

    Farbe fürTrefferhervorhebung: Ändern Sie die Farbe, in der der Suchtreffer für den gesuchten Text angezeigt wird.

    Hervorhebungen von Treffern.

    Prozedur

    1. Erstellen Sie einen Stylesheet-Datensatz.
      1. Geben Sie im Filternavigator sp_css.do ein.
      2. Füllen Sie die Felder des Formulars aus.
        Tabelle : 1. Formatvorlagenformular
        Feld Beschreibung
        Name Eindeutiger Name für Ihre Formatvorlage. Beispiel: sp_ais.css.
        CSS Skriptfeld für Ihr CSS-Skript. Geben Sie dieses Skript ein, und passen Sie dann 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 ein, um es wie gewünscht anzupassen.

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

        • Um die Farben der Trefferhervorhebung zu ändern, geben Sie die gewünschte RGB-Farbe in das Skript ein.

          sn-search-results-container, sn-search-combobox {
  --now-color_alert--warning-1: rgb(40,103,178) !important;
}
        Das Skript sollte einschließlich Ihrer Anpassungen wie folgt 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-Einbindungsdatensatz.
      1. Geben Sie im Filternavigator sp_css_include.do ein.
      2. Füllen Sie die Felder des Formulars aus.
        Tabelle : 2. Formular „CSS-Einbindungen“.
        Feld Beschreibung
        Name Eindeutiger Name für Ihren CSS-Einbindungsdatensatz.
        Quelle Quelle für Ihre CSS-Einbindung. Wählen Sie Formatvorlage aus.
        Stylesheet Das Stylesheet, das Sie in dieses CSS-Einbindungsformular integrieren möchten. Wählen Sie die Formatvorlage aus, die Sie in Schritt 1 erstellt haben.
        Anwendung Anwendung, für die dieser CSS-Einbindungsdatensatz gilt. Global bedeutet, dass die CSS-Einbindung für alle Anwendungen gilt.
        Verzögertes Laden

        Option zum asynchronen Laden der CSS-Einbindung, um die Ladezeit der Seite zu verbessern. Diese Option muss für alle CSS-Einbindungen eines Designs auf den gleichen Wert festgelegt werden. Es wird nicht empfohlen, das asynchrone Laden nur für einige CSS-Einbindungen zu aktivieren, die einem Design zugeordnet sind.

        Hinweis:
        Die Aktivierung von „ Verzögertes Laden“ wird für Portale mit Flash-Speichern von nicht formatiertem Inhalt nicht empfohlen.

        Die CSS-Einbindungen mit aktivierter Option „ Verzögertes Laden “ werden in der zugehörigen Liste „CSS-Einbindungen zum verzögerten Laden“ im Designdatensatz aufgeführt.
    3. Geben Sie Ihre CSS-Überschreibung in das Formatvorlageformular ein, und überschreiben Sie das auf Ihre Anwenderoberfläche 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 „Stylesheets“.
        Feld Beschreibung
        Bestellung Eine Ganzzahl, die die Einbindung dieses Stylesheets gegenüber anderen Stylesheets priorisiert. Je niedriger die Zahl, desto höher in der Liste. In der Regel werden diese Zahlen in Hunderte geändert, z. B. 100, 200, 300 und 400, damit Sie in Zukunft neue Symbole zwischen vorhandenen einfügen können.
        CSS beinhaltet CSS-Einbindung, die 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.
        Thema 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 in der Farbe der Trefferhervorhebung wird Ihre anwenderdefinierte Farbe angezeigt.
    Designgestaltung für die KI-Suche in SP-Überschreibungsergebnissen.