Personnalisation de l’apparence de l’instance
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 chacune 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 .
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 des 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 de menu du navigateur (taille de police du texte, couleur d’arrière-plan, couleur du texte)
- Nom et taille de la police de l’en-tête
- Remplacement de 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 de catalogue et les résultats de la base de connaissances)
Propriétés de l’interface utilisateur
Accédez à la .
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
- Positionnement 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 notes de travail supplémentaires sur l’incident
Prise en charge de classe CSS
Dans Interface utilisateur principale (UI16), les propriétés CSS et leur incidence sur l’interface utilisateur de la plateforme changent en fonction de la version.
Remarque :
Les paramètres configurés à partir de la page Configuration de base UI16 ne s’appliquent pas aux instances activées Next Experience .
| Classe CSS | Description | Comment configurer |
|---|---|---|
| $navpage-en-tête-bg | Couleur d'arrière-plan de l'en-tête | Accédez à la |
| $navpage-en-tête couleur | Couleur du texte d’en-tête et de l’icône de recherche globale | Accédez à la |
| $navpage-en-tête - couleur du bouton | 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. |
| $navpage-en-tête-séparateur-couleur | Couleur du séparateur d’en-tête | Accédez à la |
| $navpage-bouton-couleur | Couleur des icônes suivantes dans les barres latérales
|
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 :
|
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-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. |
| $navpage-bordure de navigation | Couleur de la bordure pour le filtre de navigation et le filtre de conversation | Accédez à la |
| $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. |
| $subnav-couleur d’arrière-plan | Arrière-plan pour les éléments de navigation développés | Accédez à la |
| $navpage-nav-bg | En-tête et pied de page pour le navigateur et les barres latérales. | Accédez à la |
| $navpage-nav-bg-sub | Arrière-plan pour le navigateur et les barres latérales | Accédez à la |
| $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 |
| $nav-hr-color | Couleur du séparateur de navigateur | Accédez à la |
| $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 dans l’onglet Thèmes sous Paramètres système. | Accédez à la |
| $nav-highlight-bar-inactive | Ligne sous les onglets inactifs dans le navigateur d’applications | Accédez à la |
| $navpage-nav-selected-bg | Couleur d’arrière-plan de l’onglet de navigation sélectionné | Accédez à la |
| $navpage-nav-selected-color | Couleur de l’icône de l’onglet Navigation actuellement sélectionné | Accédez à la |
| $navpage-nav-unselected-color | Icône des onglets de navigation non sélectionnés et couleur des icônes des favoris | Accédez à la |
| $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. |
| $nav-timeago-header-color | Arrière-plans de l’en-tête de l’horodatage dans l’onglet Historique | 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. |
| $navpage-nav-app-text-hover | Couleur de 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. |