Erstellen Sie eine CSS-Inclusion, für die das Design überschrieben werden soll KI-SucheIn Serviceportal

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 2 Minuten Lesedauer

    • Design für überschreiben KI-SucheIn ServiceportalUm 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 Stilfunktionen von KI-SucheIn Serviceportal, Dieses Verfahren entfernt die Rahmen um den Suchergebniscontainer und die Suchfilter und ändert die Hervorhebungsfarbe für Treffer. Sie können mehrere andere Funktionen mit zusätzlichen CSS-Variablen formatieren. Weitere Informationen zu diesen Variablen finden Sie unter Design für KI-SucheIn Serviceportal.

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

    Suchergebniscontainer.

    Suchfilter : Entfernt den Linienrahmen um Suchfilter.

    Suchfilter.

    Farbe für Hit-Hervorhebung : Ändern Sie die Farbe, die den Suchtreffer für den gesuchten Text anzeigt.

    Treffen Sie Highlights.

    Prozedur

    1. Erstellen Sie einen Stylesheet-Datensatz.
      1. Eingabetaste sp_css.do Im Filternavigator.
      2. Füllen Sie im Formular die Felder aus.
        Tabelle : 1. Stylesheet-Formular
        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 dann die Variablen an.

        • Um den Rahmen für den Suchergebniscontainer zu entfernen, fügen Sie dieses Skript ein, und passen Sie es nach Bedarf 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 so aussehen, wenn Sie fertig sind, einschließlich Ihrer Anpassungen.
        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. Eingabetaste sp_css_include.do Im Filternavigator.
      2. Füllen Sie im Formular die Felder aus.
        Tabelle : 2. CSS-Einbindungsformular
        Feld Beschreibung
        Name Eindeutiger Name für Ihren CSS-Einbindungsdatensatz.
        Quelle Quelle für Ihre CSS-Einbindung. Wählen Sie Aus Stylesheet .
        Stylesheet Das Stylesheet, das Sie in dieses CSS-Einbindungsformular integrieren möchten. Wählen Sie das Stylesheet aus, das Sie in Schritt 1 erstellt haben.
        Anwendung Anwendung, für die dieser CSS-Einbindungsdatensatz gilt. Global bedeutet, dass die CSS-Include für alle Anwendungen gilt.
        Verzögertes Laden

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

        Hinweis:
        Wird Aktiviert Verzögertes Laden Wird nicht für Portale empfohlen, bei denen nicht formatierte Inhalte blinken.

        Die CSS enthält mit Verzögertes Laden Aktiviert sind in aufgeführt Verzögertes Laden von CSS-Einbindungen Zugehörige Liste im Designdatensatz.
    3. Geben Sie Ihre CSS-Überschreibung in das Stylesheet-Formular ein, und überschreiben Sie das Design, das auf Ihre Anwenderoberfläche angewendet wird.
      1. Eingabetaste m2m_sp_theme_css_include Im Filternavigator.
      2. Füllen Sie im Formular die Felder aus.
        Tabelle : 3. Formular „Stylesheets“
        Feld Beschreibung
        Bestellung Eine Ganzzahl, die die Integration dieses Stylesheets gegenüber anderen Stylesheets priorisiert. Je niedriger die Zahl, desto höher in der Liste. Die typische Praxis besteht darin, diese Zahlen zu Hunderten zu machen, z. B. 100, 200, 300, und 400, damit Sie in Zukunft neue Symbole zwischen vorhandenen platzieren können.
        CSS einbezogen CSS-Include, die die Überschreibungen enthält, die Sie in den vorherigen Schritten erstellt haben.
        Anwendung Anwendung, für die dieses Stylesheet gilt. Global bedeutet, dass das Stylesheet für alle Anwendungen gilt.
        Design Design, das auf Ihre Anwenderoberfläche 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 Farbe für die Hervorhebung von Treffer zeigt Ihre anwenderdefinierte Farbe an.
    Design für KI-Suche in SP-Überschreibungsergebnissen.