Blog

White Labeling and Theming in Opsview Monitor

shamas.aziz's picture

As many of you are probably aware, the significant sporting event in France over the next couple of weeks (Euro 2016) is seen as a pretty big deal within the UK and Europe. With a large number of our European customers interested in the performance of their national side as well as their IT systems, we thought it was rather appropriate to show off our product theming and white labeling capabilities. As a result, we had some fun and turned the ‘O’ in our Opsview logo into a football on the log-in page of the product. 

This is a simple change that you, as an MSP, can make and see on all further pages with additional alterations such as background color changes also available. It’s a useful feature allowing you to provide brand consistency for all your clients. 

 

 

How do I theme Opsview? 

There is a standard form of theming which is predominately executed through alterations in the colors or logo within the product. The process of theming is easily applied by utilizing the white labeling feature, which can be activated within Opsview Monitor's MSP Edition. This feature allows you to maintain complete branding control of the product, giving customers a coherent view of Opsview’s monitoring service. 

Additionally, white labeling allows MSPs to provide a personal touch to their brand through performing a retained update that does not need to be overwritten. The fact that files can be altered instead of redone makes the update very simple. 

How is it done? In order to change the color, we changed the CSS classes. This process can be seen to below: 

/* Navigation bar and login background color */

body,

.menumain,

.main_navigation,

.main_navigation .x-btn-default-toolbar-small,

.usermenudropdown .x-menu-body,

.hostgroups_hostsummary .x-panel-header-default

{ background: #243a72!important; }

/* Navigation buttons */

.searchtop .x-btn-glyph,

.menumain .x-btn-glyph,

.usermenu .x-btn-glyph,

.usermenu .x-btn-inner,

.usermenudropdown .x-menu-item-text,

.usermenudropdown .x-menu-item-glyph

{ color: white!important; }

/* Login button */

div.login-box button

{ background: #80ba01; }

 

To change logos, we updated the following files:

  • Login page logo: /usr/local/nagios/share/images/OpsviewEnterpriseLogo-large.png - width: 276 x height: 110.
  • Navigation logo:/usr/local/nagios/share/static/hermestheme/resources/images/opsview/opsview_logo.png - width: 204 x height: 25.

It’s important to note that when updating the size of the logo, the image will rescale if it does not match the exact measurements. You may also need to clear the browser cache for the image to be used. 

Why Theme?

As you can see, the simple steps implemented are an effective and practical way to brand your Opsview Monitor instance. White labeling helps your clients have a singular branded view of the service for which you provide.