Customizing the multisite layout

This article is obsolete and may be not valid anymore!

1. Multisite layout

Mulitsite comes with it's default layout which contains of the default style definitions and the images used in the different pages.

There are different ways to customize the look of multisite. The easiest and most common way would be to customize the stylesheets and images.

Multisite does not come with a template engine or similar - so it is not easy to customize the gernerated HTML code without modifying the core code of multisite.

2. The stylesheets

Multisite uses only one single stylesheet file. It is called check_mk.css and can be found in the root directory of multisite /usr/share/check_mk/web/htdocs (OMD: ~/share/check_mk/web/htdocs to modify the file copy it to ~local/share/check_mk/web/htdocs/check_mk.css and customize it there).

The file is splitted in several sections separated by some figlet strings (the BIG titles). Below these titles you should find some short hints which pages/elements of multisite are affected by the single definitions.

Please Note: Multisite does also make use of some inline css definitions for different reasons.

3. The images

The images used by multisite are located in the images/ subdirectory below the multisite root directory /usr/share/check_mk/web/htdocs/images (OMD: ~/share/check_mk/web/htdocs/images to modify files copy them to ~local/share/check_mk/web/htdocs/check_mk/images/ and customize it there).

One convention: When you see the strings _hi or _lo in the image name the image containing _lo is the normally displayed image and the _hi image is shown on mouseover (hovering) the image.

Here is the table of currently used images:

alert_*.png Used to visualize the event type on the Nagios logfile page
assume_bg.png Relief to show that a state is assumed on the BI aggregation pages
assume_*.png Buttons to set the assumed state on the BI aggregation pages
button_closesnapin_*.png Close buttons of the snapins in the sidebar
button_delete_*.png Used to delete a bookmark
button_edit_*.png Used to edit a bookmark
Buttons to move columns/groupbys up or down in the view editor
contentframe_background.jpg Background image of the content frame (the right one)
Contextlinks are used to link to views which belong to an equal context. e.g. a host view links to a view which shows all services of a host. The contextlinks are also used to navigate within WATO. When there are uncommited changes the "ChangeLog" link is shown as "_hot". the "_hi" images are shown on mouseover
favicon.ico The favicon page displayed in modern browsers
form_background.png Background image in form tables and other special spaces. The image is fully transparent
icon_*.gif All these images are used in the icons column of services/hosts.
Used for the reschedule button which is available for services/host which are using active checks. The reload_failed button is shown when some problem occured, the reloading image is shown while the ajax request is being processed.
icons/ None of the icons in this directory is used by default. They can be used to display the hostextinfo or serviceextinfo icons of Nagios. If you like to use custom icons for the host-/serviceextinfo you have to place the icons in this directory.
link_*.gif Used in the bookmark snapin to beautify the single links and folders.
mk_logo_small.gif Placed on the right top of each content page which uses the regular page header
Layout elements of the sidebar
sidebar_button_*.png Image for the "add snapin" button in the sidebar
Layout elements for the snapins
tree_*.png Used e.g. in the view editor to display open/closed foldings. The single images are shown during the open/close animation when toggling a folded part of the webpage, for example a section in the view editor.
someproblem.png Is used on the "Alert Statistics" page as background for the "problem" column. The color fades from yellow to red since the "problem" column summarizes WARNING and CRITICAL states.
tableshadow.png A semi transparent image to create a small shadow roud all the tables used on the multisite content pages.
status_aggrcomp.png Indicator for the BI pages to show that a cached compiled aggregation is used.
status_persist.png Indicator for all pages which use connections to livestatus if a persistent connection is used.