Customize/change HTML of dashboards

[CheckMan]

Hello,

we are using the Host & Services Problems dashboard (v1.6.0p28) on our monitoring display. The display has a 4K resolution and the OS DPI scaling factor is 2x. But the dashboards font size is simply to small. Is there a way to customize the HTML? Where?
Zooming via browser isn’t usable for us…

Regards

[kdeutsch (Karl Deutsch)]

Hi @CheckMan,
you find the theme.css and theme.json files in the directory: share/check_mk/web/htdocs/themes/[classical|facelift|modern-dark]. Copy the file you want to edit to local/share/check_mk/web/htdocs/themes/[classical|facelift|modern-dark]/ and make your changes.

Karl

[Yggy]

Some additional notes:
You can make a new theme entirely including different icon (colours).
Copy an existing theme folder to a new theme folder as @kdeutsch suggested.

Make sure you change the name in theme.json to something unique, I called mine Darker.
From User | Color theme you can toggle between possible themes. From User | Edit profile | User interface theme | Set custom theme you can set your new uniquely named theme easier.
You need to stop and start your site to make your new theme visible first.

You can change images in the images folder, as long as they keep the same name.

If you need to make icons bigger, most are svg, you can just resize them in css. De-minifying the css makes it a lot better to read and change.

#main_menu img.icon {
    height: 20px;
    width: 20px;
}

If you need to change colors of a svg, you need to change the fill inside the svg files.

<style type="text/css">
	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F6F6F6;}
</style>

When images are missing in your theme, it will get them from the facelift theme instead.

<img src="themes/darker/images/icon_main_monitoring.svg" class="icon">
<img src="themes/facelift/images/icon_main_monitoring_active.svg" class="icon active">

But when you copy a (changed) version of that image in your theme images folder, that will be used instead.

<img src="themes/darker/images/icon_main_monitoring.svg" class="icon">
<img src="themes/darker/images/icon_main_monitoring_active.svg" class="icon active">

When doing updates, make sure to copy your custom theme to the new updated site.

[CheckMan]

Thanks both of you! Thats something I can work with