Welcome Serena Central users! CLICK HERE
The migration of the Serena Central community is currently underway. Be sure to read THIS MESSAGE to get your new login set up to access your account.

Micro Focus Service Desk 7.2/7.3 - Customizing Login and Logout Screens

Micro Focus Service Desk 7.2/7.3 - Customizing Login and Logout Screens

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 Login Screen Default Service Desk Login Screen


Logout Screen:

Logout Screen Default Service Desk Logout Screen



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






Customization through User Interface:




  1. Login as an administrator.

  2. Choose Setup > Customize > CSS

    User Interface for CSS under Admin portal

    CSS : User Interface CSS : User Interface




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


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


  5. 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 Login Page


 

Customized Logout Screen Customized Logout Screen


DISCLAIMER:

Some content on Community Tips & Information pages is not officially supported by Micro Focus. Please refer to our Terms of Use for more detail.
Top Contributors
Version history
Revision #:
1 of 1
Last update:
‎2016-11-02 19:46
Updated by:
 
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.