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/
Article ID: 556
Created On: Tue, Oct 18, 2016 at 8:17 PM
Last Updated On: Tue, Oct 18, 2016 at 9:44 PM
Authored by: tlea
Online URL: https://support.nagios.com/kb/article/nagios-xi-using-the-custom-includes-component-556.html