Généralités
Iterop vous permet de surcharger le CSS de l’application pour, par exemple, changer le thème de couleur et l’adapter à la charte graphique de votre entreprise. Pour cela, il vous faut des notions de CSS et connaître les éditeurs de texte générique afin de pouvoir éditer du code.
Voici les zones que vous pouvez personnaliser :
- La couleur du fond.
- La couleur du bouton de connexion / la couleur du bouton de connexion au survol.
- La couleur du texte.
- L’image de présentation sur la droite de la page.
Personnaliser votre espace Iterop
Pour modifier le CSS et ajouter le vôtre ou celui de votre société :
- Allez dans l’onglet Administration
- Sélectionnez l’encart CSS Personnel :
- Cliquez sur le bouton Éditer le CSS personnel pour éditer votre CSS. Une fenêtre d’édition s’ouvre.
- Ecrivez ou copiez-collez depuis un éditeur externe le code CSS dans le bloc de texte
- Validez en cliquant sur OK
- Activez la surcharge CSS en cochant la case
- La modification est immédiatement effective. Vous pouvez rafraîchir la page en supprimant les données du cache (ctrl + F5).
Pour modifier efficacement le CSS de l’application, vous pouvez utiliser le mot-clé !important dans les attributs CSS afin de surcharger le CSS standard. Pour connaître le nom des classes html à modifier, utilisez un outil de développement intégré à votre navigateur internet.
Aide à la personnalisation
Toutes les informations pour accéder à l’espace de personnalisation du logo dans l’application se trouvent sur cette page.
Ci-après vous trouverez des blocs de codes d’exemples. Une fois personnalisé dans un éditeur externe de code CSS, il doit être copié-collé dans l’interface CSS de votre instance.
S’agissant d’une personnalisation pour votre instance, nous ne pouvons nous engager sur la comptabilité systématique à long terme pour les futures montées de version. Il vous appartiendra de faire évoluer votre personnalisation si nécessaire.
Personnalisation des menus
/** Les couleurs du menu */
body .menu {
background: pink;
}
body .menu .v-label-nameApp {
color: black;
}
body .menu .container-menu-button.button-selected,
body .no-touch .menu:hover .container-menu-button:hover,
body .no-touch .menu:hover .container-menu-button:focus {
background: blue;
}
body .no-touch .menu:hover .container-menu-button.button-selected span.fa,
body .menu .container-menu-button .v-label,
body .menu .container-menu-button a,
body .menu .container-menu-button.button-selected span.fa {
color: white;
}
body .menu .container-menu-button.button-selected {
border-left: 5px solid white;
}
Personnalisation des logins
/** Le login */
body .login-view,
body .login-view div.authentication-core {
background-color: pink;
}
body .iteropdesign .login-view,
body .iteropdesign .login-view div.authentication-core {
background-color: yellow;
}
body .login-view div.authentication-core .v-button.log-me {
background: grey;
}
Personnalisation des boutons
/** Les boutons */
body div.button-iterop, body div.v-button {
background-color: orange;
}
body div.button-iterop:hover, body div.v-button:hover {
background-color: red;
}
Personnalisation des tâches externes
/** External */
body .iteropexternal .header,
body .iteropexternal .footer {
background-color: green;
}
Personnalisation des tables
/** Les tables */
body .v-table tr.v-selected, body .v-table tr.v-selected:hover {
background-color: grey;
}
