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.

CSS

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.

Global

Background colour of all pages:

html,
#toolbar_container,
div#hh {
  background-color: white
}

Default text colour:

html body { color: #333333 }

Header

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

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;
}

Menu

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

Background colour bar, currently graded:

.opsview_navigation_wrapper,
.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 }

Text:

/* 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 */

MRTG

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 }

Reports

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 }

Nagvis

Background colour:

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

Netaudit

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_navigation_wrapper,
.opsview_menu_opsview { background-color: yellow !important }

Background:

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

Other

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.

Controller::Admin::Auditlog:
  default_rows: 100

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

Controller::Admin::Host:
  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:

navigation:
  - menu: monitoring
    name: My Monitoring
    defaultaccess: CONFIGUREVIEW
    display: 0
    entries:
      - 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
    entries:
      - 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.

Navigation
Print/export
Toolbox