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

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.

Vorbereitungen

Sammeln Sie Folgendes:

• Rufen Sie das Unternehmensbannerbild ab, das im Header verwendet werden soll. Das Bild kann eine hohe Auflösung haben, aber wenn es angezeigt wird, wird es basierend auf dem Seitenverhältnis skaliert. Sie wird auf eine maximale Höhe von 20 px skaliert.
• Die Hex- oder RGB-Werte für die Markenfarbe Ihres Unternehmens anfordern, in der Regel von Ihrer Marketingabteilung. Verwenden Sie sie, um zu entscheiden, wie die UI-Hintergrundfarben konfiguriert werden.

Erforderliche Rolle: admin

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 wie Rot, Grün oder Blau
• RGB dezimal: RGB (102, 153, 204)
• RGB-Hex-Wert: #223344

Informationen zu HTML-Farbnamen finden Sie unter HTML- Farbnamen (W3CSchulen).

Hinweis:

Diese Informationen gelten für Core-UI. Informationen zu Designs für Next Experiencefinden Sie unter Themen in erkunden 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.
   Browsertab-Bezeichnung	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 Verfügbare Zeitzonen konfigurieren aus, um die Zeitzonen auszuwählen, aus denen Ihre Anwender in den Anwendereinstellungen auswählen können.
   Banner-Bild für Core-UI	glide.product.image.light	Wählen Sie + neben dem Bild aus, 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 Format für Datum und Uhrzeit 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“ in 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“ in 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 den 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“ in 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.
   Symbolfarbe der aktuell ausgewählten 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. Dies wirkt sich auch auf den Rahmen des Suchfelds „ Konversationen filtern“ in der Connect-Chat-Sidebar aus.
   Ausgewähltes Basisthema	glide.ui.base_theme.selected_theme	Schaltet den Hauptinhalt (alle anderen Elemente außer Anwendungsnavigator und Header) zwischen den Themen „La Jolla“ und „Cobalt“ um.

   Wenn Sie Änderungen vornehmen, wird bei den meisten Einstellungen die Seite mit einer Vorschau der Änderung aktualisiert. Nur Sie sehen diese Änderungen. Bei einigen Einstellungen müssen Sie sich abmelden und dann wieder anmelden, um die Änderung anzuzeigen.
3. Wählen Sie oben oder unten auf der Seite Speichern aus.

Ergebnisse

Nachdem Sie die Konfigurationsänderungen gespeichert haben, sehen alle Benutzer, die in ihren Personalisierungsoptionen für die Anwenderoberfläche das Design System auswählen, die neuen Konfigurationsfarben.

Vergleich der Designs „La Jolla“ und „Cobalt“.

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

Nehmen Sie Änderungen an diesen Stilen vor, indem Sie zu navigieren Systemeigenschaften > Basiskonfiguration UI16an.

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

Eigenschaft	La-Jolla-Stil	Cobalt-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	#278efc
Balkenfarbe des Registerkartenteilers der nicht ausgewählten Navigation css.$nav-highlight-bar-inactive	#213234	#81878e
Farbe von Navigationstrennzeichen css.$nav-hr-color	#293e40	#303a46
Hintergrund für Navigator und Sidebars css.$navpage-nav-bg-sub	#293e40	#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	#TTTT
Ausgewähltes Basisthema glide.ui.base_theme.selected_theme	La-Jolla-SysID: c92c1ee153002300dda1ddeeff7b125b	Cobalt-SysID: 6f3c9ae153002300dda1ddeeff7b124a