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

0 Likes
over 4 years ago
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.

  • Choose Setup > Customize > CSS

    User Interface for CSS under Admin portal

    CSS : User Interface 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 Login Page


 

Customized Logout Screen Customized Logout Screen


Labels:

How To-Best Practice
Comment List
Anonymous
Related Discussions
Recommended