Changing colors in the Self Service Portal

As an administrator, you can modify the CSS tags to rebrand the colors in the Self Service Portal user interface.

To change colors in the Self Service Portal

For each language that is used by the Self Service Portal, perform the following steps:

1. In the Live Chat Administration Console, open Self Service Portal >Configuration.
2. Click the Interfaces-<locale> for the language that you want to change the color, and click Modify. 
3. In the Self Service Configuration window, if an overlay is not created for this entry, click Create Overlay, else click Open Overlay. 

4. In Configuration, add the following tags after </new-ui> and before </interface> tags:

   Sample code to change colors

   </new-ui>
   <new-ui-styles>
   .header {
       background-color: #7b09ec;
   }
   .headerText {
       background-color: #7b09ec;
   }
   </new-ui-styles>
    
   </interface>

   In the above sample code, #7b09ec is the code for violet color defined in the CSS. The color can also be defined as background-color:violet, instead of using the color code. For other color codes in the CSS, administrators can perform an online search. 

To hide the email icon in Self Service Portal

1. In the Live Chat Administration Console, open Self Service Portal > Configuration.
2. Click the Interfaces-<locale> for the language that you want to hide the email icon, and click Modify. 
3. In the Self Service Configuration window, if an overlay is not created for this entry, click Create Overlay, else click Open Overlay. 

4. In Configuration, add the following tags after </new-ui> and before </interface> tags:

   Code to hide the email icon

   <new-ui-styles> 
   button.email 
   	{ display: none; } 
   </new-ui-styles>

Related topics

Overlays for Self Service Portal custom configuration

Self Service Portal Configuration overview