Personnalisation de l’apparence de l’instance

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

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 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)

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 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

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 classe CSS pour Xanadu

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
$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-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	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 Effacer l’icône de 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.
$navpage-nav-border	Couleur de la bordure du filtre de navigation et du 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 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.
$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’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ème > Configuration de base UI16 > Couleur de la barre de division des onglets de navigation sélectionnés
$nav-barre de 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-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
$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 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.
$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.

• 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 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
  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 de l’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.