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.

Note

Colors in http://midTierServerName:portNumber/eschat/arhome.html may be changed only in BMC Virtual Chat 9.1.00. You can modify the logo, as explained in Changing the company logo.

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 Modify
  4. In Configuration, add the following tags after </new-ui> and before </interface> tags:
    Sample code:

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

 View the Self Service Portal with changed color

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.

Was this page helpful? Yes No Submitting... Thank you

Comments