Changing component themes
WebDataRocks offers customization of the pivot table.
It’s useful if you want to enhance the Look & Feel of your web reporting tool and make the visitors’ interaction with your website a more pleasant experience.
WebDataRocks goes with a set of eight predefined themes:
- Dark
- Default
- Light blue
- Orange
- Teal
- Green
- Striped-Blue
- Striped-Teal
How to change the theme
Step 1. Include the CSS file
All files with themes are located in webdatarocks/theme/ folder. If you don’t specify a theme, a component will use the default one.
Firstly, open the code of a page where the component is placed. Include to a <head> section the <link> element with a reference to a minified CSS file of the theme you like.
In our sample, we’ve chosen the Light blue theme:
<link rel="stylesheet" type="text/css" href="theme/lightblue/webdatarocks.min.css"/>
In case you want to create a custom theme, turn to the detailed tutorial on custom report themes.
Step 2. Update the webpage
Save the applied results and reload the page to see how your pivot table looks now.
Example
Applying the Light blue theme to the pivot table: