--- 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 --- # Personnalisation de l'apparence de l'instance # Personnalisation de l'apparence de l'instance {#ariaid-title1} * Rversion finale: Xanadu * * Mis à jour 1 août 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 minutes de lecture Un administrateur peut modifier le CSS global ou les propriétés système pour modifier l'apparence de l'interface d'instance par défaut. La fonctionnalité n'est pas affectée. Par exemple, les entreprises utilisent souvent plusieurs instances pour séparer les activités de développement, de test et de production. Pour éviter de changer accidentellement la mauvaise instance, les administrateurs peuvent configurer chacune d'entre elles avec un thème visuellement distinct. Plusieurs approches sont disponibles pour définir un thème d'instance. ## Propriétés CSS {#customizing-instance-appearance__section_ag1_qz2_p1b} Accédez à la Propriétés systèmeCSS. Les propriétés suivantes sont disponibles via les propriétés CSS. Remarque : Les couleurs sont spécifiées à l'aide de [noms de couleurs](https://www.w3schools.com/css/css_colors.asp) prédéfinis, de décimales RVB ou d'hexadécimales RVB. * Couleur du texte de la bannière : * Couleur d'arrière-plan de la légende de la bannière et de la liste * Police utilisée dans les formulaires et les listes (il s'agit d'un paramètre de police global) * Styles de boutons (couleur d'arrière-plan, couleur de bordure, largeur de bordure, couleur de texte) * Couleurs des indicateurs d'état de champ (y compris les indicateurs Modifié, Obligatoire, Renseigné, Obligatoire, Non renseigné et Lecture seule) * Alignement vertical des cellules de la liste * Styles du menu du navigateur (taille de la police du texte, couleur d'arrière-plan, couleur du texte) * Nom et taille de la police d'en-tête * Couleur de remplacement de la légende de la liste et du formulaire * Couleur d'arrière-plan de la recherche de texte global (à la fois pour les résultats de catalogue et pour les résultats de la base de connaissances) {#customizing-instance-appearance__ul_yxr_f3k_2p} ## Propriétés de l'interface utilisateur {#customizing-instance-appearance__section_b45_d2f_p1b} Accédez à la Propriétés systèmePropriétés de l'interface utilisateur. Les propriétés suivantes sont disponibles via les propriétés de l'interface utilisateur. * Icônes utilisées dans le formateur d'activité * Couleurs d'arrière-plan pour les commentaires et les notes de travail supplémentaires * Placement des boutons sur les formulaires * Icônes utilisées dans le formateur d'activité de la tâche * Couleurs d'arrière-plan pour les commentaires et les notes de travail supplémentaires de l'incident {#customizing-instance-appearance__ul_chy_f2f_p1b} ## Prise en charge de la classe CSS {#customizing-instance-appearance__section_nzg_l2f_p1b} Dans Interface utilisateur principale (UI16), les propriétés CSS et la façon dont elles affectent l'interface utilisateur de la plateforme changent en fonction de la version. {#customizing-instance-appearance__table_xxt_5bk_11b__entry__4} | Classe CSS | Description | Comment configurer | Zone affectée | |-|-|-|-| | $navpage-en-tête-bg | Couleur d'arrière-plan de l'en-tête | Accédez à la Propriétés systèmeConfiguration de base UI16Couleur d'arrière-plan de l'en-tête | ![Arrière-plan de l’en-tête]() | | $navpage couleur d'en-tête | Couleur du texte d'en-tête et de l'icône de recherche globale | Accédez à la Propriétés systèmeConfiguration de base UI16Couleur du texte de la bannière : | ![Couleur du texte de la bannière]() | | $navpage-en-tête-bouton-couleur | Couleur du texte du nom d'utilisateur connecté et des icônes de recherche Connexionglobale, d'aide et de paramètres | Ajoutez la propriété CSS au champ CSS d'un thème. Pour plus d'informations, consultez [Créer ou personnaliser un thème](https://servicenow-prod.fluidtopics.net/9ydtAUtn1VE3DOmfu3O7qQ "Vous pouvez créer des thèmes ou personnaliser les thèmes existants."). | ![En-tête avec le nom d’utilisateur et Connexionles icônes d’aide et de paramètres en surbrillance]() | | $navpage-en-tête-diviseur-couleur | Couleur du séparateur d'en-tête | Accédez à la Propriétés systèmeConfiguration de base UI16Couleur de bande de division d'en-tête | ![Séparateur d’en-tête]() | | $navpage-bouton-couleur | Couleur des icônes suivantes dans les barres latérales * Développer/réduire * Créer une conversation (dans la Connexion barre latérale) * Ouvrir Connexion l'espace de travail {#customizing-instance-appearance__ul_tt4_ckt_b1b} | Ajoutez la propriété CSS au champ CSS d'un thème. Pour plus d'informations, consultez [Créer ou personnaliser un thème](https://servicenow-prod.fluidtopics.net/9ydtAUtn1VE3DOmfu3O7qQ "Vous pouvez créer des thèmes ou personnaliser les thèmes existants."). | ![Connexion barre latérale avec flèche pointant vers l’icône plus]() | | $navpage-bouton-couleur-survol | Couleur des icônes suivantes lorsqu'un utilisateur pointe sur le contrôle : * Recherche globale. * Aide * Paramètres * Effacer l'icône de texte dans le filtre de navigation {#customizing-instance-appearance__ul_dh2_lkt_b1b} | Ajoutez la propriété CSS au champ CSS d'un thème. Pour plus d'informations, consultez [Créer ou personnaliser un thème](https://servicenow-prod.fluidtopics.net/9ydtAUtn1VE3DOmfu3O7qQ "Vous pouvez créer des thèmes ou personnaliser les thèmes existants."). | ![Pointez sur l’icône Aide pour montrer qu’elle est bleue lorsqu’un utilisateur pointe dessus]() ![Option Pointer vers effacer dans le navigateur d’application pour montrer qu’il est également bleu sur le point vers]() | | $search couleur de texte | Couleur du texte de recherche, à la fois dans le filtre de navigation et dans les champs de recherche globale | Ajoutez la propriété CSS au champ CSS d'un thème. Pour plus d'informations, consultez [Créer ou personnaliser un thème](https://servicenow-prod.fluidtopics.net/9ydtAUtn1VE3DOmfu3O7qQ "Vous pouvez créer des thèmes ou personnaliser les thèmes existants."). | ![Rechercher dans le navigateur d’applications en affichant « incident » en blanc]() | | $navpage-nav-border | Couleur de la bordure du filtre de navigation et du filtre de conversation | Accédez à la Propriétés systèmeConfiguration de base UI16Couleur de la bordure pour UI16 | ![Rechercher]() | | $nav-point culminant principal | Met le module en surbrillance une fois que l'utilisateur a cliqué dessus. Dans l'espace de Connexion travail, met en surbrillance la conversation sélectionnée. | Ajoutez la propriété CSS au champ CSS d'un thème. Pour plus d'informations, consultez [Créer ou personnaliser un thème](https://servicenow-prod.fluidtopics.net/9ydtAUtn1VE3DOmfu3O7qQ "Vous pouvez créer des thèmes ou personnaliser les thèmes existants."). | ![Conversation sélectionnée dans Connexion Espace de travail affichant la couleur correcte]() | | $subnav couleur d'arrière-plan | Arrière-plan pour les éléments de navigation développés | Accédez à la Propriétés systèmeConfiguration de base UI16Éléments développés dans l'arrière-plan de navigation | ![Application avec des modules étendus pour afficher la différence de couleur]() | | $navpage-nav-bg | En-tête et pied de page pour le navigateur et les barres latérales. | Accédez à la Propriétés systèmeConfiguration de base UI16En-tête/pied de page de navigation | ![Navigation]() | | $navpage-nav-bg-sub | Arrière-plan pour le navigateur et les barres latérales | Accédez à la Propriétés systèmeConfiguration de base UI16Arrière-plan pour les navigateurs et les barres latérales | | | $navpage-nav-color-sub | Couleur du texte pour les modules dans la navigation principale | Ajoutez la propriété CSS au champ CSS d'un thème. Pour plus d'informations, consultez [Créer ou personnaliser un thème](https://servicenow-prod.fluidtopics.net/9ydtAUtn1VE3DOmfu3O7qQ "Vous pouvez créer des thèmes ou personnaliser les thèmes existants."). | | | $navpage-nav-mod-text-hover | Couleur du texte lors du survol d'éléments dans la navigation principale | Non pris en charge | Non pris en charge | | couleur $nav heures | Couleur du séparateur du navigateur | Accédez à la Propriétés systèmeConfiguration de base UI16Couleur du séparateur de navigation | ![Séparateurs]() | | $nav barre de surbrillance active | Ligne sous l'onglet actif dans le navigateur d'applications. 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. | Accédez à la Propriétés systèmeConfiguration de base UI16Couleur de la barre de division des onglets de navigation sélectionnés | ![Navigateur d’applications avec l’onglet Toutes les applications sélectionné et une flèche indiquant que la ligne sous l’onglet est bleue]() | | $nav-barre de surbrillance-inactive | Ligne sous les onglets inactifs dans le navigateur d'application | Accédez à la Propriétés systèmeConfiguration de base UI16Couleur de la barre de division des onglets de navigation non sélectionnés | ![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]() | | $navpage-nav-selected-bg | Couleur d'arrière-plan de l'onglet de navigation sélectionné | Accédez à la Propriétés systèmeConfiguration de base UI16Couleur d'arrière-plan de l'onglet de navigation sélectionné | ![Onglet sélectionné]() | | $navpage-nav-selected-color | Couleur de l'icône de l'onglet Navigation actuellement sélectionné | Accédez à la Propriétés systèmeConfiguration de base UI16Couleur de l'onglet Navigation actuellement sélectionné pour UI16 | ![Icône de navigation]() | | $navpage-nav-unselected-color | Icône des onglets de navigation non sélectionnés et couleur des icônes des favoris | Accédez à la Propriétés systèmeConfiguration de base UI16Icône des onglets de navigation non sélectionnés et couleur des icônes des favoris | ![Couleur de l’icône des favoris]() | | $connect-dernier-message | Couleur du message actuellement sélectionné dans Connexion | Ajoutez la propriété CSS au champ CSS d'un thème. Pour plus d'informations, consultez [Créer ou personnaliser un thème](https://servicenow-prod.fluidtopics.net/9ydtAUtn1VE3DOmfu3O7qQ "Vous pouvez créer des thèmes ou personnaliser les thèmes existants."). | | | $nav-timeago-header-color | Arrière-plans d'en-têtes d'horodatage dans l'onglet Historique | Non pris en charge | Non pris en charge | | $navpage-nav-app-text | Couleur du texte du contenu principal pour des éléments tels que des applications et texte d'état vide pour la Connexion barre latérale. | Ajoutez la propriété CSS au champ CSS d'un thème. Pour plus d'informations, consultez [Créer ou personnaliser un thème](https://servicenow-prod.fluidtopics.net/9ydtAUtn1VE3DOmfu3O7qQ "Vous pouvez créer des thèmes ou personnaliser les thèmes existants."). | | | $navpage-nav-app-text-hover | Couleur du texte d'un module sélectionné | Ajoutez la propriété CSS au champ CSS d'un thème. Pour plus d'informations, consultez [Créer ou personnaliser un thème](https://servicenow-prod.fluidtopics.net/9ydtAUtn1VE3DOmfu3O7qQ "Vous pouvez créer des thèmes ou personnaliser les thèmes existants."). | | [Tableau 1. Prise en charge de classe CSS pour Xanadu] {#customizing-instance-appearance__table_xxt_5bk_11b} * **[Configurer le logo, les couleurs et les valeurs système par défaut pour Interface utilisateur principale](https://servicenow-prod.fluidtopics.net/uURlAGr4EuB~Uo4J89s_mA#t_ConfigureLogoColorsSysDfltsUI16)** 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. * **[Sélectionner un thème dans l'interface utilisateur principale](https://servicenow-prod.fluidtopics.net/uB~KwfJBNFb4x8GVJhuVXg)** Vous pouvez passer d'un thème à l'autre pour l'interface utilisateur. * **[Personnaliser les catégories de menu](https://servicenow-prod.fluidtopics.net/_usrteK5y2unPvXTZXVxWg)** Utilisez les catégories de menu pour appliquer des styles CSS aux étiquettes d'application. * **[Changer les couleurs de l'en-tête des questions d'enquête](https://servicenow-prod.fluidtopics.net/_DJJ6wCOAWR08Wl3sl3NYg)** L'environnement classique utilise une couleur d'en-tête à partir de la couleur de base, ce qui permet de thématiser à partir des propriétés CSS. * **[Prise en charge du thème CSS](https://servicenow-prod.fluidtopics.net/DcUyD9JNgGplMNqXGnYz8g)** Les thèmes donnent à l'interface utilisateur un aspect spécifique en utilisant différentes combinaisons de couleurs.