[ForYourInformation -14] Self Service Portal Customization

[ForYourInformation -14] Self Service Portal Customization

The Self-Service Portal increases visibility into daily IT operations and additional focus on service quality and customer satisfaction. Self-service portals are the best way to achieve that without spending extra IT effort.

In Service Desk Plus Self-Service Portal can be designed and customized by the administrator to display it in a way that he/she requires the users to view it. This customization option allows the administrator to re-arrange, restore, add, delete, hide and re-size the widgets. The widgets can be positioned anywhere on the screen and can re-sized through an easy drag and extend/compress. 

This option can be accessed by clicking on Admin>>Self-Service Portal Settings >>Customize Self-Service Portal. 

Customize Self-Service Portal: The following screenshot displays the default user portal view. 


Admin can customize the look and feel with HTML editor.  For your reference I have changed the widget colors, font types, and font colors


You can make use of following HTML codes and modify it based on your requeirment. 
<style>
/* ISSUE Box */
.ssp-container .ssp-warning .ssp-icon {
    background-color: #76448A;
}
.ssp-container .ssp-warning .btn:hover {
   background-color:#8E44AD ;
}
.ssp-container .ssp-warning .btn {
    background-color: #D7BDE2;
    border: 1px solid #BB8FCE;
    color: #5B2C6F;
    font-family: cursive;
}   

/* Service Box */
.ssp-container .ssp-info .ssp-icon {
    background-color: #F7DC6F;
}
.ssp-container .ssp-info .btn:hover {
    background-color: #F1C40F;
}
.ssp-container .ssp-info .btn {
    background-color: #F9E79F;
    border: 1px solid #F8C471;
    border-radius: 2px;
    color: #D35400;
    font-family: cursive;
}
   
/* Solution Box */
.ssp-container .ssp-gray .ssp-icon {
    background-color: #B03A2E;
}
.ssp-container .ssp-gray .btn:hover {
    background-color: #E74C3C;
}
.ssp-container .ssp-gray .btn {
    background-color: #EC7063;
    border: 1px solid #641E16;
    border-radius: 2px;
    color: #7B241C;
    font-family: cursive;
}

/* Widget font*/
.ssp-content h1 {
    font-size: 22px;
    color: #1F618D;
    font-family: cursive;
}
</style>

Click here to know more about other customization like adding widgets, settings properties, publish the customized settings, etc.


                  New to ADSelfService Plus?