Knowledge Base (Display) Knowledge Base (Display)

How to modify reportlet styles

How to modify reportlet styles

Overview

You may have to adjust some styles to harmonize the reportlet content with your portal.   These styles are organized in the folder <reportlet root>/resources/css
  •  jQuery UI css (as many css files as themes defined. The reportlet is bundled with 6 themes)
  • jQuery plugins css (jsTree, multiselect, combobox,...)
  • Reportlet css (visioportlet.css)  

When the project is  built, all these css files are merged in a file named visioneo-merged.<release>.css, for example:  visioneo-merged.0.9.3.css. This merged file is the only one which is included in the reportlet pages, therefore if you need to override styles definition, it the file you need to modify.

Example

Let's take an example with the sliders input fields. Here is the default look in the lightness theme, and the new example look:    

By inspecting the html element in your favorite web browser, you can see the visioneo css class for these fields:  .visioneo-input-slider. If you look for this class name in visioneo-merged.<release>.css you should find this definition:    

.visioneo-input-slider {

text-align:center;

width:5em;

border:0;

font-weight:bold;

background-color: white;

border:1px solid

}  

 

To set the new style, we must apply two actions:

  • Change the current background-color attribute
  • Add a color attribute to the class 

Modify the styles

Of course a quick way would be to directly update the class "visioneo-input-slider" with the new values. It would work, however it is probably not a good practice. If you change many styles, how will you be able to apply again all your modifications when you get a new reportlet release? That could become complex, and discourage you to update your reportlet.    A smartest way is to add your own section at the end of the visioneo-merged.<release>.css file. In our example, copy the '.visioneo-input-slider' definition, paste it at the end, and then apply the modifications:      

.visioneo-input-slider {            

text-align:center;            

width:5em; border:0;            

font-weight:bold;            

background-color: #CCC;            

border:1px solid;          

color:  #e17009    

}      

 

Since your definition is declared after (at the end of the css file), it will override the default one. And if you get a new reportlet release, you will just have to copy / paste your whole style section at the end of the new merged file.

Alternative method

If your portal allows to include headers in a configuration file, you could even keep your own css file separated. For example if you work with Liferay, you can modify the liferay-portlet.xml file, and include your css file after visioneo-merged.<release>.css.

 
Tags: admin developers
Average (0 Votes)
Most Recent