Configurer le logo, les couleurs et les valeurs système par défaut pour Interface utilisateur principale

Vous pouvez utiliser le module Configuration Interface utilisateur principale de base pour personnaliser votre instance avec le logo et les couleurs de votre entreprise et définir des valeurs système par défaut de base. Cet emplacement est le meilleur point de départ si vous configurez votre instance pour la première fois ou si vous l’avez récemment activée Interface utilisateur principale.

Avant de commencer

Rassemblez les éléments suivants :

• Obtenez l’image de bannière de l’entreprise à 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 peut atteindre un maximum de 20 px de haut.
• Obtenez les numéros hexadécimaux ou RVB de la couleur de la 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 : admin

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 située à côté 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
• Valeur RVB décimale : RVB (102, 153, 204)
• RVB hex. : #223344

Reportez-vous à la section Noms des couleurs HTML (W3CSchools) pour plus d’informations sur les noms des couleurs HTML.

Remarque :

Ces informations s’appliquent à Interface utilisateur principale. Pour obtenir des informations sur le thème de , reportez-vous à Next Experiencela section Exploration des thèmes dans Next Experience.

Procédure

1. Accédez à la Tout > Propriétés système > Configuration de base UI16.
2. 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
   Légende d’en-tête de page	glide.produit.description	Modifiez le texte qui s’affiche à côté de votre logo.
   Titre de l'onglet du navigateur	glide.product.name	Modifiez le texte qui s’affiche sur 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 les utilisateurs peuvent sélectionner dans les préférences utilisateur.
   Image de bannière pour Interface utilisateur principale	glide.produit.image.lumière	Sélectionnez + en regard de l’image et téléchargez votre logo.
   Format de date Format d'heure	glide.sys.format_date_ 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.en-tête $navpage-bg	Sélectionnez ou saisissez la couleur. Cette couleur est également utilisée dans le cadre de l’aperçu du thème sous l’onglet Thèmes sous Paramètres système.
   Couleur du texte de la bannière :	css.$navpage-en-tête couleur	Sélectionnez ou saisissez la couleur. Cette couleur est également utilisée dans le cadre de l’aperçu du thème sous l’onglet Thèmes sous Paramètres système.
   Couleur de bande de division d'en-tête	css.$navpage-en-tête-séparateur-couleur	Sélectionnez ou saisissez la couleur.
   En-tête/pied de page de navigation	css.$navpage-nav-bg	Sélectionnez ou saisissez la couleur.
   Éléments développés dans l'arrière-plan de navigation	css.$subnav-couleur-arrière-plan	Sélectionnez ou saisissez la couleur.
   Couleur du texte du module pour le navigateur d’application Interface utilisateur principale	css.$navpage-nav-color-sub	Sélectionnez ou saisissez la couleur.
   Couleur d'arrière-plan de l'onglet de navigation sélectionné	css.$navpage-nav-selected-bg	Sélectionnez ou saisissez 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 sous l’onglet Thèmes sous 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 saisissez la couleur.
   Arrière-plan pour le navigateur et les barres latérales	css.$navpage-nav-bg-sub	Sélectionnez ou saisissez 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 saisissez 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 saisissez la couleur.
   Couleur de la bordure pour Interface utilisateur principale	css.$navpage-nav-border	Sélectionnez ou saisissez la couleur. Affecte également la bordure de la zone de recherche Filtrer les conversations dans la barre latérale de Messagerie instantanée de Connexion.
   Thème de base sélectionné	glide.ui.base_theme.selected_theme	Bascule le contenu principal (à l’exception du navigateur d’applications et de 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.
3. 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 du thème La Jolla et du cobalt

Le thème La Jolla est le nouveau thème de marque pour ServiceNow. Lorsque vous effectuez une mise à niveau vers Madrid, votre thème est automatiquement mis à niveau vers le thème La Jolla. Toutes 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 vers le 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 des thèmes La Jolla et Cobalt

Propriété	Style La Jolla	Style cobalt
Couleur d'arrière-plan de l'en-tête css.en-tête $navpage-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-arrière-plan	#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	SysID du cobalt : 6f3c9ae153002300dda1ddeeff7b124a