Customize the Service Manager CSS Stylesheets
Definition
A CSS stylesheet is a file containing a set of properties used to define the visual layout of an app, i.e. colors, borders, font, etc.
EndDefinition
Each of the three accounts on each Service Manager platform includes three CSS stylesheets:
StyleSheetsDefinition
- optimized.css stylesheet: Used to view the entire CSS stylesheet in a structured way.
- optimized.min.css stylesheet: Contains the same data as the "optimized.css" stylesheet but in a more compact format. This ensures that it will be read faster by Service Manager for optimal performance when displaying pages.
- customer_optimized.css stylesheet: A stylesheet that can be customized by customers who want to modify the Service Manager graphic interface, i.e. colors and text in the login page, menus, Home page, etc.
EndStyleSheetsDefinition
StyleSheetsNotes
Notes
- Only the customer_optimized.css stylesheet can be customized. It is not modified after patches are installed and is always read after the optimized.min.css stylesheet when displaying Service Manager pages.
- CSS stylesheets are found in the www\Styles\Easyvista folder.
EndStyleSheetsNotes
StyleSheetsCaution
Caution
- Users must be familiar with HTML and CSS before they can configure CSS stylesheets.
- The EasyVista Support team does not manage issues related to the customization of a stylesheet and its impact on customer platforms.
- The optimized.css and optimized.min.css stylesheets must not be modified because they are overwritten each time patches are installed and the platform is migrated.
EndStyleSheetsCautions
Characteristics specific to versions 2016 and earlier
The customer_optimized.css CSS stylesheet in versions 2016 and earlier is different about its customization.
See:
Customization of the customer_optimized.css stylesheet
- The default configuration is delivered with the Service Manager installation.
- You can change some elements to define your own settings. Note: Only the most frequently used classes and IDs are described below.
See the description of the Service Manager interface
Login page
Default configuration
Logo
Element you can format / CSS Instructions | Representation | |
---|---|---|
(1) Path of the Service Manager logo …/login/logo_ezv.png |
Background and borders
Element you can format / CSS Instructions | Representation | |
---|---|---|
(2) Outside of frame .form-control { background: blue !important; } |
example
|
|
(3) Within the frame .newLoginBody .evsmLogin { background: lightgrey; border: 2px solid blue; } |
Login information
Element you can format / CSS Instructions | Representation | |
---|---|---|
(4) Color of the field labels .newLoginBody .evsmLogin label { color: orange; } |
example
|
|
(5) Background color and border color of the input fields .newLoginBody .evsmLogin input { background-color: lightcyan; border: 2px solid blue; } |
Forgot your password link
Element you can format / CSS Instructions | Representation | |
---|---|---|
(6) Color of the Forgot your password link label .newLoginBody .forgotPassword { color: red; } |
example
|
OK button
Inactive mode
Note: The user didn't click on the OK button
Element you can format / CSS Instructions | Representation | |
---|---|---|
(7) Background color of the button (8) Label color of the button .newLoginBody #loginform .validate{ background-color: blue; color: orange; } |
example
|
Hover mode
Note: The user moved the mouse on the OK button
Element you can format / CSS Instructions | Representation | |
---|---|---|
(9) Background color of the button (10) Label color of the button .newLoginBody #loginform .validate:hover { background-color: yellow; color: red; } |
example
|
Versioning
Element you can format / CSS Instructions | Representation | |
---|---|---|
(11) Color of the versioning line .newLoginBody .aboutVersion span { color: green; } |
example
|
Top banner
Default configuration
General properties
Element you can format / CSS Instructions | Representation | |
---|---|---|
(1) Background color of the banner ezv-main-header .main-header{ background: red; } |
example
|
Search zone
Inactive mode
Note: The user didn't click on the zone
Element you can format / CSS Instructions | Representation | |
---|---|---|
(2) Background color of the zone .form-control { background: blue !important; } |
example
|
|
(3) placeholder color
Note: The text displayed in the search field is automatically cleared once the user starts typing. Use the CSS code matching your browser. /* 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) Bottom border color ezv-main-header .navbar-search.expanded input { border-bottom: 1px solid yellow; } |
Active mode
Note: The user clicked on the zone, but he didn't begin to enter data
Element you can format / CSS Instructions | Representation | |
---|---|---|
(5) Background color of the zone .form-control:focus { background: yellow !important; } |
example
|
|
(6) placeholder color
Note: The text displayed in the search field is automatically cleared once the user starts typing. Use the CSS code matching your browser. /* General definition */ .navbar-search .form-control:focus::placeholder { color: blue !important; opacity: 1; } /* Chrome / Opera / Safari browsers */ .navbar-search .form-control:focus::-webkit-input-placeholder { color: blue !important; opacity: 1; } /* Edge browser */ .navbar-search input.form-control:focus::-ms-input-placeholder{ color: blue !important; opacity: 1; } |
||
(7) Color of the bottom border ezv-main-header .form-group > .form-control:focus { border-color: green !important; border-width: 2px; } |
Input mode
Note: The user clicked on the zone, and he began to enter data
Element you can format / CSS Instructions | Representation | |
---|---|---|
(8) Background color of the zone .form-control:focus { background: yellow !important; } |
example
|
|
(9) Color of the input text #slash-input, #cmd-auto-complete_value, #auto-complete_value { color: red !important; } |
||
(10) Color of the bottom border #slash-input:focus, #cmd-auto-complete_value:focus, #auto-complete_value:focus { border-bottom-color: orange !important; border-bottom-width: 2px; } |
Notification zone
Inactive
Note: The user didn't click on the zone
Element you can format / CSS Instructions | Representation | |
---|---|---|
|
||
(1) Background color of the icon (2) Color of the icon ezv-main-header .header-nav > li > a.btn-default{ background-color: grey !important; color: yellow !important; } |
example
|
Hover mode
Note: The user moved the mouse on a counter
Element you can format / CSS Instructions | Representation | |
---|---|---|
|
||
(3) Background color of the icon (4) Color of the icon ezv-main-header .header-nav > li > a.btn-default:hover:enabled{ background-color: black !important; color: orange !important; } |
example
|
|
|
||
(5) Background color of the counter (6) Number color .badge.style-info, .badge.style-success, .badge.style-danger, .badge.style-warning{ background-color: black !important; } .btn-default .badge{ color: yellow !important; } |
example
|
User information zone
Note: The Name, Profile, Domain, V list icon are always visible. Additional information can be displayed via the V list.
General properties
Element you can format / CSS Instructions | Representation | |
---|---|---|
(1) Borders of the 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; } |
example
|
|
|
example
|
|
Note: If the user photo isn't displayed, an avatar is generated automatically. This is a picture and you can not update it. |
|
Inactive mode
Note: The user didn't displayed the content of the zone and he didn't move the mouse on it.
Element you can format / CSS Instructions | Representation | |
---|---|---|
(2) Color of user name ezv-main-header .header-nav.header-nav-profile .dropdown a h5{ color: yellow ; } |
example
|
|
(3) Color of profile and domain labels ezv-main-header .header-nav.header-nav-profile .dropdown a h6{ color: black ; } |
||
(4) Color of V list icon ezv-main-header .header-nav.header-nav-profile > li.dropdown a.dropdown-toggle::after{ color: blue !important; } |
||
Hover mode
Note: The user is moving the zone with the mouse.
Element you can format / CSS Instructions | Representation | |
---|---|---|
(5) Border and background color of the 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; } |
example
|
|
(6) User name color ezv-main-header .header-nav.header-nav-profile .dropdown a:hover h5{ color: red; } |
||
(7) Color of profile and domain labels ezv-main-header .header-nav.header-nav-profile .dropdown a:hover h6{ color: green; } |
||
(8) Color of the V list icon ezv-main-header .header-nav.header-nav-profile > li.dropdown a:hover.dropdown-toggle::after{ color: orange !important; } |
||
Active mode
Note: The user displayed the content of the zone via the V list icon.
Element you can format / CSS Instructions | Representation | |
---|---|---|
(9) Border and background color of the zone ezv-main-header .header-nav.header-nav-profile .dropdown.show > a:hover { border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; background: yellow; } |
example
|
|
(10) User name color ezv-main-header .header-nav.header-nav-profile .dropdown.show a h5{ color: red; } |
||
(11) Color of profile and domain labels ezv-main-header .header-nav.header-nav-profile .dropdown.show a h6{ color: green; } |
||
(12) Color of the V list icon ezv-main-header .header-nav.header-nav-profile > li.dropdown.show a .dropdown-toggle::after{ color: orange !important; } |
||