Theres not really any built in features for styling Nagios, so i devised a simple workaround that utilizes html, css and jquery to do the trick.
We need to run this on the same domain as Nagios itself or disable cors for this to work.
<html>
<head>
<title>Nagios Services Monitor</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<style>
body {
padding: 0;
margin: 0;
}
#nagios {
height: 100%;
width: 100%;
overflow: hidden;
zoom: 175%;
}
</style>
</head>
<body>
<div id=nagios></div>
<script>
$(document).ready(function(){
setInterval(function()
{
$.get('/cgi-bin/nagios4/status.cgi?host=all&servicestatustypes=28',
function(data) {
data = data.replace("Updated every 90 seconds",
"Updated every second");
data = data.replaceAll(/<script[\s\S]+<\/script>/g,
"<!-- scripts removed -->");
$('#nagios').html(data);
});
},1000);
});
</script>
</body>
</html>
Tested in Chromium.