What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general.

Learn more

PRTG Network Monitor

Intuitive to Use. Easy to manage.
More than 500,000 users rely on Paessler PRTG every day. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free Download

Top Tags


View all Tags

Customizing the PRTG Web Interface (Sunburst, Gauges, Sensors)

Votes:

0

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?

color colorblind gauges sensors sunburst-personalization

Created on Feb 8, 2018 1:26:18 PM



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  Stephan Linke [Paessler Support]



Votes:

0

Hi all,
I can see this is an older post, but I hope someone will answer anway. What would be the code for a sensor with a state of "paused"?

Regards,
Bernd

Created on May 12, 2021 8:31:42 AM



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  Florian Lesage [Paessler Support]

Last change on May 12, 2021 9:03:52 AM by  Florian Lesage [Paessler Support]



Votes:

0

Hi Florian,
thank you for ypur quick response. I could use the code provided and want to share the code for
/* PausedbyDepency */ \\ .icon.sensp:before, .status8 icon:before, .header_sensorstats .statusinfo.pausedsens a, .sensorTree.tiny sensor.status8 {background-color: #00a2ff !important;}
This way I can customize the two cases we need to change.

Regards,
Bernd

Created on May 18, 2021 6:21:02 PM



Votes:

0

Hi Bernd,

Thank you very much for sharing.

Have a nice day.

Created on May 19, 2021 6:30:49 AM by  Florian Lesage [Paessler Support]




Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.