Documentation menu

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:

See also