Thursday, February 23, 2017

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.

Sample Customization


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.

4 comments:

Rusty Bruce said...

I tested out this plug-in, and have run into some difficulty swapping out the logo. I have a new 130x25 pixel logo I added to the ZIP container, and updated applicationstyles.css file to reference the new file.

I reloaded the ZIP file to my plug-ins folder, and restarted DVD. I am still seeing the old logo star_logo.png. I even deleted star_logo.png from the ZIP container, and I am still seeing star_logo.png getting loaded to DVD. I hover over the logo, and I get a description "Oracle Logo".

Could someone help me debug this issue?

seravina danniella said...

Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!

Web Developer Melbourne

Rusty Bruce said...

Would the author of this blog please contact me? I have a few questions.

Thanks in advance.

Jameister said...
This comment has been removed by the author.

Post a Comment