Customizing the Portal Logins - Branding, Colors, Text, Typsets

  • 7025044
  • 11-Mar-2021
  • 25-Jun-2021

Environment

Service Desk 8.2

Situation

This information is to cover the general Portal Branding and additional details on branding that requires file modifications.

Standard Branding for the Customer and User (Technician) Portal colors text and templates
Modify Portal Login Pages with Legal Statement
Branding of the Portal Login & Password Placeholder text
Branding for the Customer and User (Technician) Portal Username/Password placeholder colors
Branding with Logos can be made by Importing Banners.


Important:
   Take a backup/snapshot of the files, system and database before any changes.
   Record what changes or customization was done in your Corporate ZSD Documentation.
   Some File modifications may not carry forward for the subsequent Side-By-Side upgrades.
   Referenced Documentation in Additional Information below.

Resolution

Perform Standard Branding for the Portals

Customize the portal with Banners, modifying Portals templates and color schemes in the CSS files for both the User (Technician) and the Customer portals.

Log in as an administrator or Supervisor
[Setup] > Setup > Customize


Select the Portal that is to be changed and then the sub tabs to modify Banners, Templates and Colors (CSS files).
"Use Custom" will display any custom Banners imported.
The Banners must be of the proper size to import.
Settings can be reverted on the Selected Portal by using the "Default" button at the bottom of the screen.
These changes exist in the folder structure /opt/novell/servicedesk/server/webapps/LiveTime.

To see the CSS changes do a hard reset on the browser (Ctrl F5) on most changes. 
Modifying .json file will require a restart of services.

For additional information on Portal customization refer to ZSD v8.2 Portal Customization Documentation

Modify the Portal Login Page w/Legal Statement

Scenario: Need to add legal text to the login page.

Login as an administrator or Supervisor.
[Setup] > Setup > Customize > Customer Portal (Tab) > Portals (Tab)
Select  LoginLegend


Modify the text to the requirements




and Save.

Log into the Customer Portal and view the Login Page to view your changes.



Performing Branding for the Login & Password Placeholder text

Scenario: Instead of Username / Password the term needs to be UserID / PW

The Technician Login (Old Portal Login Page) is modified differently than the Customer Login (New Portal Login Page).
Since there is different code base for the Old and New Portal Login Screens, these strings need to be customized in two places.

For the User (Technician) Portal Login Page 

The file being used depends on what locale you are using for the system.
Example: For English = LiveTime.properties, for French=LiveTime_fr.properties

Edit the file: / opt / novell / servicedesk / server / webapps / LiveTime / WEB-INF / LiveTime.woa / Contents / Resources/LiveTime_<local>.properties

Edit the file by modifying the following String;
LoginPage.username= "<Replace this with required String>"
Example: LoginPage.username="UserID"
LoginPage.password="PW"

Save the LiveTime.properties file.
To make the changes effective Restart the Servicedesk Service

systemctl  restart  servicedesk


User (Technician) Portal default login page before the changes.


Go to the Login Page of the Technician Portal and it will reflect your changes (UserID).


For the Customer Portal Login Page

The file being used depends on what local you are using for the system.
Example: For English = strings_en.json, for French=strings_fr.json, etc

Edit the file: / opt / novell / servicedesk / server / webapps / servicedesk/assets/i18n/strings_<local>.json

Edit the file by modifying the following String under the header "Login":{;
                  "username":"<Replace this with required String>",
               "password":"<Replace this with required String>",

Example:

  Modify the username/password under header "Login": {
                "username":"USERID",
                "password":"PW",

             

Customer Portal default Login Page before the changes.

Hard Reset on the browser (Ctrl F5) will display the changes

Perform Branding for the User & Customer Portal placeholder colors (colors and typeset)

Scenario: For corporate branding purposes the colors of the User (Technician) and Customer Portal login placeholder text and colors may need to be adjusted.

The Technician Login (Old Portal Login Page) is modified differently than the Customer Login (New Portal Login Page).
Since there is different code base for the Old and New Portal Login Screens, these strings need to be customized in two places.

  Modify the User (Technician) Portal Login Page

[Setup] > Setup > Customize > User Portal (Tab) > CSS (Tab)
At the end of the CSS file paste the CSS information below and modify the color codes to change color background and font size as required.  In this example the Font size is Inherited.  Defaults are listed in the comments, but example is purposely exaggerated.

Example:
    /* For Modifying Placeholder information in the User Portal */
/* Colors for characters typed for Username PW - -default #fff*/
input#userName, input#password { color: #4c9b57; font-size: inherit; } /* Colors default text before typing in Username PW - -default #fff*/
input::placeholder { color: #000; font-size: inherit; }
/* Default color for text of Domain name-text color default #fff, background default #0d8dc9*/ .login-form select, .login-form input { color: #f7cc39;
/* Default background color for Username PW & Domain placeholders */ background: #fff; }
Default Setting without the .css modifications for the Placeholders

 

Example .css changes above showing modified Placeholder colors (using color codes in above example)


Modify the Customer Portal Login Page

[Setup] > Setup > Customize > Customer Portal (Tab) > CSS (Tab)
At the end of the CSS file paste the CSS information below and modify the color codes to change color background and font size as required.  In this example the Font Size is inherited. 
Defaults are listed in the comments, but example is purposely exagerated.

/* Modify the backgound and color of text typed in the Customer placeholder*/
/* Modify the color of the text typed in the Username, PW & Domain Placeholders-default #fff*/
#zsd_login_username, #zsd_login_password, #zsd_login_domain { color: #EBE70E !important; font-size: inherit; } /* Modify the background color of the Username Placeholder-default #0079ef*/ #zsd_login_username{ background: #000000 url(img/login_user.png) 15px } /* Modify the background color of the Password Placeholder-default #0079ef*/ #zsd_login_password { background: #ffffff url(img/login_lock.png) 15px; } /* Modify the background color of the Domain Placeholder-default #0465DA*/ #zsd_login_domain{ background : #5e04DA url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat 218px; background-size: 12px; }

Default Setting without the .css modifications for the Placeholders

Example .css changes above showing modified Placeholder colors (using color codes in above example)


Additional Information

Important:
   Take a backup/snapshot of the files, system and database before any changes.
   Record what changes or customization was done in your Corporate ZSD Documentation.

ZSD v8.2 Portal Customization Documentation

Other References
Micro Focus ZENworks Service Desk v8.x Cookbook (TID 7023510)
Micro Focus ZENworks Service Desk v7.x Cookbook (TID 7021281)