Welcome to docs.opsview.com

Differences

This shows you the differences between two versions of the page.

opsview4.6:customising [2014/09/09 12:19] (current)
Line 1: Line 1:
 +====== 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 [[https://getfirebug.com/|Firebug]].
 +
 +===== Logo =====
 +
 +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 155x26 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:
 +
 +<code css>
 +html,
 +#toolbar_container,
 +div#hh {
 +  background-color: white
 +}
 +</code>
 +
 +Default text colour:
 +
 +<code css>
 +html body { color: #333333 }
 +</code>
 +
 +==== Header ====
 +
 +Background colour of the top header:
 +
 +<code css>
 +#opsview_navigation_logo_row { background: #3E2155 !important }
 +#opsview_account_wrapper_menu .opsview_menu_opsview {
 +  background: #3E2155 !important;
 +  border: 1px solid #3E2155 !important
 +}
 +</code>
 +
 +==== Status views ====
 +
 +Status colour of the hosts and services notifications bubbles:
 +
 +<code css>
 +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
 +}
 +</code>
 +
 +Background colour and border of icon buttons:
 +
 +<code css>
 +html, #toolbar_container, div#hh { background-color: white }
 +#toolbar_container a img {
 +  background-color: white;
 +  border: white;
 +}
 +</code>
 +
 +Colour of alternating rows (even, odd):
 +
 +<code css>
 +.even { background-color: #EAEAEA }
 +.odd { background-color: #EAEAEA }
 +</code>
 +
 +==== Configuration views / forms ====
 +
 +Forms:
 +
 +<code css>
 +fieldset {
 +  background-color: #EAEAEA;
 +  border: thin solid #333333;
 +}
 +</code>
 +
 +Form legend (title):
 +
 +<code css>
 +fieldset legend {
 +  background-color: #FFFFFF;
 +  border: thin solid #333333;
 +}
 +</code>
 +
 +Form text links:
 +
 +<code css>
 +a.fields:link { color: #333333 }
 +</code>
 +
 +Form tabs:
 +
 +<code css>
 +/* 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;
 +}
 +</code>
 +
 +==== Menu ====
 +
 +The menu's CSS file is loaded later, therefore each custom entry requires **!important**.
 +
 +Background colour bar, currently graded:
 +
 +<code css>
 +.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 }
 +</code>
 +
 +Background colour of the dropdowns:
 +
 +<code css>
 +.opsview_dropdown_fullwidth { background: none repeat scroll 0 0 #DEDEDE !important }
 +</code>
 +
 +Text:
 +
 +<code css>
 +/* 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 */
 +</code>
 +
 +==== MRTG ====
 +
 +Page background colour:
 +
 +<code css>
 +div#content, div#footer { background-color: white }
 +</code>
 +
 +Range form background colour:
 +
 +<code css>
 +div.startendform { background: url("../images/formtable_bg.png") no-repeat scroll 0 0 #F1F1F1 }
 +</code>
 +
 +==== Reports ====
 +
 +Main header:
 +
 +<code css>
 +#opsview_banner { background: #3E2155 !important }
 +</code>
 +
 +Header menu bar:
 +
 +<code css>
 +.opsview_menu_bg { background-color: #D6D6D6 }
 +
 +/* Dropdown background */
 +.opsview_submenu table { background-color: #D6D6D6 !important }
 +</code>
 +
 +Background colours:
 +
 +<code css>
 +/* 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 }
 +</code>
 +
 +==== Nagvis ====
 +
 +Background colour:
 +
 +<code css>
 +body { background-color: white !important }
 +#overview { background-color: white }
 +</code>
 +
 +==== Netaudit ====
 +
 +Main header:
 +
 +<code css>
 +#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 }
 +</code>
 +
 +Background:
 +
 +<code css>
 +html, body, #wrap { background-color: white }
 +</code>
 +
 +===== 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.
 +
 +<code yaml>
 +Controller::Admin::Auditlog:
 +  default_rows: 100
 +</code>
 +
 +Similar changes can be made to the hosts or service lists by adding an entry such as
 +<code yaml>
 +Controller::Admin::Host:
 +  default_rows: 100
 +</code>
 +
 +''opsview-web'' must be restarted for these changes to take effect, and they will be preserved over any upgrade.
 +
 +<note warning>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.</note>
 +
 +===== 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:
 +<code>
 +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'
 +</code>
 +
 +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