--- sourceDocument: Xanadu: Customer Service Management sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/xanadu/customer-service-management Release : - xanadu ft:locale : - de-DE ft:publication_title : - Xanadu: Customer Service Management ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # Farben von ServiceNow-Komponenten in AEM anpassen # Farben von ServiceNow-Komponenten in AEM anpassen {#ariaid-title1} * Freigeben Version: Xanadu * * Aktualisiert 1. August 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 Minuten Lesedauer Sie können das Erscheinungsbild der ServiceNow-Komponenten in Adobe Experience Manager (AEM) definieren, indem Sie Farben für sie festlegen. Als AEM-Administrator können Sie entweder die für alle Komponenten vorkonfigurierten Farbvariablen ändern oder die Funktion initializeCSS zum Anpassen der Farben einer bestimmten Komponente mithilfe einer benutzerdefinierten CSS-Klasse verwenden. Sie geben die benutzerdefinierte CSS-Klasse für eine Komponente in der Eigenschaft Benutzerdefinierte CSS-Klasse an. Weitere Informationen finden Sie unter [ServiceNow-Wissensartikel auf einer Adobe Experience Manager-Seite anzeigen](https://servicenow-prod.fluidtopics.net/c03zu36XnGj28nKxeRKhfQ "Verwenden Sie Wissenskomponenten, die in Adobe Experience Manager (AEM) verfügbar sind, um über die ServiceNow-Instanz auf Knowledge Bases zuzugreifen und zugehörige Wissensartikel auf einer AEM-basierten Website anzuzeigen.") und [ServiceNow-Fälle auf einer Adobe Experience Manager-Seite anzeigen](https://servicenow-prod.fluidtopics.net/cIxaOG~eJhRD6_2~0p0zNQ "Verwenden Sie Fallkomponenten, die in Adobe Experience Manager (AEM) verfügbar sind, um über die ServiceNow-Instanz auf Kundenservicefälle zuzugreifen und sie auf einer AEM-basierten Website anzuzeigen."). Hinweis: Standardmäßig werden die ServiceNow-Komponenten mit den Bootstrap v4.4.1 CSS-Styles konfiguriert. Wenn Ihre AEM-Seite eine andere Bootstrap-Version verwendet, wird der Style der ServiceNow-Komponenten vom Seiten-Style überschrieben. ## Farbschema für alle ServiceNow-Komponenten in AEM ändern {#ariaid-title2} Legen Sie das Farbschema für alle ServiceNow-Komponenten in Adobe Experience Manager (AEM) gleichzeitig fest, indem Sie die Farbvariablen konfigurieren. ### Vorbereitungen Erforderliche Rolle: AEM-Administrator ### Warum und wann dieser Vorgang ausgeführt wird Hinweis: Standardmäßig werden die ServiceNow-Komponenten mit den Bootstrap v4.4.1 CSS-Styles konfiguriert. Wenn Ihre AEM-Seite eine andere Bootstrap-Version verwendet, wird der Style der ServiceNow-Komponenten vom Seiten-Style überschrieben. ### Prozedur 1. [Öffnen Sie CRXDE Lite in Ihrem Browser](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html). Geben Sie beispielsweise in Ihrem Browser die URL im Format http://\:\/crx/de ein. Die Standard-URL für CRXDE Lite ist http://localhost:4502/crx/de. 2. Navigieren zu Appsservicenow-componentsClientbibliothekenclientlib-common. 3. Öffnen Sie die Datei variable.less. 4. Konfigurieren Sie die verfügbaren Farbvariablen für die HTML-Elemente in den ServiceNow-Komponenten. {#aem-modify-color-all-comp__table_vhh_gjm_2mb__entry__2} | Farbeinstellung | Variable | |-|-| | Textinhalt | @text-color | | Hyperlinks | @link-color | | Abzeichen | @badge-text-color | | Hintergrundfarbe der Abzeichen | @badge-background-color | | Primärfarbe zur visuellen Hervorhebung | @primary-color | | Komplementärfarbe der Primärfarbe zur visuellen Hervorhebung | @secondary-color | | 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 | @secondary-btn-text-color | | Hintergrund der sekundären Schaltfläche | @secondary-btn-bkg-color | [Tabelle : 1. Einstellungen für Farbvariablen] {#aem-modify-color-all-comp__table_vhh_gjm_2mb} Hinweis: Die Farbe für eine Variable geben Sie auf eine der folgenden Arten an: * FarbnameBeispiel: Rot * HEX-Wert Beispiel: #FF0000 * RGB-Wert Beispiel: rgb(255,0,0) * var-Funktion Verwenden Sie die var-Funktion, um eine benutzerdefinierte Eigenschaft für eine Farbe anzugeben. Beispiel: var(--gray-dark). {#aem-modify-color-all-comp__ul_u1g_slm_2mb} 5. Klicken Sie im Menü „CRXDE Lite" auf Alle speichern, um die Änderungen auf dem AEM-Server zu speichern. ## Ändern Sie das Farbschema für eine ServiceNow-Komponente in AEM {#ariaid-title3} Überschreiben Sie das Farbschema für eine ServiceNow-Komponente in Adobe Experience Manager (AEM) mithilfe der Funktion initialize. ### Vorbereitungen Erforderliche Rolle: AEM-Administrator ### Warum und wann dieser Vorgang ausgeführt wird Die Farbvariablen, die Sie in der Datei variables.less angeben, werden auf alle ServiceNow-Komponenten in AEM angewendet. Sie können die Standardfarben für eine bestimmte Komponente überschreiben, indem Sie die Farbvariablen für die Komponente in der Funktion initializeCSS festlegen. Hinweis: Standardmäßig werden die ServiceNow-Komponenten mit den Bootstrap v4.4.1 CSS-Styles konfiguriert. Wenn Ihre AEM-Seite eine andere Bootstrap-Version verwendet, wird der Style der ServiceNow-Komponenten vom Seiten-Style überschrieben. ### Prozedur 1. [Öffnen Sie CRXDE Lite in Ihrem Browser](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html). Geben Sie beispielsweise in Ihrem Browser die URL im Format http://\:\/crx/de ein. Die Standard-URL für CRXDE Lite ist http://localhost:4502/crx/de. 2. Navigieren zu Appsservicenow-componentsClientbibliothekenclientlib-common. 3. Öffnen Sie die Datei variable.less. 4. Geben Sie die Funktion initializeCSS für eine Komponente im Format <component_type>;<class_name>;<color_variable_1>;<color_variable_2>;<color_variable_n> an. * component_type: Der Typ der Komponente, auf die Sie das benutzerdefinierte Farbschema anwenden möchten, z. B. articlelist, articleview, casecards usw. * class_name: Die benutzerdefinierte CSS-Klasse, die Sie in der Eigenschaft Benutzerdefinierte CSS-Klasse Ihrer Komponente eingeben. * 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 in der Tabelle für die [Farbvariableneinstellungen](https://servicenow-prod.fluidtopics.net/5mx7Z57xwW_5rkcfHYFphw#aem-modify-color-all-comp__table_vhh_gjm_2mb). {#aem-modify-color-comp__ul_dyk_py4_2mb} Verwenden Sie den folgenden Beispielcode als Referenz für Farb-Styles auf der 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 Menü „CRXDE Lite" auf Alle speichern, um die Änderungen auf dem AEM-Server zu speichern.