--- sourceDocument: Now Platform-Anwenderoberfläche von Xanadu sourceDocumentLink: https://www.servicenow.com/docs/r/de-DE/xanadu/platform-user-interface Release : - xanadu ft:locale : - de-DE ft:publication_title : - Now Platform-Anwenderoberfläche von Xanadu ft:clusterId : - platux bundleId : - platux workflow : - Platform --- # Anpassen der Instanzdarstellung # Anpassen der Instanzdarstellung {#ariaid-title1} * Freigeben Version: Xanadu * * Aktualisiert 1. August 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 Minuten Lesedauer Ein Administrator kann globale CSS- oder Systemeigenschaften ändern, um das Erscheinungsbild der Standardinstanzschnittstelle zu ändern. Die Funktionalität ist nicht betroffen. Beispielsweise verwenden Unternehmen häufig mehrere Instanzen, um Entwicklungs-, Test- und Produktionsaktivitäten zu trennen. Um zu verhindern, dass Benutzer versehentlich die falsche Instanz ändern, können Administratoren jede mit einem visuell unterschiedlichen Design konfigurieren. Zum Definieren eines Instanzthemas stehen verschiedene Ansätze zur Verfügung. ## CSS-Eigenschaften {#customizing-instance-appearance__section_ag1_qz2_p1b} Navigieren zu SystemeigenschaftenCSSan. Die folgenden Eigenschaften sind über CSS-Eigenschaften verfügbar. Hinweis: Farben werden mit vordefinierten [Farbnamen](https://www.w3schools.com/css/css_colors.asp), RGB-Dezimalzahlen oder RGB-Hexadezimalzahlen angegeben. * Banner-Textfarbe: * Hintergrundfarbe für Banner und Listenbeschriftungen * In Formularen und Listen verwendete Schriftart (dies ist eine globale Schriftarteinstellung) * Schaltflächenstile (Hintergrundfarbe, Rahmenfarbe, Rahmenbreite, Textfarbe) * Farben für Feldstatusindikatoren (einschließlich der Indikatoren für „Geändert", „Obligatorisch ausgefüllt", „Obligatorisch nicht ausgefüllt" und „Schreibgeschützt") * Vertikale Ausrichtung von Listenzellen * Stile des Navigatormenüs (Schriftartgröße, Hintergrundfarbe, Textfarbe) * Name und Größe der Headerschriftart * Farbe von Listen- und Formularbeschriftungen überschreiben * Hintergrundfarbe für globale Textsuche (für Katalogergebnisse und Knowledge Base-Ergebnisse) {#customizing-instance-appearance__ul_yxr_f3k_2p} ## UI-Eigenschaften {#customizing-instance-appearance__section_b45_d2f_p1b} Navigieren zu SystemeigenschaftenUI-Eigenschaftenan. Die folgenden Eigenschaften sind über UI-Eigenschaften verfügbar. * Im Aktivitätsformatierer verwendete Symbole * Hintergrundfarben für „Zusätzliche Anmerkungen" und „Arbeitsnotizen". * Schaltflächenplatzierung auf Formularen * Im Aufgabenaktivitätsformatierer verwendete Symbole * Hintergrundfarben für „Zusätzliche Kommentare zum Incident" und „Arbeitsnotizen". {#customizing-instance-appearance__ul_chy_f2f_p1b} ## Unterstützung für CSS-Klassen {#customizing-instance-appearance__section_nzg_l2f_p1b} In Core-UI (UI16) ändern sich die CSS-Eigenschaften und ihre Auswirkungen auf die Plattform-UI je nach Release. {#customizing-instance-appearance__table_xxt_5bk_11b__entry__4} | CSS-Klasse | Beschreibung | Konfiguration | Betroffener Bereich | |-|-|-|-| | $navpage-header-bg | Header-Hintergrundfarbe | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Header-Hintergrundfarbe | ![Headerhintergrund]() | | $navpage-header-color | Farbe für Headertext und Symbol für globale Suche | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Banner-Textfarbe: | ![Banner-Textfarbe]() | | $navpage-header-button-color | Farbe für den Text des Namens des angemeldeten Anwenders und die Symbole für die globale Suche Connect, Hilfe und Einstellungen | Fügen Sie dem CSS-Feld eines Designs die CSS-Eigenschaft hinzu. Weitere Informationen finden Sie unter [Erstellen oder passen Sie ein Design an](https://www.servicenow.com/docs/rO_3S0JFvjagNrwL3aKk5w "Sie können Designs erstellen oder vorhandene Designs anpassen."). | ![Header mit hervorgehobenen Symbolen für Anwendername und Connect, Hilfe und Einstellungen]() | | $navpage-header-divider-color | Farbe des Header-Teilers | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Farbe des Header-Trennstreifens | ![Header-Teilungs-Striper]() | | $navpage-button-color | Farbe für die folgenden Symbole in den Sidebars * Erweitern/reduzieren * Konversation erstellen (in der Sidebar Connect ) * Öffnen Sie den Arbeitsbereich Connect . {#customizing-instance-appearance__ul_tt4_ckt_b1b} | Fügen Sie dem CSS-Feld eines Designs die CSS-Eigenschaft hinzu. Weitere Informationen finden Sie unter [Erstellen oder passen Sie ein Design an](https://www.servicenow.com/docs/rO_3S0JFvjagNrwL3aKk5w "Sie können Designs erstellen oder vorhandene Designs anpassen."). | ![Connect Sidebar mit Pfeil, der auf das Plus-Symbol zeigt]() | | $navpage-button-color-hover | Farbe für die folgenden Symbole, wenn ein Benutzer auf das Steuerelement zeigt: * Globale Suche * Hilfe * Einstellungen * Klartextsymbol im Navigationsfilter {#customizing-instance-appearance__ul_dh2_lkt_b1b} | Fügen Sie dem CSS-Feld eines Designs die CSS-Eigenschaft hinzu. Weitere Informationen finden Sie unter [Erstellen oder passen Sie ein Design an](https://www.servicenow.com/docs/rO_3S0JFvjagNrwL3aKk5w "Sie können Designs erstellen oder vorhandene Designs anpassen."). | ![Zeigen Sie auf das Hilfesymbol, um anzuzeigen, dass es blau ist, wenn ein Benutzer darauf zeigt]() ![Zeigen Sie die Option Zeigen auf Löschen im Anwendungsnavigator an, um anzuzeigen, dass sie auch Blau auf Zeigen auf ist]() | | $search-text-color | Farbe des Suchtexts, sowohl im Navigationsfilter als auch in den Feldern der globalen Suche | Fügen Sie dem CSS-Feld eines Designs die CSS-Eigenschaft hinzu. Weitere Informationen finden Sie unter [Erstellen oder passen Sie ein Design an](https://www.servicenow.com/docs/rO_3S0JFvjagNrwL3aKk5w "Sie können Designs erstellen oder vorhandene Designs anpassen."). | ![Suchen Sie im Anwendungsnavigator unter „Incident“ in weiß]() | | $navpage-nav-frame | Rahmenfarbe für den Navigationsfilter und den Konversationsfilter | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Rahmenfarbe für UI16 | ![Filternavigator]() | | $nav-highlight-main | Hebt das Modul hervor, nachdem der Anwender darauf geklickt hat. Im Arbeitsbereich Connect hebt die ausgewählte Konversation hervor. | Fügen Sie dem CSS-Feld eines Designs die CSS-Eigenschaft hinzu. Weitere Informationen finden Sie unter [Erstellen oder passen Sie ein Design an](https://www.servicenow.com/docs/rO_3S0JFvjagNrwL3aKk5w "Sie können Designs erstellen oder vorhandene Designs anpassen."). | ![Ausgewählte Konversation im Arbeitsbereich Connect mit der richtigen Farbe]() | | $subnav-background-color | Hintergrund für erweiterte Navigationselemente | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Erweiterte Elemente des Navigationshintergrunds | ![Anwendung mit erweiterten Modulen zur Anzeige des Farbunterschieds]() | | $navpage-nav-bg | Kopf- und Fußzeile für Navigator und Seitenleisten. | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Navigations-Header/-Fußzeile | ![Navigation]() | | $navpage-nav-bg-sub | Hintergrund für Navigator und Sidebars | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Hintergrund für Navigatoren und Seitenleisten | | | $navpage-nav-color-sub | Textfarbe für Module in der Hauptnavigation | Fügen Sie dem CSS-Feld eines Designs die CSS-Eigenschaft hinzu. Weitere Informationen finden Sie unter [Erstellen oder passen Sie ein Design an](https://www.servicenow.com/docs/rO_3S0JFvjagNrwL3aKk5w "Sie können Designs erstellen oder vorhandene Designs anpassen."). | | | $navpage-nav-mod-text-hover | Textfarbe, wenn der Mauszeiger über Elemente in der Hauptnavigation bewegt wird | Nicht unterstützt | Nicht unterstützt | | $nav-hr-color | Farbe des Navigators | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Farbe von Navigationstrennzeichen | ![Trennzeichen]() | | $nav-highlight-bar-active | Zeile unter der aktiven Registerkarte im Anwendungsnavigator. Diese Farbe wird auch als Teil der Designvorschau auf der Registerkarte „Designs" in den Systemeinstellungen verwendet. | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Balkenfarbe des Registerkartenteilers der ausgewählten Navigation | ![Anwendungsnavigator mit ausgewählter Registerkarte „Alle Anwendungen“ und einem Pfeil, der anzeigt, dass die Zeile unter der Registerkarte blau ist]() | | $nav-highlight-bar-inactive | Zeile unter den inaktiven Registerkarten im Anwendungsnavigator | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Balkenfarbe des Registerkartenteilers der nicht ausgewählten Navigation | ![Anwendungsnavigator mit ausgewählter Registerkarte „Alle Anwendungen“ und einem Pfeil, der auf die anderen Registerkarten zeigt, um anzuzeigen, dass die Zeile eine andere Farbe hat]() | | $navpage-nav-selected-bg | Hintergrundfarbe für ausgewählte Navigationsregisterkarte | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Hintergrundfarbe für ausgewählte Navigationsregisterkarte | ![Ausgewählte Registerkarte]() | | $navpage-nav-selected-color | Farbe für Symbol auf aktuell ausgewählter Navigationsregisterkarte | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Farbe der aktuell ausgewählten Navigationsregisterkarte für UI16 | ![Navigationssymbol]() | | $navpage-nav-unselected-color | Nicht ausgewähltes Symbol auf der Navigationsregisterkarte und die bevorzugte Symbolfarbe | Navigieren zu SystemeigenschaftenBasiskonfiguration UI16Nicht ausgewähltes Symbol auf der Navigationsregisterkarte und die bevorzugte Symbolfarbe | ![Bevorzugte Symbolfarbe]() | | $connect-latest-message | Farbe der aktuell ausgewählten Nachricht in Connect | Fügen Sie dem CSS-Feld eines Designs die CSS-Eigenschaft hinzu. Weitere Informationen finden Sie unter [Erstellen oder passen Sie ein Design an](https://www.servicenow.com/docs/rO_3S0JFvjagNrwL3aKk5w "Sie können Designs erstellen oder vorhandene Designs anpassen."). | | | $nav-timeago-header-color | Headerhintergründe des Zeitstempels auf der Registerkarte „Verlauf". | Nicht unterstützt | Nicht unterstützt | | $navpage-nav-app-text | Textfarbe des Core-Inhalts für Elemente wie Anwendungen und den leeren Statustext für die Sidebar Connect. | Fügen Sie dem CSS-Feld eines Designs die CSS-Eigenschaft hinzu. Weitere Informationen finden Sie unter [Erstellen oder passen Sie ein Design an](https://www.servicenow.com/docs/rO_3S0JFvjagNrwL3aKk5w "Sie können Designs erstellen oder vorhandene Designs anpassen."). | | | $navpage-nav-app-text-hover | Textfarbe für ein ausgewähltes Modul | Fügen Sie dem CSS-Feld eines Designs die CSS-Eigenschaft hinzu. Weitere Informationen finden Sie unter [Erstellen oder passen Sie ein Design an](https://www.servicenow.com/docs/rO_3S0JFvjagNrwL3aKk5w "Sie können Designs erstellen oder vorhandene Designs anpassen."). | | [Tabelle : 1. CSS-Klassen-Unterstützung für Xanadu] {#customizing-instance-appearance__table_xxt_5bk_11b} * **[Konfigurieren Sie Logos, Farben und Systemstandards für Core-UI](https://www.servicenow.com/docs/NZTmc76Lo~apLRlO5vnbdQ#t_ConfigureLogoColorsSysDfltsUI16)** Sie können das Modul Basiskonfiguration Core-UI verwenden, um Ihre Instanz mit Ihrem Firmenlogo und Farben zu versehen und grundlegende Systemstandardeinstellungen festzulegen. Diese Stelle ist der beste Ausgangspunkt, wenn Sie Ihre Instanz zum ersten Mal einrichten oder wenn Sie kürzlich Core-UIaktiviert haben. * **[Wählen Sie ein Design in der Core-UI aus](https://www.servicenow.com/docs/ZwMGk9f59H~IhrC~G18liA)** Sie können zwischen verschiedenen Themen für die Anwenderoberfläche wechseln. * **[Menükategorien anpassen](https://www.servicenow.com/docs/MTUCh0DkAZ88hfXYiMNHBA)** Verwenden Sie Menükategorien, um CSS-Stile auf Anwendungsbezeichnungen anzuwenden. * **[Ändern Sie die Headerfarben der Umfragefrage](https://www.servicenow.com/docs/CWHTdiuE0sBwcVplEZtZ5g)** Die klassische Umgebung verwendet eine Headerfarbe aus der Basisfarbe, die Designerstellung von CSS-Eigenschaften ermöglicht. * **[Unterstützung für CSS-Designs](https://www.servicenow.com/docs/7p6pk7Ap5GOE1yE84uwFkg)** Designs verleihen der Anwenderoberfläche ein bestimmtes Erscheinungsbild, indem sie verschiedene Farbkombinationen verwenden.