Configurer le logo, les couleurs et les valeurs système par défaut pour Interface utilisateur principale
Rversion finale: Xanadu
Mis à jour 1 août 2024
5 minutes de lecture
Vous pouvez utiliser le module Configuration Interface utilisateur principale de base pour personnaliser votre instance avec le logo et les couleurs de votre société et définir les valeurs système par défaut de base. Cet endroit est le meilleur point de départ si vous configurez votre instance pour la première fois ou si vous avez récemment activé Interface utilisateur principale.
Avant de commencer
Rassemblez les éléments suivants :
Obtenez l’image de la bannière de la société à utiliser dans l’en-tête. L’image peut être en haute résolution, mais lorsqu’elle s’affiche, elle est mise à l’échelle en fonction du rapport hauteur/largeur. Il s’adapte jusqu’à un maximum de 20 px de haut.
Obtenez les numéros hexadécimaux ou RVB de la couleur de marque de votre entreprise, généralement auprès de votre service marketing. Utilisez-les pour décider comment configurer les couleurs d’arrière-plan de l’interface utilisateur.
Rôle requis : administrateur
Pourquoi et quand exécuter cette tâche
Chaque option de sélection de couleur fournit un sélecteur de couleurs permettant de sélectionner une couleur. La zone de texte en regard du sélecteur de couleurs vous permet d’entrer la valeur de la couleur dans l’un des formats CSS suivants :
Nom : noms de couleurs prédéfinis, tels que rouge, vert ou bleu
Ces informations s’appliquent à Interface utilisateur principale. Pour plus d’informations sur la thématisation de Next Experience, reportez-vous à la section Explorer les thèmes dans Next Experience.
Procédure
Accédez à la Tout > Propriétés système > Configuration de base UI16.
Terminez la configuration en modifiant l’un des paramètres suivants :
Tableau 1. Propriétés de configuration système de base
Étiquette
Propriété
Description
Partie droite de l'en-tête de la page et du titre du navigateur.
glide.product.description
Modifiez le texte qui s’affiche à côté de votre logo.
Partie gauche de l'en-tête de la page et du navigateur. Titre
glide.product.name
Modifiez le texte qui s’affiche dans l’onglet du navigateur.
Fuseau horaire du système, utilisé par défaut pour les planifications et les utilisateurs.
glide.sys.default.tz
Sélectionnez le fuseau horaire dans la liste.
Sélectionnez Configurer les fuseaux horaires disponibles pour sélectionner les fuseaux horaires que vos utilisateurs peuvent choisir dans les préférences utilisateur.
Image de bannière pour Interface utilisateur principale
glide.product.image.light
Sélectionnez + à côté de l’image et téléchargez votre logo.
Format de date
Format d'heure
format glide.sys.date_format
glide.sys.time_format
Sélectionnez le format de date et d’heure dans les listes de choix.
Couleur d'arrière-plan de l'en-tête
css.$navpage-header-bg
Sélectionnez ou entrez la couleur.
Cette couleur est également utilisée dans le cadre de l’aperçu du thème dans l’onglet Thèmes des paramètres système.
Couleur du texte de la bannière :
css.$navpage couleur de l’en-tête
Sélectionnez ou entrez la couleur.
Cette couleur est également utilisée dans le cadre de l’aperçu du thème dans l’onglet Thèmes des paramètres système.
Couleur de bande de division d'en-tête
css.$navpage-en-tête-séparateur-couleur
Sélectionnez ou entrez la couleur.
En-tête/pied de page de navigation
css.$navpage-nav-bg
Sélectionnez ou entrez la couleur.
Éléments développés dans l'arrière-plan de navigation
css.$subnav couleur de fond
Sélectionnez ou entrez la couleur.
Couleur du texte du module pour le navigateur d’applications Interface utilisateur principale
css.$navpage-nav-color-sub
Sélectionnez ou entrez la couleur.
Couleur d'arrière-plan de l'onglet de navigation sélectionné
css.$navpage-nav-selected-bg
Sélectionnez ou entrez la couleur.
Couleur de la barre de division des onglets de navigation sélectionnés
css.$nav-highlight-bar-active
Cette couleur est également utilisée dans le cadre de l’aperçu du thème dans l’onglet Thèmes des paramètres système.
Couleur de la barre de division des onglets de navigation non sélectionnés
css.$nav-highlight-bar-inactive
Couleur du séparateur de navigation
css.$nav-hr-color
Sélectionnez ou entrez la couleur.
Arrière-plan pour le navigateur et les barres latérales
css.$navpage-nav-bg-sub
Sélectionnez ou entrez la couleur.
Couleur de l’icône de l’onglet Navigation actuellement sélectionné pour Interface utilisateur principale
css.$navpage-nav-selected-color
Sélectionnez ou entrez la couleur.
Icône des onglets de navigation non sélectionnés et couleur des icônes des favoris
css.$navpage-nav-unselected-color
Sélectionnez ou entrez la couleur.
Couleur de la bordure pour Interface utilisateur principale
css.$navpage-nav-border
Sélectionnez ou entrez la couleur. Affecte également la bordure de la zone de recherche Filtrer les conversations dans la barre latérale de la Messagerie instantanée de Connexion.
Thème de base sélectionné
glide.ui.base_theme.selected_theme
Bascule le contenu principal (tout ce qui est autre que le navigateur d’application et l’en-tête) entre les thèmes La Jolla et Cobalt.
Pour la plupart des paramètres, lorsque vous apportez des modifications, la page s’actualise avec un aperçu de la modification. Vous êtes le seul à voir ces changements. Certains paramètres nécessitent que vous vous déconnectiez et que vous vous reconnectiez pour voir le changement.
Sélectionnez Enregistrer en haut ou en bas de la page.
Résultats
Une fois les changements de configuration enregistrés, tous les utilisateurs qui sélectionnent le thème système dans leurs options de personnalisation de l’interface utilisateur voient les nouvelles couleurs de configuration.
Comparaison des thèmes La Jolla et cobalt
Le thème La Jolla est le nouveau thème de la marque pour ServiceNow. Lorsque vous effectuez une mise à niveau vers Madrid, votre thème est automatiquement mis à niveau vers le thème La Jolla. Les personnalisations que vous avez apportées au thème système ne seront pas mises à niveau. Utilisez les styles de la liste ci-dessous pour mettre à niveau ou rétablir des styles au nouveau ou à l’ancien thème.
Apportez des modifications à l’un de ces styles en accédant à Propriétés système > Configuration de base UI16.
Tableau 2. Styles de thème La Jolla et Cobalt
Propriété
Le style de La Jolla
Style cobalt
Couleur d'arrière-plan de l'en-tête
css.$navpage-header-bg
#ffffff
#303a46
Couleur de bande de division d'en-tête
css.$navpage-en-tête-séparateur-couleur
#5a7f71
#455464
En-tête/pied de page de navigation
css.$navpage-nav-bg
#293e40
#303A46
Éléments développés dans l'arrière-plan de navigation
css.$subnav couleur de fond
#213234
#303a46
Couleur du texte du module pour UI16
css.$navpage-nav-color-sub
#bec1c6
#bec1c6
Couleur d'arrière-plan de l'onglet de navigation sélectionné
css.$navpage-nav-selected-bg
#2f4fe
#4b545f
Couleur de la barre de division des onglets de navigation sélectionnés
css.$nav-highlight-bar-active
#82c9b8
#278efc
Couleur de la barre de division des onglets de navigation non sélectionnés
css.$nav-highlight-bar-inactive
#213234
#81878e
Couleur du séparateur de navigation
css.$nav-hr-color
#293e40
#303a46
Arrière-plan pour le navigateur et les barres latérales
css.$navpage-nav-bg-sub
#293e40
#455464
Couleur de l'icône de l'onglet Navigation actuellement sélectionné pour UI16
css.$navpage-nav-selected-color
#82c9b8
#ffffff
Icône des onglets de navigation non sélectionnés et couleur des icônes des favoris
css.$navpage-nav-unselected-color
#bec1c6
#bec1c6
Couleur de la bordure pour UI16
css.$navpage-nav-border
#7a828a
#ddd
Thème de base sélectionné
glide.ui.base_theme.selected_theme
SysID de La Jolla : c92c1ee153002300dda1ddeeff7b125b
ID système cobalt : 6f3c9ae153002300dda1ddeeff7b124a
