--- sourceDocument: Interface utilisateur de la Now Platform Xanadu sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface Release : - xanadu ft:locale : - fr-FR ft:publication_title : - Interface utilisateur de la Now Platform Xanadu ft:clusterId : - platux bundleId : - platux workflow : - Platform --- # Configurer le logo, les couleurs et les valeurs système par défaut pour Interface utilisateur principale # Configurer le logo, les couleurs et les valeurs système par défaut pour Interface utilisateur principale {#ariaid-title1} * Rversion finale: Xanadu * * Mis à jour 1 août 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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. {#t_ConfigureLogoColorsSysDfltsUI16__ul_f1s_zzy_pt} 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 * Valeur RVB décimale : RVB (102, 153, 204) * RVB hex. : #223344 {#t_ConfigureLogoColorsSysDfltsUI16__ul_g31_1bz_pt}Reportez-vous à [la section Noms de couleurs HTML (W3CSchools)](http://www.w3schools.com/tags/ref_colornames.asp) pour plus d'informations sur les noms de couleurs HTML. Remarque : 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](https://servicenow-prod.fluidtopics.net/seQCgtMZQUmOUQKge7S_QQ "Les thèmes vous permettent d’adapter l’expérience visuelle à vos utilisateurs, ce qui permet de mettre à jour l’apparence pour qu’elle ressemble davantage à votre marque."). ## Procédure 1. Accédez à la ToutPropriétés systèmeConfiguration de base UI16. 2. Terminez la configuration en modifiant l'un des paramètres suivants : {#t_ConfigureLogoColorsSysDfltsUI16__table_n1g_xty_pt__entry__3} | É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. ![Arrière-plan de l’en-tête]() 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. ![Couleur du texte de la bannière :]() 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. ![Séparateur d’en-tête]() | | En-tête/pied de page de navigation | css.$navpage-nav-bg | Sélectionnez ou entrez la couleur. ![Navigation]() | | Éléments développés dans l'arrière-plan de navigation | css.$subnav couleur de fond | Sélectionnez ou entrez la couleur. ![Application avec des modules étendus pour afficher la différence de 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. ![Favoris, Liste de connexion]() | | Couleur d'arrière-plan de l'onglet de navigation sélectionné | css.$navpage-nav-selected-bg | Sélectionnez ou entrez la couleur. ![Onglet sélectionné]() | | Couleur de la barre de division des onglets de navigation sélectionnés | css.$nav-highlight-bar-active | ![Navigateur d’applications avec l’onglet Toutes les applications sélectionné et une flèche indiquant que la ligne sous l’onglet est bleue]() 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 | ![Navigateur d’applications avec l’onglet Toutes les applications sélectionné et une flèche pointant vers les autres onglets pour indiquer que la ligne est d’une couleur différente]() | | Couleur du séparateur de navigation | css.$nav-hr-color | Sélectionnez ou entrez la couleur. ![Séparateurs]() | | 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 de navigation]() | | 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. ![Icône des favoris non sélectionnés]() | | 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. ![Rechercher]() | | 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. | [Tableau 1. Propriétés de configuration système de base] {#t_ConfigureLogoColorsSysDfltsUI16__table_n1g_xty_pt} 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 des thèmes La Jolla et cobalt {#ariaid-title2} 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èmeConfiguration de base UI16. {#new-old-theme-comparison__table_jhh_yv5_yfb__entry__3} | 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 | [Tableau 2. Styles de thème La Jolla et Cobalt] {#new-old-theme-comparison__table_jhh_yv5_yfb}