General
Iterop allows you to override the CSS of the application to, for example, change the color theme and adapt it to the graphic charter of your company. For this, you need some knowledge of CSS and generic text editors in order to be able to edit code.
Here are the areas that you can customize:
- The color of the background.
- The color of the login button / the color of the hover login button.
- The color of the text.
- The presentation image on the right side of the page.
- The logo.
- The color of the background.
- The color of the tab being browsed.
- The color of the text.
- The color of the buttons / the color of the buttons on hovering.
Personalize your Iterop space
To modify the CSS and add your own or your company’s CSS :
- Go to the Administration tab.
- Select the insert CSS Personnel :
- Click on the button Edit Personal CSS to edit your CSS. An editing window opens.
- Write or copy-paste from an external editor the CSS code in the text block
- Validate by clicking on OK
- Activate the CSS overload by checking the box
- The change is effective immediately. You can refresh the page by deleting the data from the cache (ctrl + F5).
To efficiently modify the CSS of the application, you can use the keyword !important in the CSS attributes to override the standard CSS. To find out the names of the html classes to be modified, use a development tool integrated into your web browser.
Help with customization
All the information to access the logo customization space in the application can be found on this page.
Below you will find blocks of example codes. Once customized in an external CSS code editor, it must be copied and pasted into the CSS interface of your instance.
the variables related to the chosen colors to be replaced are color1, color2, color1_dark and color1_light
As this is a customization for your instance, we cannot commit to long-term systematic accounting for future upgrades. It will be up to you to develop your customization if necessary.
Menu Customization
/** Les couleurs du menu */
body .menu {
background: [#color1];
}
body .menu .v-label-nameApp {
color: [#color1];
}
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: [#color2];
}
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;
}
Login customization
/** Le login */
body .login-view,
body .login-view div.authentication-core {
background-color: [#color1];
}
body .iteropdesign .login-view,
body .iteropdesign .login-view div.authentication-core {
background-color: [#color1_dark];
}
body .login-view div.authentication-core .v-button.log-me {
background: [#color2];
}
Button customization
/** Les boutons */
body div.button-iterop, body div.v-button {
background-color: [#color1];
}
body div.button-iterop:hover, body div.v-button:hover {
background-color: [#color1_light];
}
Customization of external tasks
/** External */
body .iteropexternal .header,
body .iteropexternal .footer {
background-color: [#color1];
}
Table customization
/** Les tables */
body .v-table tr.v-selected, body .v-table tr.v-selected:hover {
background-color: [#color1];
}
