[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.