Welcome to docs.opsview.com

Customising The Opsview Web Application

The rules here apply to version 4.1 onwards. Customisation can be aided with a HTML inspection tool such as Firebug.

The logo at the top left of the main banner can be changed by replacing /usr/local/nagios/share/images/opsview4-logo.png with the new file. Bear in mind that it is currently 155×26 pixels in size, any larger risks looking disproportionate.


We use the latest CSS techniques to separate presentation from information. One can override the default CSS styles in /usr/local/nagios/share/stylesheets/custom.css. This file will not be changed on an upgrade. Some of the more popular things that one might wish to change are detailed below.


Background colour of all pages:

div#hh {
  background-color: white

Default text colour:

html body { color: #333333 }


Background colour of the top header:

#opsview_navigation_logo_row { background: #3E2155 !important }
#opsview_account_wrapper_menu .opsview_menu_opsview {
  background: #3E2155 !important;
  border: 1px solid #3E2155 !important

Status views

Status colour of the hosts and services notifications bubbles:

table.common td.critical,
div.status_box_critical {
  background-color: #FFCCCC
table.common td.down,
status_box_down {
  background-color: #FFCCCC
table.common td.ok,
status_box_ok {
  background-color: #CCFFCC
table.common td.unknown,
status_box_unknown {
  background-color: #FFFFCC
table.common td.unreachable,
status_box_unreachable {
  background-color: #FFCCCC
table.common td.up,
status_box_up {
  background-color: transparent
table.common td.warning,
status_box_warning {
  background-color: #FFFF99

Background colour and border of icon buttons:

html, #toolbar_container, div#hh { background-color: white }
#toolbar_container a img {
  background-color: white;
  border: white;

Colour of alternating rows (even, odd):

.even { background-color: #EAEAEA }
.odd { background-color: #EAEAEA }

Configuration views / forms


fieldset {
  background-color: #EAEAEA;
  border: thin solid #333333;

Form legend (title):

fieldset legend {
  background-color: #FFFFFF;
  border: thin solid #333333;

Form text links:

a.fields:link { color: #333333 }

Form tabs:

/* default */
#tabs a {
  background-color: #9E90AA;
  color: #4D0D78;
/* active */
#tabs a.active-tab {
  background-color: #3E2155;
  color: #FFFFFF;
/* inactive */
#tabs li.empty {
  background-color: #DCDCDC;
  color: #999999;


The menu's CSS file is loaded later, therefore each custom entry requires !important.

Background colour bar, currently graded:

.opsview_menu_opsview {
  background: -moz-linear-gradient(center top, #EAEAEA, #C1C0C0) repeat scroll 0 0 transparent !important
/* But not the account menu... */
#opsview_account_wrapper_menu .opsview_menu_opsview { background-color: transparent !important }

Background colour of the dropdowns:

.opsview_dropdown_fullwidth { background: none repeat scroll 0 0 #DEDEDE !important }


/* Links */
.opsview_drop { color: #020101 !important }
/* But not the account menu... */
li.opsview_right a.opsview_drop { color: #EEEEEE !important }
/* Headings */
.opsview_menu h3 { color: #020101 } /* Note: !important not required */


Page background colour:

div#content, div#footer { background-color: white }

Range form background colour:

div.startendform { background: url("../images/formtable_bg.png") no-repeat scroll 0 0 #F1F1F1 }


Main header:

#opsview_banner { background: #3E2155 !important }

Header menu bar:

.opsview_menu_bg { background-color: #D6D6D6 }
/* Dropdown background */
.opsview_submenu table { background-color: #D6D6D6 !important }

Background colours:

/* Outer */
body { background-color: white }
/* Inner */
.panelGroup { background-color: white !important }
/* Search div */
div.header { background-color: #D6D6D6 !important }
/* Main content */
div.toolbar { background-color: #D6D6D6 !important }
/* Striped row in main content */
tr.stripe td { background-color: #EAEAEA !important }
/* Folders tree */
.foldersTree { background-color: white !important }


Background colour:

body { background-color: white !important }
#overview { background-color: white }


Main header:

#opsview_navigation_logo_row { background-color: #3E2155 }
#opsview_account_wrapper_menu .opsview_menu_opsview {
  background: #3E2155 !important;
  border: 1px solid #3E2155 !important
.opsview_menu_opsview { background-color: yellow !important }


html, body, #wrap { background-color: white }


Changing the number of rows on list pages

To amend the number of rows retuned on pages such as the Audit Log, a configuration entry can be put into /usr/local/opsview-web/opsview_web_local.yml file as follows.

  default_rows: 100

Similar changes can be made to the hosts or service lists by adding an entry such as

  default_rows: 100

opsview-web must be restarted for these changes to take effect, and they will be preserved over any upgrade.

This file is yml based, so is very particular about whitespace. Do not use tabs - it must be spaces to separate the file. Examine the format of the opsview_web.yml file carefully.

Navigation menus

The side navigation menus, or sidenav, can be changed by editing the /usr/local/opsview-web/opsview_web.yml file. The relevant portion is:

  - menu: monitoring
    name: My Monitoring
    defaultaccess: CONFIGUREVIEW
    display: 0
      - url:  '/my-monitoring-link-1'
        name: 'Monitoring Link 1'
      - url:  '/my-monitoring-link-2'
        name: 'Monitoring Link 2'
  - menu: modules
    name: My Modules
    display: 0
      - url:  '/my-module-link-1'
        name: 'Module Link 1'
        access: CONFIGUREHOSTS
      - url:  '/my-module-link-1'
        name: 'Module Link 2'

You can change this and then restart Opsview Web to take effect.

This section can be copied into opsview_web_local.yml, as opsview_web.yml is overwritten when you upgrade Opsview.