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

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

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

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.

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

Hi Bernd,

Thank you very much for sharing.

Have a nice day.