Konfigurieren Sie Logo, Farben und Systemstandards für Core-UI

Sie können die Basiskonfiguration verwenden Core-UI Modul zum Markieren Ihrer Instanz mit Ihrem Unternehmenslogo und Ihren Farben und zum Festlegen der grundlegenden Systemstandards. Dieser Ort ist der beste Ausgangspunkt, wenn Sie Ihre Instanz zum ersten Mal einrichten oder kürzlich aktiviert haben Core-UI.

Vorbereitungen

Sammeln Sie Folgendes:

• Rufen Sie das Unternehmensbanner-Bild ab, das im Header verwendet werden soll. Das Bild kann eine hohe Auflösung haben, wenn es jedoch angezeigt wird, wird es basierend auf dem Seitenverhältnis skaliert. Er wird auf eine maximale Höhe von 20 px skaliert.
• Rufen Sie die Hex- oder RGB-Nummern der Markenfarbe Ihres Unternehmens ab, normalerweise von Ihrer Marketingabteilung. Verwenden Sie sie, um zu entscheiden, wie die UI-Hintergrundfarben konfiguriert werden sollen.

Erforderliche Rolle: Administrator

Warum und wann dieser Vorgang ausgeführt wird

Jede Farbauswahloption bietet einen Farbwähler zur Auswahl einer Farbe. Im Textfeld neben der Farbauswahl können Sie den Wert der Farbe in einem der folgenden CSS-Formate eingeben:

• Name: Vordefinierte Farbnamen, z. B. rot, grün oder blau
• RGB-Dezimalzahl: RGB (102, 153, 204)
• RGB-Hex-Wert: #223344

Siehe HTML-Farbnamen (W3CSchools) Informationen zu HTML-Farbnamen.

Hinweis:

Diese Informationen gelten für Core-UI. Für Designinformationen für Next Experience, Siehe Arbeiten mit Designs in Next Experience.

Prozedur

1. Navigieren zu Alle > Systemeigenschaften > Basiskonfiguration UI16an.
2. Schließen Sie die Konfiguration ab, indem Sie eine der folgenden Einstellungen ändern:

   Tabelle : 1. Grundlegende Systemkonfigurationseigenschaften

   Bezeichnung	Eigenschaft	Beschreibung
   Seitenüberschrift	glide.product.description	Ändern Sie den Text, der neben Ihrem Logo angezeigt wird.
   Titel der Browserregisterkarte	glide.product.name	Ändern Sie den Text, der auf der Browserregisterkarte angezeigt wird.
   Systemzeitzone, Standard für Kalender und Anwender. <a class="web" href="http://en.wikipedia.org/wiki/List_of_zoneinfo_time_zones" target="_blank">Olson/zoneinfo-Zeitzonenwerte</a> sind zulässig. Beispiele:<pre>Afrika/JohannesburgAmerika/TorontoAmerika/Mexico_StadtAntarktika/VostokAsien/ShanghaiAsien/TokioAustralien/SydneyEuropa/BerlinEuropa/LondonUSA/PazifikUSA/MountainUSA/ZentralUSA/Eastern</pre>	glide.sys.default.tz	Wählen Sie die Zeitzone in der Liste aus. Wählen Sie Aus Konfigurieren Sie verfügbare Zeitzonen Um die Zeitzonen auszuwählen, aus denen Ihre Anwender in den Anwendereinstellungen auswählen können.
   Bannerbild für Core-UI	glide.product.image.light	Wählen Sie Aus + Neben dem Bild, und Laden Sie Ihr Logo hoch.
   Datumsformat Zeitformat - Verwenden Sie die gleichen 'format'-Zeichenfolgen wie die Klasse 'java.text.SimpleDateFormat', mit kleinen Ausnahmen.Die Formatzeichenfolge enthält folgende Abkürzungen:<pre>Feld | Langform | Kurzform-------------+--------------------+-----------------------Stunde (1-12) | HH (2 Stellen) | H (1 oder 2 Stellen)Stunde (0-23) | HH (2 Stellen) | H (1 oder 2 Stellen)Minute | mm (2 Stellen) | m (1 oder 2 Stellen)Sekunde | ss (2 Stellen) | s (1 oder 2 Stellen)AM/PM | a |</pre>	glide.sys.date_format glide.sys.time_format	Wählen Sie das Datums- und Uhrzeitformat aus den Auswahllisten aus.
   Header-Hintergrundfarbe	css.$navpage-header-bg	Wählen Sie die Farbe aus, oder geben Sie sie ein. Diese Farbe wird auch als Teil der Designvorschau auf der Registerkarte „Designs“ unter den Systemeinstellungen verwendet.
   Banner-Textfarbe:	css.$navpage-header-color	Wählen Sie die Farbe aus, oder geben Sie sie ein. Diese Farbe wird auch als Teil der Designvorschau auf der Registerkarte „Designs“ unter den Systemeinstellungen verwendet.
   Farbe des Header-Trennstreifens	css.$navpage-Header-Divider-color	Wählen Sie die Farbe aus, oder geben Sie sie ein.
   Navigations-Header/-Fußzeile	css.$navpage-nav-bg	Wählen Sie die Farbe aus, oder geben Sie sie ein.
   Erweiterte Elemente des Navigationshintergrunds	css.$subNAV-background-color	Wählen Sie die Farbe aus, oder geben Sie sie ein.
   Modultextfarbe für Core-UI Anwendungsnavigator	css.$navpage-nav-color-sub	Wählen Sie die Farbe aus, oder geben Sie sie ein.
   Hintergrundfarbe für ausgewählte Navigationsregisterkarte	css.$navpage-nav-ausgewählt-bg	Wählen Sie die Farbe aus, oder geben Sie sie ein.
   Balkenfarbe des Registerkartenteilers der ausgewählten Navigation	css.$NAV-Highlight-bar-Active	Diese Farbe wird auch als Teil der Designvorschau auf der Registerkarte „Designs“ unter den Systemeinstellungen verwendet.
   Balkenfarbe des Registerkartenteilers der nicht ausgewählten Navigation	css.$NAV-Highlight-bar-inactive
   Farbe von Navigationstrennzeichen	css.$nav-hr-color	Wählen Sie die Farbe aus, oder geben Sie sie ein.
   Hintergrund für Navigator und Sidebars	css.$navpage-nav-bg-sub	Wählen Sie die Farbe aus, oder geben Sie sie ein.
   Derzeit ausgewählte Symbolfarbe der Navigationsregisterkarte für Core-UI	css.$navpage-nav-selected-color	Wählen Sie die Farbe aus, oder geben Sie sie ein.
   Nicht ausgewähltes Symbol auf der Navigationsregisterkarte und die bevorzugte Symbolfarbe	css.$navpage-NAV-unselected-color	Wählen Sie die Farbe aus, oder geben Sie sie ein.
   Rahmenfarbe für Core-UI	css.$navpage-nav-border	Wählen Sie die Farbe aus, oder geben Sie sie ein. Wirkt sich auch auf den Rahmen von aus Filtern Sie Konversationen Suchfeld in der Connect-Chat-Sidebar.
   Ausgewähltes Basisthema	glide.ui.base_theme.selected_theme	Wechselt den Hauptinhalt (alles außer Anwendungsnavigator und Header) zwischen den Designs „La Jolla“ und „Cobalt“.

   Bei den meisten Einstellungen wird die Seite mit einer Vorschau der Änderung aktualisiert, wenn Sie Änderungen vornehmen. Nur diese Änderungen werden angezeigt. Einige Einstellungen erfordern, dass Sie sich abmelden und erneut anmelden, um die Änderung anzuzeigen.
3. Wählen Sie Aus Speichern Oben oder unten auf der Seite.

Ergebnisse

Nachdem Sie die Konfigurationsänderungen gespeichert haben, alle Anwender, die die ausgewählt haben System Design in den UI-Personalisierungsoptionen werden die neuen Konfigurationsfarben angezeigt.

Vergleich von La-Jolla- und Kobaltthemen

Das La Jolla-Design ist das neue Markendesign für ServiceNow. Wenn Sie ein Upgrade auf durchführen Madrid, Ihr Design wird automatisch auf das La Jolla-Design aktualisiert. Alle Anpassungen, die Sie am Systemdesign vorgenommen haben, werden nicht aktualisiert. Verwenden Sie die Stile in der folgenden Liste, um Stile auf das neue oder alte Design zu aktualisieren oder auf diese zurückzusetzen.

Nehmen Sie Änderungen an einem dieser Stile vor, indem Sie zu navigieren Systemeigenschaften > Basiskonfiguration UI16an.

Tabelle : 2. Designstile „La Jolla“ und „Cobalt“

Eigenschaft	La Jolla-Stil	Kobalt-Stil
Header-Hintergrundfarbe css.$navpage-header-bg	#Ffffff	#303a46
Farbe des Header-Trennstreifens css.$navpage-Header-Divider-color	#5a7f71	#455464
Navigations-Header/-Fußzeile css.$navpage-nav-bg	#293e40	#303A46
Erweiterte Elemente des Navigationshintergrunds css.$subNAV-background-color	#213234	#303a46
Modultextfarbe für UI16 css.$navpage-nav-color-sub	#Bec1c6	#Bec1c6
Hintergrundfarbe für ausgewählte Navigationsregisterkarte css.$navpage-nav-ausgewählt-bg	#2f4fe	#4b545f
Balkenfarbe des Registerkartenteilers der ausgewählten Navigation css.$NAV-Highlight-bar-Active	#82c9b8	Nr. 278 efc
Balkenfarbe des Registerkartenteilers der nicht ausgewählten Navigation css.$NAV-Highlight-bar-inactive	Nr. 213234	#81878e
Farbe von Navigationstrennzeichen css.$nav-hr-color	#293e40	#303a46
Hintergrund für Navigator und Sidebars css.$navpage-nav-bg-sub	#293e40	Nr. 455464
Farbe für aktuell ausgewähltes Symbol auf Navigationsregisterkarte für UI16 css.$navpage-nav-selected-color	#82c9b8	#Ffffff
Nicht ausgewähltes Symbol auf der Navigationsregisterkarte und die bevorzugte Symbolfarbe css.$navpage-NAV-unselected-color	#Bec1c6	#Bec1c6
Rahmenfarbe für UI16 css.$navpage-nav-border	#7a828a	#Ddd
Ausgewähltes Basisdesign glide.ui.base_theme.selected_theme	La Jolla-SysID: C92c1ee153002300dda1ddeeff7b125b	Cobalt-SysID: 6f3c9ae153002300dda1ddeeff7b124a