Custom CSS host overview hexagon

[tuanama00 (Jose Araujo)]

Hi,

I want change css for change to free this:

I use this version : Checkmk Free Edition 2.1.0p49

Where locate that css file ?

Im using checkmk with docker-compose

[Glowsome (Michael Honkoop)]

Hi there, and welcome to the Forum !

I think customizing such part will not last thru an upgrade, so if a solution would be presented it will require additional means to persist.

But please do explain why such a change is important to you ?

• Glowsome

[tuanama00 (Jose Araujo)]

Hi, for me is better see green color, gray color for me is inactive.

[Yggy]

The hexagon is made with svg, it’s css is in the theme css file:
[host]/[site]/check_mk/themes/[theme name]/theme-[version].css

Look for css selectors with names like path.hexagon.[state] and change the corresponding fill and/or stroke values.

To have your changes easier survive updates, is to add a new theme to Checkmk and make the css changes in your theme. And just keep an copy of that theme as backup.

In this old post I gave some notes how to make your own theme:

Customize/change HTML of dashboards

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 them…

Edit:
There is a little bug though when creating new themes, not sure if that got fixed. Canvas graphs get light theme text values assigned even though your new theme is a dark one. See some of my notes on it in this post:

Manager asked for a bit more color

After debating what monitoring software to use we finally decided on CheckMK and the implementation went very smooth However my manager wanted the host overview to display as “green” if the Hosts are in the “OK” state. Apparently this was a nice feature of PRTG so he asked if it was possible to implement that. So I created a new theme that does exactly that. It uses the default colors in the CheckMK CI. [Imgur] Does anyone know how to …

[tuanama00 (Jose Araujo)]

Hi Yggy,

Im searching in all folder, can’t find this folder check_mk/themes/ [theme name]/theme- [version].css in 2.3.0 cloud version.

[Yggy]

I don’t know 2.3 cloud edition and what changes there are compared to my 2.1 raw edition, but hopefully this part didn’t change much and following might help.

Local path of themes folder of specific versions on the server was with 2.0 and 2.1 in:
/omd/sites/[site name]/share/check_mk/web/htdocs/themes/

However, if you want to keep your changed files from the core code, for separate back-up for when doing updates, you should put your theme folder in following path:
/omd/sites/[site name]/local/share/check_mk/web/htdocs/themes/

When I was looking at the css selectors, I was doing that from client side. And although above was mentioned in post above my notes in Customize / change HTML of dashboards, it would have been better to repeat that here. (-;