Customize look & feel of Oracle DV using skin plugins

In this blog post we will discuss about customizing the appearance of your Oracle DV Desktop by using skin plugins. Companies and/or users may want to change the appearance of DV for reasons such as house style, professionalism or simply for fun.

Oracle DV Desktop's UI is generated using scripts and is therefore highly customizable. The look and feel aspects is controlled by skins and styles. Customization can be achieved by editing the following css (cascading style sheet) files that can be packaged and deployed as a skin plugin.

Check out the skin plugin example on the Oracle BI Public Store. Main CSS files and key UI elements it drives are listed below. You may launch DV in SDK mode and use the property inspector in the browser to explore this yourselves.

• applicationstyles.css - responsible for the global level styles including the logo, progress pane, menus, context-menus, font-icons, dialogs, gadgets, tooltips, etc
• dataenrichstyles.css - responsible for the Advanced Analytics styles including the Analytics tab in the gadget dialog.
• homepagestyles.css - responsible for the styles of  home page and data source page.
• ojetstyles.css - responsible for the JET styles of data visualizations, tabs, buttons, menus, dialogs, trees, text input, etc.
• reportstyles.css - responsible for the project level styles.  The majority of the non-visualization styling is handled by this css including Insights, search, color management, the fingerpane, the gadget/properties dialog, filter bar, data sources, expressions, toolbar, save dialog, etc.

 In case you want to explore further there are other css files 

• filterstyles.css - responsible for the filter styles including the date range, expression, list and number range filters.
• stagestyles.css - responsible for the styles of the stage and data source diagrammer.
• thirdpartystyles.css - responsible for the styling of the 3rd party components including:
• JQuery UI - utilized by gadget sliders, drop target tooltips, and resizable components like the image visualization, floating panels, and layouts
• CodeMirror - utilized by the expression text editor
• Spectrum - utilized by the color picker
• vizstyles.css - responsible for the visualization level styles of the visualization placeholders, drop targets, image visualization, tile visualization, textbox visualization, legend, etc.

SAMPLE CUSTOMIZATION

To apply the sample customization, perform the following steps.

• Access the sample plugin here
• Copy the sample plugin to your plugins directory %LOCALAPPDATA%\DVDesktop\plugins
• Restart the server

You should see something like this.

You can notice that there is a change in the logo, background color of header and that there is a green colored theme in your Oracle DV.

This was achieved by making the following changes:

• In application-styles.css, the Oracle logo was replaced with a new logo

.bi-va-icon-oraclelogo_15:before{  

-   content:"\e666"; 

+  content: url("star_logo.png"); 

}

CAVEAT: The logo must be of the size 130 x 25 px in width and height respectively. Incorrect size would need more corrections to fit it within that frame. Also make sure that you provide the correct name of the logo.

• The dark green background color was applied to the header by making the following change to the homepagestyles.css

.bitech-global-header > div:first-child{
display:table-row;
width:100%;
height:36px;
outline:0; 

+ background-color: green;
} 

• The light green background color to the explore panel was applied by making the following change in the reportstyles.css 

.bi_fp_content{
position:absolute;
overflow:auto;
top:48px;
bottom:33px;
left:10px;
right:0px;
width:auto; 

+ background-color: #C0D9AF;
}

There are many more css changes that needs to be done to achieve the customization shown in the sample customization. However all the changes follow the same form as what is described above.

Are you an Oracle Analytics customer or user?

We want to hear your story!

Please voice your experience and provide feedback with a quick product review for Oracle Analytics Cloud!