Personnalisation de l’apparence de l’instance

Un administrateur peut modifier les propriétés système ou CSS globales afin de modifier l’apparence de l’interface d’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 aider les utilisateurs à é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

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, décimales RVB ou 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 rempli, Obligatoire, Non rempli et Lecture seule)
• Alignement vertical des cellules de la liste
• Styles du menu du navigateur (taille de 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 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 du bouton 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 notes de travail supplémentaires sur l’incident

Prise en charge des classes 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 des classes CSS pour Washington DC

Classe CSS	Description	Comment configurer	Zone affectée
$navpage-header-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
$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ème > Configuration de base UI16 > 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.
$navpage-en-tête-diviseur-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
$navpage couleur de bouton	Couleur des icônes suivantes dans les barres latérales Agrandir/réduire Créer une conversation (dans la Connexion barre latérale) Ouvrir Connexion l’espace 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.
$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.
$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.
Bordure de navigation $navpage	Couleur de 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
$nav point culminant principal	Met en surbrillance le module 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.
$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
$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
$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
$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.
$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ème > Configuration de base UI16 > Couleur du séparateur de navigation
$nav-barre de surbrillance-active	Ligne sous l’onglet actif dans le navigateur d’application. Cette couleur est également utilisée dans le cadre de l’aperçu du thème dans l’onglet Thèmes sous les 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
$nav-barre de mise en surbrillance inactive	Ligne sous les onglets inactifs dans le navigateur d’application	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
$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é
$navpage-navigation-couleur-sélectionnée	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 de navigation actuellement sélectionnée pour UI16
$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
$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.
$nav-timeago-header-color	Arrière-plans de l’en-tête 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 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.
$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.

• 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 société et définir les valeurs système de base par défaut. Cet emplacement 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
  Vous pouvez passer d’un thème à l’autre pour l’interface utilisateur.
• Personnaliser les catégories de menu
  Utilisez les catégories de menu pour appliquer des styles CSS aux étiquettes d’application.
• Changer les couleurs d’en-tête des questions d’enquête
  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
  Les thèmes donnent à l’interface utilisateur un aspect spécifique en utilisant différentes combinaisons de couleurs.