Customize the Service Manager CSS Stylesheets

Last modified on 2022/08/01 17:32
Contents
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.

   Open url.png 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.

  Open url.png See the description of the Service Manager interface

Login page

Default configuration

        Connexion page.png

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;
}

Connexion page - Background box.png

example

  • outside the frame: cyan
  • within the frame: light grey; blue borders
(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;
}

Connexion page - Fields.png

example

  • field label: orange
  • input field: light cyan background; blue border
(5) Background color and border color of the input fields
.newLoginBody .evsmLogin input {
 background-color: lightcyan;
 border: 2px solid blue;
}
Element you can format / CSS Instructions Representation
(6) Color of the Forgot your password link label
.newLoginBody .forgotPassword {
 color: red;
}

Connexion page - Link password.png

example

  • link label: red

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;
}

Connexion page - OK button - Inactive.png

example

  • button color: blue
  • button label: orange

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;
}

Connexion page - OK button - Hover.png

example

  • button color: yellow
  • button label: red

Versioning

Element you can format / CSS Instructions Representation
(11) Color of the versioning line
.newLoginBody .aboutVersion span {
 color: green;
}

Connexion page - Versioning.png

example

  • text: green

Top banner

Default configuration

        Top banner.png

General properties

Element you can format / CSS Instructions Representation
(1) Background color of the banner
ezv-main-header .main-header{
   background: red;
}

Top banner - Background color.png

example

  • background: red

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;
}

Top banner - Search and placeholder - Inactive.png

example

  • background: blue
  • text: white
  • bottom border: yellow
(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;
}

Top banner - Search and placeholder - Active.png

example

  • background: yellow
  • text: blue
  • bottom border: green
(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;
}

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

example

  • background: yellow
  • input text: red
  • bottom border: orange
(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

Bullet counter icon.png   icon

(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;
}

Top banner - Notification - Inactive.png

example

  • background: grey
  • icon: yellow

Hover mode

Note: The user moved the mouse on a counter

Element you can format / CSS Instructions Representation

Bullet counter icon.png   icon

(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;
}

Top banner - Notification - Hover.png

example

  • background: black
  • icon: orange

Counter icon.png   counter

(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;
}

Top banner - Notification - Counter.png

example

  • background: black
  • number: yellow

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;
}

Top banner - User information - Border color.png

example

  • borders: yellow

Best Practice icon.png If you are using a background color for the top banner (. main-header property), you should hide the borders of the zone. To do that, apply the transparent background color in the above instruction (background: transparent;).

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

example

  • banner background: red
  • borders: transparent

Note: If the user photo isn't displayed, an avatar is generated automatically. This is a picture and you can not update it.

Top banner - User information - Avatar.png

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 ;
}

Top banner - User profile - Inactive.png

example

  • user name: yellow
  • labels of the profile and the domain: black
  • V list icon: blue
(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;
}

Top banner - User profile - Hover.png

example

  • background: yellow
  • user name: red
  • profile and domain labels : green
  • V list icon: orange
(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;
}

Top banner - User profile - Active.png

example

  • background: yellow
  • user name: red
  • profile and domaine labels: green
  • V icon list: orange
(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;
}
Tags:
Powered by XWiki © EasyVista 2022