Everything Oracle

Home

Everything Oracle

 

 

 

 

 

 

Introduction

 

At the top of a dashboard page we have the default dashboard banner:

 

In this article we’ll examine how to customize the banner so that it looks like this:

 

Here, we’ve created a custom skin and style.  We've colorized the banner image (we could just as easily have replaced it entirely with a corporate logo); we’ve colorized the triangular menu icons that follow the “More Products” and “Settings” items; and we’ve customized CSS classes to change background, border, and font colours, to change font sizes, and to reposition and align items.

 

The CSS formatting for the banner is specified in file “portalbanner.css”, in the “b_mozilla_4” subdirectory of the relevant style directory.

 

The upper portion of the banner consists of an image and a set of panel links.  The lower portion consists of a bar containing the current dashboard title, the welcome message, and the menu items.

 

 

Skins and Styles – Usage

 

The banner image, with dimensions 1600x48 pixels, contains the variegated blue pattern and the text “Oracle Interactive Dashboards”.  The image file, “bg_banner.jpg”, is referenced by CSS attribute “.PortalBanner => background-image”, and the image is stored in the same directory as “portalbanner.css”.

 

You may wish to replace the banner image with one of your own, or you may simply wish to change its colour to match that of the corporate livery.  In either case you’ll need some graphics software.  For more sophisticated image manipulation you’ll need a package like Photoshop, but if you simply wish to colorize the image then almost any graphics freeware will suffice.  For example, using the “Microsoft Office Picture Manager” that’s supplied with Windows by default, it’s a simple matter to change the colour to:

 

 

Banner Panel

 

If you’re changing the dimensions of the default image, then you need to take the banner panel into account.  This panel is the same size as the default image and is normally invisible.  If you temporarily change the name of file “bg_banner.jpg” to a non-existent one so that the image disappears, then you’ll see the banner panel:

 

The panel color is set by CSS attribute “.PortalBanner => background-color”; the panel margin by “.PortalBanner => margin”; the panel width by “PortalBanner => width”; and the panel height by “.PanelHdg => height”.

 

For example, with a margin of 20px, a width of 50%, and a height of 100px we get:

 

 

Panel Items

 

The panel items in the case of the example are “My Dashboard”, “Country Managers”, and “Country Managers2”.  The offset of these items from the left is determined by the logo width, CSS attribute ”.PortalLogo => width”, and the space within which the items are laid out is determined by the panel item width, CSS attribute “.PortalTopTable => width”.

 

For example, with a logo width of 350px, a panel item width of 10%, and a panel item background colour of “#0000FF” we get:

 

The reduced width has caused the panel items to wrap.

 

Users sometimes complain that the panel items are set in a rather small font and squashed up close to the top banner margin.  Oracle has done this to allow a large number of dashboard names to be displayed, wrapping over three lines, as in the above example.  However, when the number of dashboards is modest you may wish to change the positioning and the font size.

 

The offset of the panel items from the top banner margin can be changed by adding a value for CSS attribute “.PanelItems => padding-top”, and the horizontal separation between the panel items can be changed by altering the value for CSS attribute “.PanelItemSep => width”.

 

The settings for the non-current panel items, “My Dashboard” and “CountryManagers2”, can be changed by altering the properties of the following CSS classes: “.PortalLink:link”, “.PortalLink:hover”, and “.PortalLink:visited”.

 

The settings for the current panel item, “CountryManagers”, can be changed by altering the properties of the following CSS classes: “.CurrentPortal:link”, “.CurrentPortal:hover”, and “.CurrentPortal:visited”.

 

For example, with a panel item offset of “10px”, a panel item separation of “20px”, non-current panel item link settings of “12pt” for font size, “#000000” for “color”, “italic” for font-size, and current panel item link settings of “12pt” for font size and “#000000” for “color”, we get:

 

 

Portal Bar

 

The properties of the portal bar are determined by the “PortalBottom” CSS class and the properties of the portal name are determined by the “PortalName” CSS class.

 

For example, if within the “PortalBottom” class the value of attribute “background-color” is set to “#880000”, and the values of attributes “border-top” and “border-bottom” are set to “solid 1px #FFFFFF” we get:

 

 

Welcome Text and Menu Items

 

The appearance of the welcome text, “Welcome, Administrator!”, is determined by the properties of the “WelcomeTextCell” CSS class.  Users sometimes complain that the welcome text is not aligned with the menu items that follow it:

 

This issue can be addressed by changing the “vertical-align” property to “top” and then adding some top padding to shift the text back down by the correct amount.

 

As far as the menu items are concerned “Answers” and “More Products” are controlled by the “DashBarProductCell” CSS class, “Settings” and “Logout” by the “DashBarActionCell” CSS class, and “Dashboard” by the “DashBarActiveProductCell” CSS class.

 

The dash that separates the menu items is controlled by the “DashBarSep” class.

 

The menu icon is represented by image file “morearrow.gif”.  This file is stored in the “common” subdirectory of the relevant skin directory.  Note, that this image is stored in a “skin” directory and not in a “style” directory – unlike the case of the banner image.  The implication of this positioning is that the colour selected for this icon must match the colour schemes used for all dashboard styles, since different skins, unlike different styles, can’t be specified on a per dashboard basis (at least, without digging into the OBIEE internals and creating dynamic, “on-the-fly” Javascript customization of all dashboard pages).

 

For example, to align and change the colour of the “Welcome text” we could change the class properties as follows:

 

  .WelcomeTextCell => vertical-align: top;

  .WelcomeTextCell => padding-top: 2px;

  .WelcomeTextCell => color: #ffffff;

 

To change the colour of the menu items we could change the class properties (for both “link” and “hover”) to:

 

  .DashBarProductCell => color: #ffffff;

  .DashBarActiveProductCell => color: #ffffff;

  .DashBarActionCell => color: #ffffff;

 

To change the colour of the menu item separators we could change the class property:

 

  .DashBarSep => color: #ffffff;

 

We could also colorize the “morearrow.gif” file to match the colour of the banner image.

 

As a result, we get our fully customized dashboard:

 

To change the content – to change the names of the menu items or to remove menu items altogether – we’d need to create custom XML messages, but that’s another article.

 

 

 

Everything Oracle

Home

Everything Oracle

 

Copyright © 2009 PWG Consulting, All Rights Reserved