Switching Back from Icons to Text (Siebel OUI)

For many old-schoolers, we are very familiar with having text displayed for common buttons (Query, New, Edit, Delete, etc.) instead of icons.

‘Iconization’ was introduced in later versions of Siebel OUI, and for many existing clients, text was a better fit.

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

Changing the applet level vanilla buttons from icons to text is a very simple CSS trick. You can either fix the vanilla CSS file, or add the code to your custom CSS file (tested in version 16.x).

1. The first step is to find out the what Siebel icon class is being used. For example, for new record, Siebel uses siebui-icon-newrecord. This can be identified by inspecting the button in your browser.
2. Override the functionality in your custom CSS file or add to the vanilla CSS file. For example, to show the text for new record button use the following code:
   1. button.siebui-icon-newrecord span{
      display: initial !important
      }
   2. button.siebui-icon-newrecord::before{
      content: none!important
      }

Such small tweaks to CSS goes a long way in maintaining customer satisfaction (no re-training, no hovering over buttons to look for help text etc).