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.

The following sections give the steps to change colors in the Self Service Portal new UI and classic UI:

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 Virtual 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 Virtual 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>

To change colors in the Self Service Portal classic UI

1. Open the Self Service Portal Configuration tool.
2. Click Show Disabled to view the entire list of configuration entries. 
3. Select the Branding - Global and click Modify. 

4. Modify the following <css id>...</css> tags based on your requirements:

   <interface>
   <code>en</code> // Codes such as us, fr, us-en, etc.  Can be set to global if a generic set of text string is wanted as a default to the application.
   <name>Global</name>
   <company>Global</company>
   <list>
   	<css id='body'>background-color:#F8FCF8;margin:0;padding:0;</css>
   	<css id='#lctyping'>background-color:#FFFFFF;</css>
   	<css id='#lclog'>background-color:#F8FCF8;</css>
   	<css id='#lcresponse'>background-color:#F8FCF8;</css>
   	<css id='#logotable'>background-color:#FFFFFF;border-bottom:1px solid #000000;</css>
   	<css id='#tablemain'>border-top: 2px solid #eeeeee;</css>
   	<css id='#tdmainleft'>width:400;</css>
   </list>
   </interface>

    View the areas on the Self Service Portal that correspond to the <css id>...</css> tags

   

5. Set the Status to Enabled.
6. Click Save to make your changes.
7. Open the Self Service Portal to review your changes.