Home » Categories » Multiple Categories

Nagios XI - Using The Custom Includes Component

Overview

This KB article shows you how to use the Custom Includes component in Nagios XI (available in XI 5.3.0 onwards).

The Custom Includes component allows you to upload your own custom Cascading Style Sheets (CSS), JavaScripts and Images to Nagios XI to add customizations to Nagios XI. This allows you to customize Nagios XI without the changes being overwritten by future upgrades.

This KB article will show you how to change the color of the header with examples of a solid colour, a gradient and an image.

HTML / CSS / JavaScript skills are required for advanced customizations, this guide is an example of what can be achieved.

This KB article uses Firefox as the web browser, certain steps may vary if you are using a different web browser.


 

Identify The Object Being Changed

First we need to know the object being changed. We are going to change the background color of the Navigation bar in Nagios XI so we need to identify the HTML object that needs to be changed.

Right click on the top Navigation bar and select Inspect Element (Q)

 

 

This will display an additional window at the bottom of the web browser with the object that you just selected to inspect. In the following screenshot you can see the object has been highlighted.

 

 

Specifically this piece of information is what we are after:

<div id="header">

The object is a DIV, which is referenced in CSS styling using a # symbol

The name of the object is header

 

You can close the Inspect Element window by clicking the cross at the top right corner of it.

 

 

Create CSS File

Now you need to create a custom CSS file that has the custom color defined in it.

On your workstation, in a text editor create a file called Header-Solid.css with the following content:

#header {   
    background: rgba(191,220,248,1);
}

 

 

Upload CSS File

In Nagios XI Navigate to Admin > System Extensions > Custom Includes

Click the Browse button, navigate to the file Header-Solid.css and then click the Upload button.

You will receive a message saying it "Successfully uploaded file".

Now that the file is uploaded you can enable it. Click the check box for the Header-Solid.css file and then click the Save Changes button.

 

 

After clicking the Save Changes button the header background color should change the next time the header is refreshed (click the Admin menu item), you may need to press CTRL + F5 to force a refresh. If you followed this example it will look like:

 

 

 

Gradient

Here's a different example that uses CSS techniques to use a color gradient instead of a solid color. If you search the internet for "CSS Gradient" you'll find some free online tools that will provide you with the CSS code.

On your workstation, in a text editor create a file called Header-Gradient.css with the following content:

#header {   
    background: rgba(191,220,248,1);
    background: -moz-linear-gradient(left, rgba(191,220,248,1) 0%, rgba(132,183,241,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(191,220,248,1)), color-stop(100%, rgba(132,183,241,1)));
    background: -webkit-linear-gradient(left, rgba(191,220,248,1) 0%, rgba(132,183,241,1) 100%);
    background: -o-linear-gradient(left, rgba(191,220,248,1) 0%, rgba(132,183,241,1) 100%);
    background: -ms-linear-gradient(left, rgba(191,220,248,1) 0%, rgba(132,183,241,1) 100%);
    background: linear-gradient(to right, rgba(191,220,248,1) 0%, rgba(132,183,241,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfdcf8', endColorstr='#84b7f1', GradientType=1 );
}

 

Upload Header-Gradient.css using the same method as before. Make sure you delete or disable the existing Header-Solid.css file in the Custom Includes component. The result should be something like:

 

 

You can see that the navigation bar is getting darker as it progresses from left to right.

 

 

Images

Using images is also possible. Here's an example image called background.png I am going to use for the header example:

 

 

First you must upload the image.

In Nagios XI Navigate to Admin > System Extensions > Custom Includes

Click the Browse button, navigate to the file background.png and then click the Upload button.

You will receive a message saying it "Successfully uploaded file".

 

Now you need to create a CSS file. On your workstation, in a text editor create a file called Header-Image.css with the following content:

#header {   
    background-image: url("../images/background.png");
}

 

It's important to mention that the image files are stored in a directory called images and the css files are stored in a directory called css. Because the CSS code is being accessed from within the css directory we need to use a relative reference to the images folder using the syntax ../images/ as per the code example above.

 

Upload Header-Image.css using the same method as before. Make sure you delete or disable the existing Header-Solid.css or Header-Gradient.css files in the Custom Includes component. The result should be something like:

 

 

 

 

Troubleshooting

If you are not getting the desired results you can tail the httpd/error_log and it may help identify the issue. For example:

tail -f /var/log/httpd/error_log

The following error message was in the log file :

[Wed Oct 19 12:13:24 2016] [error] [client 10.25.254.50] File does not exist:
/usr/local/nagiosxi/html/includes/components/custom-includes/css/background.png,
referer: http://xi-c6x-x64/nagiosxi/includes/components/custom-includes/css/Header-Image.css?1475692699

Here I was able to identify my code was wrong as I had not correctly referenced the image file.

 

If you get an error message like the following:

 

 

You may need to download the latest version of the component. It can be downloaded using this link:

http://assets.nagios.com/downloads/nagiosxi/components/xi5/custom-includes.zip

Navigate to Admin > System Extensions > Manage Components and upload the custom-includes.zip file which should solve the problem.

 

 

Final Thoughts

For any support related questions please visit the Nagios Support Forums at:

http://support.nagios.com/forum/

1 (1)
Article Rating (1 Votes)
Rate this article
  • Icon PDFExport to PDF
  • Icon MS-WordExport to MS Word
Attachments Attachments
There are no attachments for this article.
Related Articles RSS Feed
Nagios XI - Installing Dashlets
Viewed 554 times since Wed, Jan 27, 2016
Resizing The VM Disk Size For CentOS 7
Viewed 5825 times since Tue, May 8, 2018
NRDP - Configuring SSL/TLS
Viewed 869 times since Mon, Jul 3, 2017
Nagios XI - Gauges - Understanding Thresholds
Viewed 1162 times since Tue, Aug 2, 2016
Nagios XI - Virtual Machine Notes
Viewed 711 times since Thu, Jan 28, 2016
Nagios XI - 10,000 Services and growing - NWC14
Viewed 713 times since Mon, Feb 8, 2016
Nagios XI - Generating Graphs
Viewed 754 times since Mon, Apr 29, 2019
Nagios XI - Resetting The nagiosadmin Password
Viewed 3936 times since Mon, Jan 25, 2016
Nagios XI - Installing Components
Viewed 478 times since Wed, Jan 27, 2016
Nagios XI - How To Use Capacity Planning
Viewed 746 times since Wed, Jan 27, 2016