Hi, one of my colleagues is color blind. The default colors of yellow and green look almost exactly the same to him, if not the same. He is unable to "see" or decide which is the green or which is the yellow. Using https://kb.paessler.com/en/topic/43283-change-color-of-sunburst-treemap-in-maps#reply-137223 I was able to change the appearance of the Sunburst green only (as long as that is very different from yellow, it's fine), but there are many area's that keep using the same green as the default green, gauges, sensors, background related sensors in maps, etc. I really think PRTG should be taking in account color blind people and offer an option to change the appearance of green throughout PRTG, and not via a deprecated method that is lost on upgrades. How can we achieve this and if not possible, will it be a future option please?
Customizing the PRTG Web Interface (Sunburst, Gauges, Sensors)
Votes:
0
5 Replies
Votes:
0
Hi ahoppe,
Please insert the following CSS code into
%PROGRAMFILES(X86)%PRTG Network Monitor/webroot/css/styles_custom_v2.css
/* Error */
.icon.sensr:before, .status5 icon:before, .header_sensorstats .statusinfo.downsens a, .sensorTree.tiny sensor.status5 {background-color: #e30613 !important;}
/* Partial Error */
.icon.sensq:before, .status14 icon:before, .header_sensorstats .statusinfo.partialdownsens a, .sensorTree.tiny sensor.status14 {background-color: linear-gradient(135deg,#b8c419 0,#b8c419 50%,#e30613 50%,#e30613 100%) !important;}
/* Ack Error */
.icon.senso:before, .status13 icon:before, .header_sensorstats .statusinfo.downacksens a, .sensorTree.tiny sensor.status13 {background-color: #e67278 !important;}
/* Up */
.icon.sensg:before, .status3 icon:before, .header_sensorstats .statusinfo.upsens a, .sensorTree.tiny sensor.status3 {background-color: #b8c419 !important;}
/* Warning */
.icon.sensy:before, .status4 icon:before, .header_sensorstats .statusinfo.warnsens a, .sensorTree.tiny sensor.status4 {background-color: #f5c500 !important;}
/* Unusual */
.icon.sensp:before, .status10 icon:before, .header_sensorstats .statusinfo.unusualsens a, .sensorTree.tiny sensor.status10 {background-color: #f59c00 !important;}
This will convert all status colors accordingly :) If you want this for your colleague only, there are various extensions for most browsers that allow to store customized CSS for sites.
Kind regards,
Stephan Linke, Tech Support Team
Created on Feb 9, 2018 11:39:26 AM by
Votes:
0
Hello Bernd,
Thank you for your message.
Regarding paused sensors, notice that there is different status which are PausedByUser, PausedBySchedule and PausedbyDependency. These status have a different code that you can find in this KB article: https://kb.paessler.com/en/topic/86777-complete-list-for-sensor-status-codes
Here is the CSS code that you can use to modify the status PausedByUser (needs to be adapted for the others):
/* PausedbyUser */
.icon.sensp:before, .status7 icon:before, .header_sensorstats .statusinfo.pausedsens a, .sensorTree.tiny sensor.status7 {background-color: #00a2ff !important;}
When you have modified the CSS file, you need to restart the service of the Core to take the modification into account. You can restart it via PRTG Administration Tool > Service Start/Stop.
Regards.
Created on May 12, 2021 9:02:32 AM by
Last change on May 12, 2021 9:03:52 AM by
Votes:
0
Hi Bernd,
Thank you very much for sharing.
Have a nice day.
Created on May 19, 2021 6:30:49 AM by
Add comment