September 1, 2013

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 overriden 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. So please subscribe to our blog and Twitter account to find out what's up.

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.



White label is also applicable for working with Nimble Streamer, the light-weight HTTP streaming server for HLS, Smooth and progressive download. WMSPanel is an official GUI for Nimble Streamer.

Read more about WMSPanel streaming reporting.

Related documentation


End user reporting for WowzaWhite label branded panelScreencast for data slices and white labelSSL white label panel

2 comments:

  1. You really make it seem really easy together with your presentation however I to find this matter to be really one thing that I feel I might never understand. It seems too complicated and extremely broad for me.

    ReplyDelete
    Replies
    1. Hi,

      If you have any difficulties or questions, feel free to contact us so we could help.

      Delete