Home » Categories » Products » Nagios Log Server » Documentation » System Configuration

Nagios Log Server - Using The Custom Includes Page

Overview

This KB article shows you how to use the Custom Includes page in Nagios Log Server (available in NLS 2.1.0 onwards).

The Custom Includes component allows you to upload your own custom Cascading Style Sheets (CSS), JavaScripts and Images to add customizations to Nagios Log Server. This allows you to customize NLS 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 Log Server 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 Log Server Navigate to Admin > Management > 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".

Uploaded files are enabled by default. If you would like to disable them, uncheck the checkbox to the left of the file's name.

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 Header-Gradient.css file shows below Header-Solid.css so that it overwrites any conflicting properties. 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 Log Server Navigate to Admin > Management > 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 that Header-Image.css is placed below the existing Header-Solid.css or Header-Gradient.css files in the Custom Includes component. The result should be something like:

 

 

 

 

 

Final Thoughts

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

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

0 (0)
Article Rating (No 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 Log Server - Single Instance Deployment
Viewed 398 times since Mon, Feb 12, 2018
Nagios Log Server - Changing Data Store Path
Viewed 636 times since Thu, Jan 28, 2016
Nagios Log Server - How To Configure SSL
Viewed 555 times since Thu, Jan 28, 2016
Nagios Log Server - Resizing the VM Disk Size
Viewed 724 times since Thu, Mar 10, 2016
Nagios Log Server - Understanding and Troubleshooting Yellow Cluster Health
Viewed 2161 times since Mon, Feb 15, 2016
Nagios Log Server - Managing Indices
Viewed 511 times since Thu, Jan 28, 2016
Nagios Log Server - Monitoring Using NCPA + Nagios XI
Viewed 210 times since Mon, Sep 16, 2019
SSL/TLS - Signing Certificates With A Microsoft Certificate Authority
Viewed 1703 times since Wed, Jun 14, 2017
Nagios Log Server - Removing An Instance From A Cluster
Viewed 464 times since Wed, Mar 21, 2018
Nagios Log Server - Real Life Experience of Nagios Log Server - NWC15
Viewed 667 times since Mon, Feb 8, 2016