Custom CSS for white label WMSPanel

WMSPanel is a web service so providing it as a white label branded panel fits web paradigm perfectly. About 1/3 of our customers has set up a white label for their clients and about a dozen of the have set up multiple domains and logos to show their stats under different labeling.

We decided to go further and implemented customizable CSS capabilities. This means that in additional ti having custom domain and logo you can make your white label panel look exactly the same as your main web site.

Here's how it works. WMSPanel has a layout which uses layers. Their position and "decoration" is described via styles in a solid CSS file. So to change the look of the panel an administrator needs a way to re-define CSS styles. This is done by setting up a link to a new CSS which is located on existing web site.

If you want to use customized CSS, you need to follow these steps.

Create custom stylesheets

If you open any WMSPanel page you will see all elements having their IDs. Now using Chrome development tool or Firebug of Firefox, you can check the styles applied to each ID. Once you make changes to the styles you need to save them in a separate CSS file. It will have new stylesheets which override default behavior.

Now upload this file to any place where it will be publicly available.

Create a branded panel

The next step is to create a branded panel using white label capabilities. Read this post to learn how to set up custom domain and company logo.

Use new CSS location

Now being in the same Settings / Branding menu, go to the line for the designated custom domain. It has CSS column - just click on "Set" link to see the following dialog.

Here you just need to point to the location of CSS file you created previously and click on Save. That's it - your branded panel will look according to default CSS with the styles overridden by your custom CSS.

Cautions

The described CSS approach may turn to be not very flexible in some cases. Current CSS is based on current layout with pre-defined IDs. Those IDs may change over time as our service is continuously improved and reworked. So you need to track the new features released by our team and make sure your custom CSS is compliant to recent changes. The risk or breakage is very low but it still exists.

Examples

You may find some examples in our github account repo. E.g. you may use this CSS file to hide all panel menus leaving plain charts.


Read more about WMSPanel streaming reporting.

Related documentation

White label branded panel, SSL white label panel