Custom Includes and Logo: 2 Cool Nagios XI User Interface Tricks

Nagios XI comes pre-loaded with several great themes to choose from, but with Custom Includes you can really make the look of the web interface your own. Although the included themes like Modern Dark, its brighter twin Modern Light, the streamlined Neptune option, throwback options like 2014 and Classic, and Color Correction mode provide a variety of choices for the look and feel of the web interface, some users and organizations may wish to customize further.

In this article we’ll discuss Custom Includes, a way to fine-tune and personalize your experience in the XI user interface (UI).

How to Use Custom Includes

To access the component, navigate to Admin > System Extensions > Custom Includes.

Here you can upload CSS, Javascript, and image files, and once uploaded, select which you want to activate to modify the user interface.

As a simple example, let’s change the header and footer to a new gradient. First, we’ll verify the name of the objects we want to modify by right-clicking them and choosing Inspect in our browser:

Now that we’ve determined the object names, we’ll take the easy route and generate some custom CSS gradient code using a free web generator like https://cssgradient.io/. Finally, we’ll create two files in a text editor and save them as .css.

Header-Gradient-Blue.css

#header {
    background: #020024;
    background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

Footer-Gradient-Blue.css

#footer {
    background: #020024;
    background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

Now we’ll upload the files in the Custom Includes menu, click their checkboxes, and click Save Changes. Once you refresh your browser or bounce to a new menu, you’ll see the style change:

We could take the customization further by customizing objects like leftnav, and the mid-menu section titles. Regarding section titles, they do take a bit more work since each is an individual object. For example, to customize the section titles in the Home menu, we’d load a .css file with the following:

#mid-menu-home-section-favorites {   
	background: #020024;
	background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 91%, rgba(0, 212, 255, 1) 100%);
}

#mid-menu-home-section-quickview {   
	background: #020024;
	background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 91%, rgba(0, 212, 255, 1) 100%);
}

#mid-menu-home-section-details {   
	background: #020024;
	background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 91%, rgba(0, 212, 255, 1) 100%);
}

#mid-menu-home-section-graphs {   
	background: #020024;
	background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 91%, rgba(0, 212, 255, 1) 100%);
}

#mid-menu-home-section-maps {   
	background: #020024;
	background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 91%, rgba(0, 212, 255, 1) 100%);
}

#mid-menu-home-section-incident-management {   
	background: #020024;
	background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 91%, rgba(0, 212, 255, 1) 100%);
}

#mid-menu-home-section-monitoringprocess {   
	background: #020024;
	background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 91%, rgba(0, 212, 255, 1) 100%);
}

Here’s a look at the Home menu with the above CSS loaded, as well as a new file to modify leftnav to match the gradient we chose for our header and footer:

Note that the Neptune theme won’t be impacted by CSS changes made to Custom Includes. For best results, customize the Modern Dark and Modern Light themes.

You can also incorporate images into your customization, as detailed toward the end of this guide:

Using Custom Includes in Nagios XI

To return the UI to its default look, simply uncheck your custom files in the Custom Includes settings and save your changes.

How to Use the Custom Logo Component

You may also wish to add your own company logo to the upper left of the Nagios XI UI, which can be done easily with the Custom Logo Component found in Admin > System Extensions > Components > Custom Logo.

You’ll need to copy whichever file you wish to use as your new logo to /usr/local/nagiosxi/html/images on your Nagios XI server and make sure it’s 100px X 42px. Also make sure that you click the Enable Custom Logo checkbox once your settings are updated to activate the change.

In this example we’re having a little fun with the feature, but for practical uses it’s a great way to brand the UI and make your users feel at home by using your company or department’s official logo.

Note that in the Custom Logo menu you can also change the Target URL for the logo to any URL you’d like.

If you aren’t already using Nagios XI and would like to try out these features, we offer a free trial version you can take for a spin:

Nagios XI Free Trial Download

We’d also be happy to offer you a custom Demo session if you want a guided tour of our solutions or a free Quickstart remote session with a sales engineer to help you get a few things set up. You can email [email protected] for details on setting up either option.