Customize the Service Manager CSS Stylesheet - Characteristics specific to versions 2016 and earlier


GraphicalInterface_2016AndPriorVersions

Note: This graphical user interface is specific to Product name - ev itsm.png version 2016 and earlier.

Open url.png See Customize the Service Manager CSS Stylesheet - latest version.

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.
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. 

Customization of the customer_optimized.css stylesheet

  • 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


.loginBox .login_top {
color: #10A2D3;
/* Text colour "IDENTIFICATION" */
background-color: #FFFFFF;
/* Background colour behind the text "IDENTIFICATION" */
}

.loginBox .login_topline {
background-color: #7DC242;
/* Horizontal bar on the right of the text "IDENTIFICATION" */
}

.loginBox .login_informations {
background-color: #10A2D3;
/* Background colour behind the information (Version and Date) */
color: #FFFFFF;
/* Text colour for this information */
}

.loginBox .login_outline {
border-color: #10A2D3;
/* Colour of frame */
border-width: 1px;
(% style="color:#38761d;" %)/* Thickness of frame */
border-style: solid;
/* Type of frame */
}

.loginBox .login_bgcolor {
background-color: #FFFFFF;
/* Background colour within the frame */
}

.loginBox .login_bottom {
background-color: #10A2D3;
/* Background colour in the lower part, behind the information (Version and Date) */
}

.loginBox .login_logo {
border-left: 1px solid #CFCFCF;
/* Vertical bar to the left of the logo */
}

.loginBox .login_messages {
color: red;
/* Colour of the error messages on the authentication page */
}

.loginBox .login_button {
border: 1px solid #999999;
/* Frame for the "OK" button */
border-top: 1px solid #a1a1a1;
/* Frame (top) for the "OK" button */
background: #E6E6E6;
/* Background colour of the "OK" button */
width: 100px;
/* Width of the "OK" button */
height: 20px;
/* Height of the "OK" button */
}

.loginBox .login_button input {
background: #E6E6E6;
/* Background colour behind the text "OK" */
color: #363636;
/* Colour of the text "OK" */
}

Modules and menus


.tabUnSelected , .tabUnSelected a {
background-color: #FFFFFF;
/* Background colour on the active module */
/* CAUTION: this is almost the same class as for the background colour behind "INFORMATION" on the label giving the user's information */
}

.menu_separator_actif {
background-color: #FFFFFF;
color: #FFFFFF;
/* Colour of the module separator on either side of the active module */
}

Left pane


.splitter_content_left {
background-color: #E4E4E4;
/* Background colour of the left part */
}

.modules_header {
background-color: #E4E4E4;
/* Background colour of the titles of the left menus ("My favourites", "My history" and "Menus" when connected with a profile that has only one module) */
text-align: left;
/* Alignment of these titles */
}

.modules_content {
background-color: #E4E4E4;
/* Background colour of the elements in the left part (background of the overall search, the favourites and the elements present in the history) */
}

.modules_header .label_bloc,
.modules_header .label_bloc a,
.modules_header .label_bloc a:link,
.modules_header .label_bloc a:visited,
.modules_header .label_bloc a:hover {
color: #088BC3;
/* Colour of the titles in the left menus */
}

.modules_header .label_bloc a.pseudo_link2,
.modules_header .label_bloc a.pseudo_link2:link,
.modules_header .label_bloc a.pseudo_link2:visited,
.modules_header .label_bloc a.pseudo_link2:hover {
color: #088BC3;
/* Colour of the links alongside the titles for the left menus */
}

.modules,
.modules a,
.modules a:link,
.modules a:visited,
.modules a:hover {
color: #3A3A3A;
/* Colour of the titles of the menus (without sub-menus) on the menus on the left part (when connected with a profile that only has a single module) */
}

Level 1 menus


table.menuNiv1, table.menuNiv1Hidden {
background-color: #FFFFFF;
/* Background colour of menus on the horizontal banner (upper part) */
}

table.menuNiv1 a:hover, table.menuNiv1 td.parentSelected a, table.menuNiv1Fix a:hover, table.menuNiv1Fix td.parentSelected a {
background-color:#AEDA0E;
/* Background colour of the menus (WITHOUT sub-menus) when the mouse hovers over them */
color:#000000 !important;
/* Colour of the text for the menus (WITH OR WITHOUT sub-menus) when the mouse hovers over them */
}

table.menuNiv1 table.left td.parentSelected a, table.menuNiv1Fix table.left td.parentSelected a {
background-color:#AEDA0E;
/* Background colour of the menus (WITH sub-menus) when the mouse hovers over them */
}

Level 2 menus


table.menuNiv2, table.menuNiv2Hidden {
background-color: #FFFFFF;
/* Background colour of the sub-menus (level 2) */
}

table.menuNiv2 a {
color:#051039;
/* Colour of the text for the sub-menus (level 2) */
}

table.menuNiv2 a:hover, table.menuNiv2 td:hover {
background-color:#AEDA0E;
/* Background colour of the sub-menus (level 2) when the mouse hovers over them */
color:#051039 !important;
/* Text colour of the sub-menus (level 2) when the mouse hovers over them */
}

Discussions banner in the Home page


.DIV_GRID_CAPTION {
background-color: #E4E4E4;
/* Background colour for the banner on the home pages containing "Home", "All discussions", "My discussions" */
}

.dialog_main_section_title, .dialog_main_section_title a {
color: #000000;
/* Text colour for the active element on the home page ("Home", "All discussions", "My discussions") */
}

.dialog_main_section_title_unselected, .dialog_main_section_title_unselected a {
color: #10A2D3;
/* Text colour for the inactive elements on the home page ("Home", "All discussions", "My discussions") */
}

News articles pane in the Home page


.news_content {
font-family: Arial;
font-size: 1em;
padding-left: 5px;
}

Titles


.post {
margin: 0px 0px 5px 0px;
/* Margins around each news item top-right-bottom-left) */
}

.post-titre table {
margin: 5px 0 5px 0;
/* Margins around each element: header of schedule, schedule, etc... (top-right-bottom-left) */
}

.post-titre .td_titre {
font-family: Arial, Verdana;
/* Font for titles for the news */
font-size: 14px;
/* Font size for titles for the news */
font-weight: bold;
/* Style of titles for the news */
color: #880000;
/* Colour of titles for the news */
text-transform: uppercase;
/* Case of titles for the news */
}

.post-titre .separator {
font-size: 18px;
/* Size of vertical separator between the title and the date */
color: #838383;
/* Colour of vertical separator between the title and the date */
}

.post-titre .jj {
font-family: Arial, Verdana;
/* Font for publication dates for news items */
font-size: 14px;
/* Size of publication dates for news items */
font-weight: bold;
/* Style of publication dates for news items */
color: #838383;
/* Colour of publication dates for news items */
}

Content


.post-contenu {
font-family: Trebuchet MS, Arial, Verdana;
/* Font for news content */
font-size: 1em;
/* Size of font for news content */
color:#3A3A3A;
/* Colour of news content */
}

.post-contenu a,
.post-contenu a:link,
.post-contenu a:visited,
.post-contenu a:hover {
color: #A80091;
/*Colour of links within news */
cursor: pointer;
}

Notification bar


#notificationToolbarContent, #notificationToolbarContentReduce {
background:url(./notification/images/fond.png) repeat-x right bottom;
/* Background image for the DashBoard (Take care with transparency on the upper part of the image) */
}

#notificationToolbarContent .separator {
background:url(./notification/images/separator-sans.png) no-repeat center center;
/* Image acting as a separator between the different elements of the DashBoard */
}

#notificationToolbarContent .reduce img {
cursor: pointer;
/* Adds attribute so that the mouse takes the form of a pointer on the image, allowing the size of the notification bar to be reduced */
}

#notificationToolbarContentReduce .reduce img {
cursor: pointer;
/* Adds attribute so that the mouse takes the form of a pointer on the image, allowing the notification bar to be displayed */
}

Notification counters


.notificationDialog {
background-color: #FFFFFF;
/* Background colour of the labels on the counters on the DashBoard */
font-size: 1em;
/* Size of the text in the labels on the counters on the DashBoard */
}

.notificationDialog .label_bloc a,
.notificationDialog .label_bloc a:link,
.notificationDialog .label_bloc a:visited,
.notificationDialog .label_bloc a:hover {
color: #000000;
/* Colour of the links (titles) in the labels on the counters on the DashBoard ("THE ACTIONS OF MY GROUPS"…) */
text-decoration: underline;
/* Style of the links (titles) in the labels on the counters on the DashBoard ("THE ACTIONS OF MY GROUPS"…) */
cursor: pointer;
/* Appearance of the mouse when hovering over the links on the counters on the DashBoard ("THE ACTIONS OF MY GROUPS"…) */
}

.notificationDialog  .pictureSize {
cursor: pointer;
/* Appearance of the mouse when hovering over the icons ("Magnifying glass" and "Hand") on the DashBoard */
}

.notificationDashboardValue_lt_9 {
color: #FFFFFF;
/* Colour of the numbers within the counters (when they are between 0 and 9) */
}

.notificationDashboardValue_gte_9 {
color: #FFFFFF;
/* Colour of the numbers within the counters (when they are between 10 and 99) */
}

Front Office and Discussions infotips


.topBarDefault {border-top-color: #007317;border-bottom-color: #007317;border-left-color: #007317;border-right-color: #007317;}
.bottomBarDefault {border-top-color: #007317;border-bottom-color: #007317;border-left-color: #007317;border-right-color: #007317;}
.leftBarDefault {border-top-color: #007317;border-bottom-color: #007317;border-left-color: #007317;border-right-color: #007317;}
.rightBarDefault {border-top-color: #007317;border-bottom-color: #007317;border-left-color: #007317;border-right-color: #007317;}

.notificationDashboardImgDefault {
background-color: #007317;
border: 1px solid #00490F;
cursor: pointer;
}

To Do infotip


.topBarBlue {border-top-color: #000000;border-bottom-color: #000000;border-left-color: #000000;border-right-color: #000000;}
.bottomBarBlue {border-top-color: #000000;border-bottom-color: #000000;border-left-color: #000000;border-right-color: #000000;}
.leftBarBlue {border-top-color: #000000;border-bottom-color: #000000;border-left-color: #000000;border-right-color: #000000;}
.rightBarBlue {border-top-color: #000000;border-bottom-color: #000000;border-left-color: #000000;border-right-color: #000000;}

.notificationDashboardImgBlue {
background-color: #333333;
border: 1px solid #000000;
cursor: pointer;
}

Late Actions infotip


.topBarRed {border-top-color: #930000;border-bottom-color: #930000;border-left-color: #930000;border-right-color: #930000;}
.bottomBarRed {border-top-color: #930000;border-bottom-color: #930000;border-left-color: #930000;border-right-color: #930000;}
.leftBarRed {border-top-color: #930000;border-bottom-color: #930000;border-left-color: #930000;border-right-color: #930000;}
.rightBarRed {border-top-color: #930000;border-bottom-color: #930000;border-left-color: #930000;border-right-color: #930000;}

.notificationDashboardImgRed {
background-color: #930000;
border: 1px solid #400000;
cursor: pointer;
}

Actions for My Groups infotip


.topBarOrange {border-top-color: #DB590D;border-bottom-color: #DB590D;border-left-color: #DB590D;border-right-color: #DB590D;}
.bottomBarOrange {border-top-color: #DB590D;border-bottom-color: #DB590D;border-left-color: #DB590D;border-right-color: #DB590D;}
.leftBarOrange {border-top-color: #DB590D;border-bottom-color: #DB590D;border-left-color: #DB590D;border-right-color: #DB590D;}
.rightBarOrange {border-top-color: #DB590D;border-bottom-color: #DB590D;border-left-color: #DB590D;border-right-color: #DB590D;}

.notificationDashboardImgOrange {
background-color: #DB590D;
border: 1px solid #541C00;
cursor: pointer;
}

News articles


.notificationNewsImg {
background-color: #666666;
/* Background colour of the news counter */
border: 1px solid #000000;
/* Border of the news counter */
}

.notificationNewsValue_lt_100 {
color: #FFFFFF;
/* Colour of the numbers in the news counter */
font-size: 14px;
/* Colour of the numbers in the news counter */
}

#notificationNewsContainer .newsTop {
background-color: #BBBBBB;
/* Background colour of the news titles on the DashBoard (1/2) */
border: 1px dotted #000000;
/* Border around the news titles on the DashBoard (1/2) */
}

#notificationNewsContainer .newsTop .content {
color: #000000;
/* Text colour of the news titles on the DashBoard (1/2) */
}

User information zone


.userNameAnchor {
background-color: #FFFFFF;
/* Background colour of the name of the connected user */
border: 1px solid #CCCCCC;
/* Border around the name of the connected user */
padding-top: 1px;
padding-left: 5px;
padding-bottom: 1px;
padding-right: 0px;
/* Margin adjustment */
}

.userImg {
border: 1px solid #CCCCCC;
/* Border around the image of the connected user */
}

Infotip management

Note: When the mouse rolls over the name.


#cluetip .ui-widget-content {
border: 1px solid #333333;
/* Border around the label on information about the connected user */
background: #DDDDDD;
/* Background colour of the label on information about the connected user */
/* "background" only and not "background-color" so as not to include the transparent image acting as background... */
}

#cluetip .tabUnSelected {
background-color: #DDDDDD;
/* Background colour behind the "INFORMATION" text */
/* CAUTION: this is almost the same class as for the background colour on the active module! */
}

#cluetip .modules_bg {
border: 1px solid #BBBBBB;
/* Border around the information on the connected user */
background-color: #FFFFFF;
/* Background colour of information on the connected user */
padding: 2px;
/* Margin adjustment */
}

#cluetip .line_over {
background-color: #DDDDDD;
/* Background colour when the mouse passes over the links ("My details" and "Change my password" */
}

Associate a different style from the standard style with an account

To update the style in the base, run the queries bellow.

Replace the following variables with your own values:

  • your_path: directory name you want to create. Caution: The name is case-sensitive.
  • label_to_translate: label you want to translate.
  • translated_label_...: labels in the different languages supported on your platform.
     
INSERT INTO [EVO_ADMIN].[EZV_ADMIN].[A_STYLE]
           ([STYLE_ID]
           ,[RELATIVE_PATH]
           ,[LABEL_EN]
           ,[LABEL_FR]
           ,[LABEL_SP]
           ,[LABEL_GE]
           ,[LABEL_IT]
           ,[LABEL_PO]
           ,[LABEL_L1]
           ,[LABEL_L2]
           ,[LABEL_L3]
           ,[LABEL_L4]
           ,[LABEL_L5]
           ,[LABEL_L6])
    VALUES
           (newid()
           ,'your_path'
           ,'label_to_translate', --[LABEL_EN]
          ,'translated_label_fr'  --<LABEL_FR, nvarchar(255),>
          ,'translated_label_sp'  --<LABEL_SP, nvarchar(255),>
          ,'translated_label_ge'  --<LABEL_GE, nvarchar(255),>
          ,'translated_label_it'  --<LABEL_IT, nvarchar(255),>
          ,'translated_label_po'  --<LABEL_PO, nvarchar(255),>
          ,'translated_label_l1'  --<LABEL_L1, nvarchar(255),>
          ,'translated_label_l2'  --<LABEL_L2, nvarchar(255),>
          ,'translated_label_l3'  --<LABEL_L3, nvarchar(255),>
          ,'translated_label_l4'  --<LABEL_L4, nvarchar(255),>
          ,'translated_label_l5'  --<LABEL_L5, nvarchar(255),>
          ,'translated_label_l6'  --<LABEL_L6, nvarchar(255),>
          )
UPDATE [EVO_ADMIN].[EZV_ADMIN].[a_company]
SET    [style_id] = (SELECT [style_id]
                    FROM   [EVO_ADMIN].[EZV_ADMIN].[a_style]
                    WHERE  [relative_path] = 'your_path')
Tags:
Last modified by Unknown User on 2019/11/29 20:02
Created by Administrator XWiki on 2018/12/24 15:56

Shortcuts

Powered by XWiki ©, EasyVista 2021