As we appreciate the importance of personalization for you, we cannot allow the component to stand out from the general color scheme of your application.

So to make a pivot table fit into the overall design, WebDataRocks offers a set of predefined themes which you can use to customize the Look&Feel of your web reporting tool.

We have four predefined themes to present:

  • Default (noble grey)
  • Light blue
  • Orange
  • Teal
So let’s try!

How to change a theme simply

  1. Embed the pivot table

    2. We hope you’ve managed to embed a WebDataRocks reporting tool. If so, go to step 2. Otherwise, you are welcome to turn to our detailed Quick start. We promise it’s a quick and effortless process.

  2. Include the CSS file

    3. WebDataRocks comes with predefined CSS themes. You can see all of them in webdatarocks/theme/ folder. If you don’t specify a theme, the component uses the default theme.
    Its CSS file is available inside webdatarocks/webdatarocks.css and webdatarocks/webdatarocks.min.css (a minified version of CSS file).

    Firstly, open the code of a page where the component is placed. Include to a <head>section the <link>element with a reference to the minified CSS file of the theme you like.

    For example, let’s apply the Light blue theme:

    <link rel="stylesheet" type="text/css" href="theme/lightblue/webdatarocks.min.css"/>

    Simply replace lightblue in CSS reference with the name of the theme you need.

  3. Enjoy the new Look&Feel of your pivot table

Update the page and see the results. Your patience is rewarded and WebDataRocks reporting tool looks even more attractive!

Stay tuned to new updates!