Using Internet Explorer to customize OBIEE 11g UI

Tweet

We recently had a requirement that the button sizes in OBIEE had to be increased. The reasoning was that the users of some of these reports are old and they hate smaller sized buttons. Now we know the properties of buttons such as the size are set in the css files which together form the skin. While it is possible to copy the skin and then edit the desired property, it is a long process.
This blog talks about a shortcut to achieve the objective.

The process to copy the skin and edit the desired property is described @ http://www.rittmanmead.com/2010/12/oracle-bi-ee-11g-styles-skins-custom-xml-messages/

Now, the developer tools of IE have been around for quite some time but there is this lesser known feature of the developer tools which one of my friend told me. Let us see how we can employ this feature of Internet Explorer to the use case of increasing the size of the buttons.

I created a simple dashboard prompt for the sake of this blog and I have opened the OBIEE portal using IE

Now hit F12 on your screen. This will bring the developer tools of IE as shown below

You will see a Select Element option on the top right corner in the Developer tools window as shown below.

Select it and then move your mouse over the desired element on the page (button in this case) as shown below.

This will highlight the CSS classes been used in the object, the files which contain them and their properties as shown below.

We see that the css classes used for buttons are .button and .buttom:link as shown below.

Alright, now that we know the classes, we just have to put a style code in the dashboard that changes the font-size property for these classes.

Here is that code

<style>
.button {
font-size: 18px;
}
.button:link  {
font-size: 18px;
}
</style>

We put this in the text object of a dashboard as shown below. Check the Contains HTML Markup check box

The result is shown below

Note that using this method also helps us localize the impact of the change of the property. The change in one dashboard page will not be affecting other dashboard pages.

Till next time ..