Personnalisation de l’apparence de l’instance

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 5 minutes de lecture

    • Un administrateur peut modifier les propriétés CSS globales ou système pour modifier l’apparence de l’interface de l’instance par défaut. La fonctionnalité n’est pas affectée.

    Par exemple, les organisations utilisent souvent plusieurs instances pour séparer les activités de développement, de test et de production. Pour éviter de modifier accidentellement la mauvaise instance, les administrateurs peuvent configurer chacun avec un thème visuellement distinct. Plusieurs approches sont disponibles pour définir un thème d’instance.

    Propriétés CSS

    Accédez à la Propriétés système > CSS.

    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 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 légende de bannière et de 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 de l’en-tête
    • Remplacement de la couleur de la légende de la liste et du formulaire
    • Couleur d’arrière-plan de la recherche de texte global (pour les résultats du catalogue et ceux de la base de connaissances)

    Propriétés de l’interface utilisateur

    Accédez à la Propriétés système > Proprié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 notes de travail supplémentaires
    • Emplacement des boutons sur les formulaires
    • Icônes utilisées dans le formateur d’activité de la tâche
    • Couleurs d’arrière-plan pour l’incident Commentaires et notes de travail supplémentaires

    Prise en charge de la classe CSS

    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.

    Tableau 1. Prise en charge de la classe CSS pour Zurich
    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ème > Configuration de base UI16 > Couleur d'arrière-plan de l'en-tête Arrière-plan de l’en-tête
    $navpage-en-tête couleur Couleur du texte d’en-tête et de l’icône de recherche globale Accédez à la Propriétés système > Configuration de base UI16 > Couleur 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 Connect globale, 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. En-tête avec nom d’utilisateur et Connect icônes d’aide et de paramètres mis en surbrillance
    $navpage-en-tête-séparateur-couleur Couleur du séparateur d’en-tête Accédez à la Propriétés système > Configuration de base UI16 > Couleur 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 barre latérale Connect )
    • Ouvrir l’espace Connect de travail
    		 Ajoutez la propriété CSS au champ CSS d’un thème. Pour plus d'informations, consultez Créer ou personnaliser un thème. Connect Barre latérale avec une 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
    • Icône Effacer le texte dans le filtre de navigation
    		 Ajoutez la propriété CSS au champ CSS d’un thème. Pour plus d'informations, consultez Créer ou personnaliser un thème. Pointez sur l’icône d’aide pour afficher qu’elle est bleue lorsqu’un utilisateur pointe dessus

    Option Pointer pour effacer dans le navigateur d’applications pour montrer qu’il est également bleu sur pointer vers
    $search-texte-couleur 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. Rechercher dans le navigateur d’application en affichant « incident » en blanc
    $navpage-nav-border Couleur de la bordure pour le filtre de navigation et le filtre de conversation Accédez à la Propriétés système > Configuration de base UI16 > Couleur de la bordure pour UI16 Navigateur de filtre
    $nav-highlight-main Met en surbrillance le module une fois que l’utilisateur a cliqué dessus. Dans l’espace de Connect 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. Conversation sélectionnée dans Connect 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ème > Configuration de base UI16 > Éléments développés dans l'arrière-plan de navigation Application avec des modules développés 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ème > Configuration de base UI16 > En-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ème > Configuration de base UI16 > Arrière-plan pour les navigateurs et les barres latérales Navigateur, barres latérales
    $navpage-nav-color-sub Couleur du texte pour les modules de 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. Navigateur d’application avec Incident ouvert et les modules sous l’incident affichant la couleur du texte sont blancs
    $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
    $nav-hr-color Couleur du séparateur de navigateur Accédez à la Propriétés système > Configuration de base UI16 > Couleur du séparateur de navigation Séparateurs
    $nav-highlight-bar-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 sous l’onglet Thèmes sous Paramètres système. Accédez à la Propriétés système > Configuration de base UI16 > Couleur 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-highlight-bar-inactive Ligne sous les onglets inactifs dans le navigateur d’applications Accédez à la Propriétés système > Configuration de base UI16 > Couleur 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ème > Configuration de base UI16 > Couleur 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ème > Configuration de base UI16 > Couleur 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ème > Configuration de base UI16 > Icô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 Connect Ajoutez la propriété CSS au champ CSS d’un thème. Pour plus d'informations, consultez Créer ou personnaliser un thème. Connect Barre latérale avec le message sélectionné indiqué par une flèche
    $nav-timeago-header-color Arrière-plans des 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 les éléments tels que les applications et le texte d’état vide pour la Connect 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. Navigateur d’applications avec une flèche pointant vers Service Desk pour indiquer que le texte est blanc
    $navpage-nav-app-text-hover Couleur du texte pour 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. Incidents > Ouvrir le module sélectionné pour afficher la couleur sélectionnée