Anpassen der Farben von ServiceNowKomponenten in AEM

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

    • Sie können das Erscheinungsbild von definieren ServiceNowKomponenten in Adobe Experience Manager (AEM) durch Angabe von Farben für sie.

    Als AEM-Administrator können Sie entweder die für alle Komponenten vorkonfigurierten Farbvariablen ändern oder verwenden InitializeCSS Funktion zum Anpassen der Farben einer bestimmten Komponente mithilfe einer anwenderdefinierten CSS-Klasse. Sie geben die anwenderdefinierte CSS-Klasse für eine Komponente in an Anwenderdefinierte CSS-Klasse Eigenschaft. Weitere Informationen finden Sie unter Anzeigen ServiceNowWissensartikel auf einer Adobe Experience Manager-Seite und Anzeigen ServiceNowFälle auf einer Adobe Experience Manager-Seite.

    Hinweis:
    Standardmäßig ist ServiceNowKomponenten werden mit den CSS-Stilen Bootstrap v4.4.1 konfiguriert. Wenn Ihre AEM-Seite eine andere Bootstrap-Version verwendet, wird ServiceNowKomponentenstil wird vom Seitenstil überschrieben.

    Ändern Sie das Farbdesign für alle ServiceNowKomponenten in AEM

    Legen Sie das Farbdesign für fest ServiceNowKomponenten in Adobe Experience Manager (AEM) gleichzeitig durch Konfiguration der Farbvariablen.

    Vorbereitungen

    Erforderliche Rolle: AEM-Administrator

    Warum und wann dieser Vorgang ausgeführt wird

    Hinweis:
    Standardmäßig ist ServiceNowKomponenten werden mit den CSS-Stilen Bootstrap v4.4.1 konfiguriert. Wenn Ihre AEM-Seite eine andere Bootstrap-Version verwendet, wird ServiceNowKomponentenstil wird vom Seitenstil überschrieben.

    Prozedur

    1. Öffnen Sie CRXDE Lite in Ihrem Browser .
      Geben Sie beispielsweise in Ihrem Browser die URL im Format ein http://<AEM_hostname>:<AEM_port>/crx/de . Die Standard-URL für CRXDE Lite ist http://localhost:4502/crx/de .
    2. Navigieren zu apps > servicenow-Komponenten > Clientlibs > Clientlib-commonan.
    3. Öffnen Sie Variablen.less Datei.
    4. Konfigurieren Sie die Farbvariablen, die für die HTML-Elemente in verfügbar sind ServiceNowKomponenten.
      Tabelle : 1. Farbvariableneinstellungen
      Farbeinstellung Variable
      Textinhalt @Text-color
      Hyperlinks @Link-color
      Sicherheitsausweise @Badge-Text-color
      Abzeichenhintergrund @Badge-background-color
      Primäre Farbe für visuelle Betonung @Primary-color
      Farbe, die die Primärfarbe ergänzt, um die visuelle Betonung zu erhöhen @Sekundär-Farbe
      Komponententitel @Title-color
      Text der primären Schaltfläche @Primary-btn-Text-color
      Hintergrund der primären Schaltfläche @Primary-btn-bkg-color
      Text der sekundären Schaltfläche @Sekundär-btn-Text-color
      Hintergrund der sekundären Schaltfläche @Sekundär-btn-bkg-color
      Hinweis:
      Sie geben eine Farbe für eine Variable auf eine der folgenden Arten an:
      • Farbname

        Beispiel: Rot

      • HEX-Wert

        Beispiel: #FF0000

      • RGB-Wert

        Beispiel: rgb(255,0,0)

      • VAR Funktion

        Verwenden Sie die VAR-Funktion, um eine anwenderdefinierte Eigenschaft für eine Farbe anzugeben. Beispiel: VAR(--grau-dunkel) .

    5. Klicken Sie im CRXDE Lite-Menü auf Alle Speichern Zum Speichern der Änderungen auf dem AEM-Server.

    Ändern Sie das Farbdesign für ServiceNowKomponente in AEM

    Überschreiben Sie das Farbdesign für ServiceNowKomponente in Adobe Experience Manager (AEM) mithilfe von Initialisieren Funktion.

    Vorbereitungen

    Erforderliche Rolle: AEM-Administrator

    Warum und wann dieser Vorgang ausgeführt wird

    Die Farbvariablen, die Sie in angeben Variablen.less Datei werden auf alle angewendet ServiceNowKomponenten in AEM. Sie können die Standardfarben für eine bestimmte Komponente überschreiben, indem Sie die Farbvariablen für die Komponente in festlegen InitializeCSS Funktion.
    Hinweis:
    Standardmäßig ist ServiceNowKomponenten werden mit den CSS-Stilen Bootstrap v4.4.1 konfiguriert. Wenn Ihre AEM-Seite eine andere Bootstrap-Version verwendet, wird ServiceNowKomponentenstil wird vom Seitenstil überschrieben.

    Prozedur

    1. Öffnen Sie CRXDE Lite in Ihrem Browser .
      Geben Sie beispielsweise in Ihrem Browser die URL im Format ein http://<AEM_hostname>:<AEM_port>/crx/de . Die Standard-URL für CRXDE Lite ist http://localhost:4502/crx/de .
    2. Navigieren zu apps > servicenow-Komponenten > Clientlibs > Clientlib-commonan.
    3. Öffnen Sie Variablen.less Datei.
    4. Geben Sie an InitializeCSS Funktion für eine Komponente im Format <component_type>;<class_name>;<color_variable_1>;<color_variable_2>;<color_variable_n> .
      • Component_type: Der Typ der Komponente, auf die Sie das anwenderdefinierte Farbdesign anwenden möchten, z. B. Artikelliste, ArtikleView, Casecards, und so weiter.
      • Class_Name: Die anwenderdefinierte CSS-Klasse, die Sie in eingeben Anwenderdefinierte CSS-Klasse Eigenschaft Ihrer Komponente.
      • Color_variable_1, color_variable_2, color_variable_n: Die Farbvariablen, die Sie für die HTML-Elemente in einer Komponente angeben. Weitere Informationen finden Sie unter Farbvariableneinstellungen Tabelle.

      Verwenden Sie den folgenden Beispielcode als Referenz für die Farbstile auf Komponentenebene.

      .initialize(@componentType:articlelist;@className:now-article-list;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
.initialize(@componentType:articleview; @className:now-article-view;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@secondary-color:indigo;);
.initialize(@componentType:casecards; @className:now-case-cards; @text-color:red;@link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
.initialize(@componentType:caselist; @className:now-case-list; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;);
.initialize(@componentType:searchbox; @className:now-search-box; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;);
.initialize(@componentType:searchresults;@className:now-search-results;@text-color:gray; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
.initialize(@componentType:caseview;@className:now-case-view;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;);
.initialize(@componentType:createcase;@className:now-create-case;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;)
    5. Klicken Sie im CRXDE Lite-Menü auf Alle Speichern Zum Speichern der Änderungen auf dem AEM-Server.