Customize the ev|Service Engine CSS Stylesheet


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.

Each of the three accounts on each Product name - ev itsm.png 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 Product name - ev itsm.png for optimal performance when displaying pages.
  • "customer_optimized.css" stylesheet: A stylesheet that can be customized by customers who want to modify the Product name - ev itsm.png graphic interface, i.e. colors and text in the login page, menus, Home page, etc.
EndStyleSheetsDefinition

Notes

  • CSS stylesheets are found in the "www\Styles\Easyvista" folder.
  • 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 Product name - ev itsm.png pages.
  • The most frequently used classes and IDs are described below.

Caution

  • Users must be familiar with HTML and CSS before they can configure CSS stylesheets.
  • The Logo - EasyVista.png 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.
     

Description of CSS stylesheets

   Open url.png See the description of the interface Product name - ev itsm.png

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 2018/11/16 18:51
Created by Administrator XWiki on 2014/01/22 15:54

Shortcuts

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2018