Cool Solutions

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

Vaibhav Jain

By:

November 2, 2016 12:46 pm

Reads:2,929

Comments:0

Score:Unrated

Print/PDF

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

0 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 5 (0 votes, average: 0.00 out of 5)
You need to be a registered member to rate this post.
Loading...

Tags: , , , ,
Categories: Cool Tools, Service Desk, Technical, Unified Endpoint Management

0

Disclaimer: This content is not supported by Micro Focus. It was contributed by a community member and is published "as is." It seems to have worked for at least one person, and might work for you. But please be sure to test it thoroughly before using it in a production environment.

Comment

RSS