Personnaliser les feuilles de style CSS Service Manager


Definition

Une feuille de style CSS est un fichier comportant un ensemble de propriétés utilisées pour paramétrer l'apparence visuelle d'une application : couleurs, bordures, polices, ...

EndDefinition

Les 3 comptes de chaque plate-forme Service Manager comportent chacun 3 feuilles de style CSS :
 

StyleSheetsDefinition
  • Feuille optimized.css : Permet de visualiser de manière ordonnée la totalité du style CSS.
  • Feuille optimized.min.css : Contient les mêmes données que la feuille optimized.css, mais de manière compactée. Cela permet une lecture plus rapide par Service Manager et améliore les performances d'affichage des pages.
  • Feuille customer_optimized.css : Feuille de style personnalisable pour modifier l'interface graphique Service Manager (couleurs et le texte de la mire de login, des menus, de la page d'accueil...).
EndStyleSheetsDefinition
StyleSheetsNotes

Remarques

  • Seule la feuille customer_optimized.css peut être personnalisée : elle n'est jamais modifiée après le passage d'un fix et est toujours lue après la feuille optimized.min.css pour l'affichage des écrans Service Manager.
  • Les fichiers CSS se trouvent dans répertoire www\Styles\Easyvista.
EndStyleSheetsNotes
StyleSheetsCaution

Attention

  • La configuration des feuilles de style CSS nécessite un minimum de connaissances dans les langages Html et CSS.
  • Les personnalisations des feuilles de style et les impacts qu'elles peuvent avoir au sein de votre plate-forme ne sont pas pris en charge par le Support EasyVista.
  • Les feuilles de style optimized.css et optimized.min.css ne doivent jamais être modifiées car elles sont susceptibles d'être écrasées en passant un fix ou en migrant la plate-forme. 
EndStyleSheetsCautions

Spécificités des versions 2016 et antérieures

La feuille de style customer_optimized.css des versions 2016 et antérieures présente différences quant à sa personnalisation.

  Open url.png voir :

Personnalisation de la feuille customer_optimized.css

  • La configuration par défaut est celle livrée à l'installation de Service Manager.
  • Vous pouvez modifier certains éléments pour définir votre propre configuration. Note : Seuls les classes et ID les plus utilisés sont décrits.

Open url.png voir  Description de l'interface Service Manager

Page de connexion (mire de login)

Configuration par défaut

       Connexion page.png

Élément formatable / Instructions CSS Représentation
(1) Chemin du logo Service Manager
…/login/logo_ezv.png

Fond et bordures

Élément formatable / Instructions CSS Représentation
(2) Extérieur
.newLoginBody{
 background: blue !important;
}

Connexion page - Background box.png

exemple

  • extérieur : cyan
  • intérieur : gris clair ; bordures bleues
(3) Intérieur
.newLoginBody .evsmLogin {
 background: lightgrey;
 border: 2px solid blue;
}

Informations de connexion

Élément formatable / Instructions CSS Représentation
(4) Couleur des libellés des champs
.newLoginBody .evsmLogin label {
 color: orange;
}

Connexion page - Fields.png

exemple

  • libellé des champs : orange
  • zone de saisie : fond cyan clair ; bordure bleue ; texte vert
(5) Couleur du fond, des bordures et du texte des zones de saisie
.newLoginBody .evsmLogin input {
 background-color: lightcyan;
 border: 2px solid blue;
 color: yellowgreen;
}

Lien Forgot your password

Élément formatable / Instructions CSS Représentation
(6) Couleur du libellé du lien Forgot your password
.newLoginBody .forgotPassword {
 color: red;
}

Connexion page - Link password.png

exemple

  • libellé lien : rouge

Bouton OK

Mode Inactif

Note : L'utilisateur n'a pas cliqué sur le bouton OK

Élément formatable / Instructions CSS Représentation

(7) Couleur du fond du bouton

(8) Couleur du libellé du bouton

.newLoginBody #loginform .validate{
 background-color: blue;
 color: orange;
}

Connexion page - OK button - Inactive.png

exemple

  • couleur bouton : bleu
  • libellé bouton : orange

Mode Survol

Note : L'utilisateur survole avec la souris le bouton OK

Élément formatable / Instructions CSS Représentation

(9) Couleur du fond du bouton

(10) Couleur du libellé du bouton

.newLoginBody #loginform .validate:hover {
 background-color: yellow;
 color: red;
}

Connexion page - OK button - Hover.png

exemple

  • couleur bouton : jaune
  • libellé bouton : rouge

Version

Élément formatable / Instructions CSS Représentation
(11) Couleur de la ligne de version
.newLoginBody .aboutVersion span {
 color: green;
}

Connexion page - Versioning.png

exemple

  • texte : vert

Bandeau supérieur

Configuration par défaut

       Top banner.png

Propriétés générales

Élément formatable / Instructions CSS Représentation
(1) Couleur de fond du bandeau
ezv-main-header .main-header{
   background: red;
}

Top banner - Background color.png

exemple

  • fond : rouge

Zone de recherche

Mode Inactif

Note : L'utilisateur n'a pas cliqué dans la zone

Élément formatable / Instructions CSS Représentation
(2) Couleur de fond de la zone
.form-control {
   background: blue !important;
}

Top banner - Search and placeholder - Inactive.png

exemple

  • fond : bleu
  • texte : blanc
  • bordure basse : jaune
(3) Couleur du placeholder

Note : Texte affiché dans la zone de recherche, qui est automatiquement effacé dès que l'utilisateur commence sa saisie

Utilisez le code CSS correspondant à votre navigateur.

/* Définition générale */
.navbar-search .form-control::placeholder {
 color: white !important;
 opacity: 1;
}
/* Navigateurs Chrome / Opera / Safari */
.navbar-search .form-control::-webkit-input-placeholder {
 color: white !important;
 opacity: 1;
}
/* Navigateurs Edge */
.navbar-search input.form-control::-ms-input-placeholder{
 color: white !important;
 opacity: 1;
}
(4) Couleur de la bordure basse
ezv-main-header .navbar-search.expanded input {
   border-bottom: 1px solid yellow;
}

Mode Actif

Note : L'utilisateur a cliqué dans la zone, mais n'a pas commencé sa saisie

Élément formatable / Instructions CSS Représentation
(5) Couleur de fond de la zone
.form-control:focus {
   background: yellow !important;
}

Top banner - Search and placeholder - Active.png

exemple

  • fond : jaune
  • texte : bleu
  • bordure basse : vert
(6) Couleur du placeholder

Note : Texte affiché dans la zone de recherche, qui est automatiquement effacé dès que l'utilisateur commence sa saisie

Utilisez le code CSS correspondant à votre navigateur.

/* Définition générale */
.navbar-search .form-control:focus::placeholder {
 color: blue !important;
 opacity: 1;
}
/* Navigateurs Chrome / Opera / Safari */
.navbar-search .form-control:focus::-webkit-input-placeholder {
 color: blue !important;
 opacity: 1;
}
/* Navigateurs Edge */
.navbar-search input.form-control:focus::-ms-input-placeholder{
 color: blue !important;
 opacity: 1;
}
(7) Couleur de la bordure basse
ezv-main-header .form-group > .form-control:focus {
 border-color: green !important;
 border-width: 2px;
}

Mode Saisie

Note : L'utilisateur a cliqué dans la zone, et a commencé sa saisie

Élément formatable / Instructions CSS Représentation
(8) Couleur de fond de la zone
.form-control:focus {
   background: yellow !important;
}

Top banner - Search and placeholder - Active and Entry.png

exemple

  • fond : jaune
  • texte saisi : rouge
  • bordure basse : orange
(9) Couleur du texte saisi
#slash-input,
#cmd-auto-complete_value,
#auto-complete_value {
color: red !important;
}
(10) Couleur de la bordure basse
#slash-input:focus,
#cmd-auto-complete_value:focus,
#auto-complete_value:focus {
 border-bottom-color: orange !important;
 border-bottom-width: 2px;
}

Zone de notification

Mode Inactif

Note : L'utilisateur n'a pas cliqué dans la zone

Élément formatable / Instructions CSS Représentation

Icône   Bullet counter icon.png

(1) Couleur de fond de l'icône

(2) Couleur de l'icône

ezv-main-header .header-nav > li > a.btn-default{
background-color: grey !important;
color: yellow !important;
}

Top banner - Notification - Inactive.png

exemple

  • fond : gris
  • icône : jaune

Mode Survol

Note : L'utilisateur survole avec la souris un compteur

Élément formatable / Instructions CSS Représentation

Icône   Bullet counter icon.png

(3) Couleur de fond de l'icône

(4) Couleur de l'icône

ezv-main-header .header-nav > li > a.btn-default:hover:enabled{
background-color: black !important;
color: orange !important;
}

Top banner - Notification - Hover.png

exemple

  • fond : noir
  • icône : orange

Compteur   Counter icon.png

(5) Couleur de fond du compteur

(6) Couleur du nombre

.badge.style-info,
.badge.style-success,
.badge.style-danger,
.badge.style-warning{
background-color: black !important;
}
.btn-default .badge{
color: yellow !important;
}

Top banner - Notification - Counter.png

exemple

  • fond : noir
  • nombre : jaune

Zone Informations utilisateur

Note : Les informations Nom, Profil, Domaine, Icône Liste V sont toujours visibles. Des informations complémentaires sont affichées via la liste V.

Propriétés générales

Élément formatable / Instructions CSS Représentation
(1) Bordures de la zone
ezv-main-header .header-nav.header-nav-profile .dropdown > a {
   border-top: 1px solid yellow;
   border-left: 1px solid yellow;
   border-right: 1px solid yellow;
   background: transparent;
}

Top banner - User information - Border color.png

exemple

  • bordures : jaune

Best Practice icon.png Si vous utilisez une couleur de fond dans le bandeau supérieur (propriété . main-header), masquez les bordures de la zone. Pour cela, appliquez la couleur de fond transparent dans l'instruction ci-dessus (background: transparent;).

Top banner - User information - Border color - Transparent.png

exemple

  • fond bandeau : rouge
  • bordures : transparentes

Note : Si la photo de l'utilisateur n'est pas affichée, un avatar est généré automatiquement. Il s'agit d'une image que vous ne pouvez pas modifier.

Top banner - User information - Avatar.png

Mode Inactif

Note : L'utilisateur n'a pas affiché le contenu de la zone et ne la survole pas avec la souris.

Élément formatable / Instructions CSS Représentation
(2) Couleur du nom de l'utilisateur
ezv-main-header .header-nav.header-nav-profile .dropdown a h5{
 color: yellow ;
}

Top banner - User profile - Inactive.png

exemple

  • nom utilisateur : jaune
  • libellés du profil et du domaine : noir
  • icône Liste V : bleu
(3) Couleur des libellés du profil et du domaine
ezv-main-header .header-nav.header-nav-profile .dropdown a h6{
 color: black ;
}
(4) Couleur de l'icône Liste V
ezv-main-header .header-nav.header-nav-profile > li.dropdown a.dropdown-toggle::after{
 color: blue !important;
}

Mode Survol

Note : L'utilisateur survole la zone avec la souris.

Élément formatable / Instructions CSS Représentation
(5) Couleur des bordures et du fond de la zone
ezv-main-header .header-nav.header-nav-profile .dropdown > a:hover {
   border-top: 1px solid transparent;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   background: yellow;
}

Top banner - User profile - Hover.png

exemple

  • fond : jaune
  • nom utilisateur : rouge
  • libellés du profil et du domaine : vert
  • icône Liste V : orange
(6) Couleur du nom de l'utilisateur
ezv-main-header .header-nav.header-nav-profile .dropdown a:hover h5{
 color: red;
}
(7) Couleur des libellés du profil et du domaine
ezv-main-header .header-nav.header-nav-profile .dropdown a:hover h6{
 color: green;
}
(8) Couleur de l'icône Liste V
ezv-main-header .header-nav.header-nav-profile > li.dropdown a:hover.dropdown-toggle::after{
color: orange !important;
}

Mode Actif

Note : L'utilisateur a affiché le contenu de la zone via l'icône Liste V.

Élément formatable / Instructions CSS Représentation
(9) Couleur des bordures et du fond de la zone
ezv-main-header .header-nav.header-nav-profile .dropdown.show > a{
   border-top: 1px solid transparent;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   background: yellow;
}

Top banner - User profile - Active.png

exemple

  • fond : jaune
  • nom utilisateur : rouge
  • libellés du profil et du domaine : vert
  • icône Liste V : orange
(10) Couleur du nom de l'utilisateur
ezv-main-header .header-nav.header-nav-profile .dropdown.show a h5{
 color: red;
}
(11) Couleur des libellés du profil et du domaine
ezv-main-header .header-nav.header-nav-profile .dropdown.show a h6{
 color: green;
}
(12) Couleur de l'icône Liste V
ezv-main-header .header-nav.header-nav-profile > li.dropdown.show a.dropdown-toggle::after{
color: orange !important;
}
Tags:
Modifié par Christine Daussac le 2021/02/03 19:29
Créé par Administrator XWiki le 2014/01/22 15:54

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help
•  Service Bots

Glossaire

Powered by XWiki ©, EasyVista 2021