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

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 4 Minuten Lesedauer

    • Sie können das Modul Basiskonfiguration Core-UI verwenden, um Ihre Instanz mit Ihrem Firmenlogo und Ihren Farben zu versehen und grundlegende Systemstandards festzulegen. Dies ist der beste Ausgangspunkt, wenn Sie Ihre Instanz zum ersten Mal einrichten oder wenn Sie kürzlich Core-UIaktiviert haben.

    Vorbereitungen

    Erfassen Sie die folgenden Informationen, um den Abschluss der Basiskonfiguration vorzubereiten:
    • Rufen Sie das Unternehmensbannerbild ab, das im Header verwendet werden soll. Das Bild kann eine hohe Auflösung haben, wird jedoch bei der Anzeige basierend auf dem Seitenverhältnis skaliert. Sie wird auf eine maximale Höhe von 20 px skaliert.
    • Rufen Sie die Markenfarbe-Hex- oder RGB-Nummern Ihres Unternehmens ab, in der Regel von Ihrer Marketingabteilung. Verwenden Sie sie, um zu entscheiden, wie die UI-Hintergrundfarben konfiguriert werden sollen.

    Erforderliche Rolle: admin

    Warum und wann dieser Vorgang ausgeführt wird

    Jede Farbauswahloption bietet einen Farbwähler zur Auswahl einer Farbe. In das 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
    Informationen zu HTML-Farbnamen finden Sie unter HTML- Farbnamen (W3CSchools).

    Prozedur

    1. Navigieren zu Alle > Systemeigenschaften > Basiskonfiguration UI16.
    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 Auswahlliste aus.

      Klicken Sie auf Verfügbare Zeitzonen konfigurieren, um die Zeitzonen auszuwählen, aus denen Benutzer in den Benutzereinstellungen auswählen können.
      Bannerbild für UI16 glide.product.image.light Klicken Sie neben dem Bild auf +, 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.
      Header-Hintergrund
      Diese Farbe wird auch als Teil der Designvorschau auf der Registerkarte Themen unter den Systemeinstellungen verwendet.
      Banner-Textfarbe: css.$navpage-header-color Wählen Sie die Farbe aus, oder geben Sie sie ein.
      Banner-Textfarbe:
      Diese Farbe wird auch als Teil der Designvorschau auf der Registerkarte Themen unter den Systemeinstellungen verwendet.
      Farbe des Header-Trennstreifens css.$navpage-header-teiler-farbe Wählen Sie die Farbe aus, oder geben Sie sie ein.
      Header-Teiler-Striper
      Navigations-Header/-Fußzeile css.$navpage-nav-bg Wählen Sie die Farbe aus, oder geben Sie sie ein.
      Navigation
      Erweiterte Elemente des Navigationshintergrunds css.$subnav-Hintergrundfarbe Wählen Sie die Farbe aus, oder geben Sie sie ein.
      Anwendung mit erweiterten Modulen, um den Unterschied in Farbe anzuzeigen
      Modultextfarbe für UI16 css.$navpage-nav-color-sub Wählen Sie die Farbe aus, oder geben Sie sie ein.
      Favoriten, Connect-Liste
      Hintergrundfarbe für ausgewählte Navigationsregisterkarte css.$navpage-nav-ausgewählt-bg Wählen Sie die Farbe aus, oder geben Sie sie ein.
      Ausgewählte Registerkarte
      Balkenfarbe des Registerkartenteilers der ausgewählten Navigation css.$nav-highlight-bar-aktiv
      Anwendungsnavigator mit ausgewählter Registerkarte Alle Anwendungen und einem Pfeil, der anzeigt, dass die Linie unter der Registerkarte blau ist
      Diese Farbe wird auch als Teil der Designvorschau auf der Registerkarte Themen unter den Systemeinstellungen verwendet.
      Balkenfarbe des Registerkartenteilers der nicht ausgewählten Navigation css.$nav-highlight-bar-inaktiv
      Anwendungsnavigator mit ausgewählter Registerkarte Alle Anwendungen und einem Pfeil, der auf die anderen Registerkarten zeigt, um anzuzeigen, dass die Linie eine andere Farbe hat
      Farbe von Navigationstrennzeichen css.$nav-hr-color Wählen Sie die Farbe aus, oder geben Sie sie ein.
      Trennzeichen
      Hintergrund für Navigator und Seitenleisten css.$navpage-nav-bg-sub Wählen Sie die Farbe aus, oder geben Sie sie ein.
      Navigator, Seitenleisten
      Farbe für aktuell ausgewähltes Symbol auf Navigationsregisterkarte für UI16 css.$navpage-nav-selected-color Wählen Sie die Farbe aus, oder geben Sie sie ein.
      Navigationssymbol
      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.

      Symbol für nicht ausgewählte Favoriten
      Rahmenfarbe für UI16 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 Seitenleiste Connect-Chat aus.
      Filternavigator
      Ausgewähltes Basisthema glide.ui.base_theme.selected_theme Schaltet den Hauptinhalt (alles andere als den Anwendungsnavigator und den Header) zwischen den Themen „La Jolla“ und „Cobalt“ um.
      Bei den meisten Einstellungen wird die Seite mit einer Vorschau der Änderung aktualisiert, wenn Sie Änderungen vornehmen. Nur Sie sehen diese Änderungen. Bei einigen Einstellungen müssen Sie sich abmelden und erneut anmelden, um die Änderung anzuzeigen.
    3. Klicken Sie oben oder unten auf der Seite auf Speichern.

    Ergebnisse

    Nachdem Sie die Konfigurationsänderungen gespeichert haben, sehen alle Benutzer, die in ihren UI-Personalisierungsoptionen das Systemdesign auswählen, die neuen Konfigurationsfarben.

    Vergleich der Themen La Jolla und Cobalt

    Das La Jolla-Design ist das neue Markendesign 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 folgenden Liste, um Stile auf das neue oder alte Design zurückzusetzen oder zu aktualisieren.

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

    Tabelle : 2. Themenstile La Jolla und Cobalt
    Eigenschaft La Jolla-Stil Cobalt-Stil
    Header-Hintergrundfarbe

    css.$navpage-header-bg

    		 #fffff #303a46
    Farbe des Header-Trennstreifens

    css.$navpage-header-teiler-farbe

    		 #5a7f71 #455464
    Navigations-Header/-Fußzeile

    css.$navpage-nav-bg

    		 #293e40 #303A46
    Erweiterte Elemente des Navigationshintergrunds

    css.$subnav-Hintergrundfarbe

    		 #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-aktiv

    		 #82c9b8 #278efc
    Balkenfarbe des Registerkartenteilers der nicht ausgewählten Navigation

    css.$nav-highlight-bar-inaktiv

    		 #213234 #81878e
    Farbe von Navigationstrennzeichen

    css.$nav-hr-color

    		 #293e40 #303a46
    Hintergrund für Navigator und Seitenleisten

    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 #fffff
    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