This document explains how to customize Micro Focus Service Desk Login and Logout screens.

The default view of Service Desk Login and Logout screens:

Login Screen:

Default Service Desk Login Screen

Logout Screen:

Default Service Desk Logout Screen

Login and Logout screens can be customized by any of the following:

• Customization through User Interface

• Customization through CSS Code in the CSS File

---

Customization through User Interface:

1. Login as an administrator.

• Choose Setup > Customize > CSS
  
  User Interface for CSS under Admin portal
  
  

  CSS : User Interface

  
  
  

• Copy the following code - CSS Classes
  
  

   /* This will change the color of main Login Panel */
  
  div.login-panel{
  background:#0d8dc9;
  }
  
  /* This will change the color and border-color of User Name, Password Panel, All the Input Fields and Select drop-down on the Login Page */
  
  .loginUserName, .loginPassword, .login-form.noline > input, .login-form .fieldpopup{
  background:# 0d8dc9;
  border-color:#23c7ff;
  }
  
  /* This will change the color of Left Expanded Panel */
  
  div.login-sidebardetail{
  background:#003768;
  }
  
  /* This will change the color of Left Closed/Compressed Panel */
  
  div.login-sidebarinfo {
  background: #003768 none repeat scroll 0 0;
  }
  
  /* This will change the color of backwardIcon Part and Color of forwardIcon Part */
  
  div.backwardIcon, div.forwardIcon {
  background-color: #003768;
  }

  
  

• Scroll-down to the end of CSS and paste.
  

• Replace the background to the required color or Hex code of it.
  
  For Example:
  
  If you want to change the color code for the main Login Panel with #2F4F4F, then perform the following:
  

  div.login-panel{
  background:#2F4F4F;
  }

  
  /* Replaced #0d8dc9 with HEX code #2F4F4F */
  
  

---

Customization through CSS Code in the CSS File:

You can customize the color of Login and Logout pages by changing the CSS code in the login-7.0.css file.

The login-7.0.css file is located at the following location:

Windows: C:\Program Files\ServiceDesk\Server\webapps\LiveTime\css

Linux: /usr/local/ServiceDesk/Server/webapps/LiveTime/css

Appliance: /srv/tomcat6/webapps/LiveTime/css

In the login-7.0.css file, add the following CSS at the end:

 /* This will change the color of main Login Panel */

div.login-panel{
background:#0d8dc9;
}

/* This will change the color and border-color of User Name, Password Panel, All the Input Fields and Select drop-down on the Login Page */

.loginUserName, .loginPassword, .login-form.noline > input, .login-form .fieldpopup{
background:# 0d8dc9;
border-color:#23c7ff;
}

/* This will change the color of Left Expanded Panel */

div.login-sidebardetail{
background:#003768;
}

/* This will change the color of Left Closed/Compressed Panel */

div.login-sidebarinfo {
background: #003768 none repeat scroll 0 0;
}

/* This will change the color of backwardIcon Part and Color of forwardIcon Part */

div.backwardIcon, div.forwardIcon {
background-color: #003768;
}

Replace the background as per the required color/HEX Code of the color.

The same will also modify the Logout page as per the Login Page.

---

For Example:

Following is the Customized CSS and Customized View of Login Page :

     /* This will change the color of main Login Panel */

div.login-panel{
background:#2F4F4F;
}

/* This will change the color and border-color of User Name, Password Panel, All the Input Fields and Select drop-down on the Login Page */

.loginUserName, .loginPassword, .login-form.noline > input, .login-form .fieldpopup{
background:#2F4F4F;
border-color:#418979;
}

/* This will change the color of Left Expanded Panel */

div.login-sidebardetail{
background:#418979;
}

/* This will change the color of Left Closed/Compressed Panel */

div.login-sidebarinfo {
background: #418979 none repeat scroll 0 0;
}

/* This will change the color of backwardIcon Part and Color of forwardIcon Part */

div.backwardIcon, div.forwardIcon {
background-color: #418979;
}

Customized Login Page

 

Customized Logout Screen