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

Customisation of map object colour

Votes:

2

I have a map with multiple "Sizable Icon with Status Related Background" objects which are monitoring devices with multiple sensors.

I really like the fact that if 1 sensor goes down, the entire block goes red.

However, if 1 sensor is paused, the entire block goes blue.

I see in the the actual map object in "\webroot\mapobjects\An Icon A9.htm", the object is using <#sensor type="colorclassofstate" prefix="map_iconcolor_" id="<@objectid>"> to display the status as a colour.

My question is, is it possible to have the paused colour removed from the map object as I can already see the number of paused sensors as defined in the <span> tags.

This is because all I care about is seeing what is up and what is down.

The other solution I can think of is changing the paused html colour from #dbe7f5 to a green colour. Would that be a possibility in the html before section of the map object?

Thanks!

color custom-html customize map-objects prtg13

Created on Jul 6, 2013 11:30:00 AM



15 Replies

Accepted Answer

Votes:

1

Hi,

i think the best way to achieve this is to create a new mapobject (copy the one you want and rename it in the first line), rename the prefix in the <#sensor type="colorclassofstate" placeholder and add custom css rules to css\styles_custom.css.

You can change the prefix to my_map_iconcolor_. Then add the following set of rules to your styles_custom.css and rename the prefix there too.

.map_object.map_iconcolor_senso,.map_object.map_iconcolor_senso label,.map_object.map_iconcolor_senso span, .map_object.map_iconcolor_sensr,.map_object.map_iconcolor_sensr label,.map_object.map_iconcolor_sensr span, .map_object.map_iconcolor_sensq,.map_object.map_iconcolor_sensq label,.map_object.map_iconcolor_sensq span { background-color: <#colorcode color="statusdown">; color: #fff; } .map_object.map_icon2.map_iconcolor_sensg,.map_object.map_icon2.map_iconcolor_sensg label,.map_object.map_icon2.map_iconcolor_sensg span { background-color: <#colorcode color="statusup">; } .map_object.map_iconcolor_sensy,.map_object.map_iconcolor_sensy label,.map_object.map_iconcolor_sensy span { background-color: <#colorcode color="statuswarning">; } .map_object.map_iconcolor_sensb,.map_object.map_iconcolor_sensb label,.map_object.map_iconcolor_sensb span { background-color: <#colorcode color="statuspaused">; } .map_object.map_iconcolor_sensp,.map_object.map_iconcolor_sensp label,.map_object.map_iconcolor_sensp span { background-color: <#colorcode color="statusunusual">; } .map_object.map_iconcolor_sensx,.map_object.map_iconcolor_sensx label,.map_object.map_iconcolor_sensx span { background-color: <#colorcode color="statusunknown">; color: #fff; } .map_object.map_iconcolor_hasblack { background-color: #ddd; } .map_object.map_iconcolor_hasgreen { background-color: #D5FDDA; } .map_object.map_iconcolor_hasblue { background-color: #C3D2E9; } .map_object.map_iconcolor_hasorange { background-color: #FED78C; } .map_object.map_iconcolor_hasyellow { background-color: #F8FBC5; } .map_iconcolor_hasred,.map_iconcolor_haspartialred,.map_iconcolor_hasredok { background-color: #FFCCCC !important; }

Then you can change the colors as you like.

Update: After changes to the styles_custom.css you need to clear your browsers cache to see the changes!

Regards, Daniel

Created on Jul 8, 2013 11:22:40 AM by  Daniel Elsner [Paessler Support]

Last change on Jul 8, 2013 12:45:31 PM by  Daniel Elsner [Paessler Support]



Votes:

0

Hi There

Thank you for the feedback.

So my map object is:

<!--Status Icons: Sizeable Icon on Status Related Background (custom colours)-->

<div class="map_object map_icon2 map_icon_large <#sensor type="colorclassofstate" prefix="map_customcolour_" id="<@objectid>">" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">"> <#mapobject type="objectgrip" mode="<@editmode>"> <#mapobject type="htmlbefore" subid="<@subid>"> <span> <#objectstatus name="downsens" id="<@objectid>"> <#objectstatus name="partialdownsens" id="<@objectid>"> <#objectstatus name="downacksens" id="<@objectid>"> <#objectstatus name="warnsens" id="<@objectid>"> <#objectstatus name="upsens" id="<@objectid>"> <#objectstatus name="pausedsens" id="<@objectid>"> <#objectstatus name="unusualsens" id="<@objectid>"> <#objectstatus name="undefinedsens" id="<@objectid>"> <br> <#objectproperty name="Name" id="<@objectid>"> </span> <#mapobject type="htmlafter" subid="<@subid>"> </div>

Then in styles_custom.css I have added:

.map_object.map_customcolour_senso,.map_object.map_customcolour_senso label,.map_object.map_customcolour_senso span, .map_object.map_customcolour_sensr,.map_object.map_customcolour_sensr label,.map_object.map_customcolour_sensr span, .map_object.map_customcolour_sensq,.map_object.map_customcolour_sensq label,.map_object.map_customcolour_sensq span { background-color: <#colorcode color="statusdown">; color: #fff; } .map_object.map_icon2.map_customcolour_sensg,.map_object.map_icon2.map_customcolour_sensg label,.map_object.map_icon2.map_customcolour_sensg span { background-color: <#colorcode color="statusup">; } .map_object.map_customcolour_sensy,.map_object.map_customcolour_sensy label,.map_object.map_customcolour_sensy span { background-color: <#colorcode color="statuswarning">; } .map_object.map_customcolour_sensb,.map_object.map_customcolour_sensb label,.map_object.map_customcolour_sensb span { background-color: <#colorcode color="statuspaused">; } .map_object.map_customcolour_sensp,.map_object.map_customcolour_sensp label,.map_object.map_customcolour_sensp span { background-color: <#colorcode color="statusunusual">; } .map_object.map_customcolour_sensx,.map_object.map_customcolour_sensx label,.map_object.map_customcolour_sensx span { background-color: <#colorcode color="statusunknown">; color: #fff; } .map_object.map_customcolour_hasblack { background-color: #ddd; } .map_object.map_customcolour_hasgreen { background-color: #D5FDDA; } .map_object.map_customcolour_hasblue { background-color: #C3D2E9; } .map_object.map_customcolour_hasorange { background-color: #FED78C; } .map_object.map_customcolour_hasyellow { background-color: #F8FBC5; } .map_customcolour_hasred,.map_customcolour_haspartialred,.map_customcolour_hasredok { background-color: #FFCCCC !important; }

However, now my status is completely transparent. Have I missed something?

Created on Jul 8, 2013 12:19:43 PM



Votes:

0

Hi,

can you please try to clear your browser cache? In FireFox and Chrome STRG+F5 should do it!

Regards, Daniel

Created on Jul 8, 2013 12:32:52 PM by  Daniel Elsner [Paessler Support]



Votes:

0

Hi Daniel

Ah such a simple thing to miss. Thank you! This is exactly what I was looking for!

Created on Jul 8, 2013 12:38:45 PM



Votes:

0

As with the original poster, all I care about seeing is what is up and what is down. Unlike the original poster, however, I would like to display the information using the Sunburst map object. What I'd like is to only have two colours on this map object, green and red, and display everything other than an Unacknowledged Down as green.

Unfortunately the instructions above don't seem to work with the Sunburst map object. I've tried numerous ways of customising the map object but with no success. How would I go about creating a Sunburst map object that displays all statuses apart from Unacknowledged Down as green?

Created on Jul 8, 2015 3:46:42 PM



Votes:

0

Dear IanTW

The Sunburst cannot be configured. Only the status related backgrounds and other HTML map objects can be changed.

Created on Jul 9, 2015 9:46:40 AM by  Arne Seifert [Paessler Support]



Votes:

0

I know the last post was a year ago but I hope someone could still help. I am trying to achieve almost the same thing as Matthew Clark, I want to be able to change the colors used with the 'Sizeable Icon on Status Related Background' map object.

I implemented the fix as per Daniel's instructions, but ran into the same problem as Matthew, the box turns completely transparent, only the text is shown. I tried clearing the cache with ctrl-f5 but nothing changes.

Any suggestions would be greatly appreciated.

Created on Jul 5, 2016 12:48:36 PM



Votes:

0

Dear Mca

I am sorry, we constantly rework the UI elements of PRTG. That can break hacks which worked at an earlier point in time.

In general, we don't support custom status colors, I am sorry.

Created on Jul 5, 2016 2:58:48 PM by  Arne Seifert [Paessler Support]



Votes:

0

Hi Mca,

Paessler won't support something like this. But I have this working on the latest version. If you want you can post your email address and I can send you the customisation that I have done.

Created on Jul 5, 2016 3:15:46 PM



Votes:

0

Hi Matthew, I would be really interested in any solution you might have, thank you for offering to share it with me.

I made an email especially for posting on the forum as to not compromise my actual email, I hope that is understandable.

[email protected]

Created on Jul 6, 2016 4:19:07 PM



Votes:

0

is it possible to filter out the acknowledged down sensors for the icon status? I have commented out the <#objectstatus name="partialdownsens" id="<@objectid>"> line in the .htm however the overall status of the icon is still red is there are acknowledged down sensors.

Created on Oct 19, 2017 9:31:15 PM



Votes:

0

Dear sstahl,

depending on the map object it might be possible. To be more specific, some objects can use the status filter (filter_status=...) . The according statuses are

 1 = Unknown
 2 = Collecting
 3 = Up
 4 = Warning
 5 = Down
 6 = No Probe
 7 = Paused by User
 8 = Paused byDependency
 9 = Paused by Schedule
10 = Unusual
11 = Paused byLicense
12 = Paused Until ...
13 = Down Acknowledged
14 = Partial Down

Created on Oct 20, 2017 7:39:40 AM by  Arne Seifert [Paessler Support]

Last change on Oct 20, 2017 7:42:03 AM by  Arne Seifert [Paessler Support]



Votes:

0

Is it possible to give an example with the HTML file? Where can I apply the filter (13) here?

{{{<!--Status Icons: Sizeable Icon on Status Related Background-->

<div class="map_object map_icon2 map_icon_large <#sensor type="colorclassofstate" prefix="map_iconcolor_" id="<@objectid>">" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">"> <#mapobject type="objectgrip" mode="<@editmode>"> <#mapobject type="htmlbefore" subid="<@subid>">

<#objectproperty type="nodename" id="<@objectid>" var="nodename"> <#objectstatus name="lastvalue" id="<@objectid>" var="lastvalue"> <#objectstatus name="message" show="textraw" id="<@objectid>" var="message">

<span> <#objectstatus name="downsens" id="<@objectid>"> <#objectstatus name="partialdownsens" id="<@objectid>"> <#objectstatus name="warnsens" id="<@objectid>"> <#objectstatus name="upsens" id="<@objectid>"> <#objectstatus name="pausedsens" id="<@objectid>"> <#objectstatus name="unusualsens" id="<@objectid>"> <#objectstatus name="undefinedsens" id="<@objectid>"> <br> <#objectproperty name="Name" id="<@objectid>"> <br><#if value="@nodename" is="sensor" then="@lastvalue" varexpand="value,then"> <br>&nbsp; <br><#if value="@nodename" is="sensor" then="@message" varexpand="value,then"> </span> <#mapobject type="htmlafter" subid="<@subid>">

</div>}}}

Best Regards

Created on Nov 17, 2017 11:54:53 AM



Votes:

0

Dear Dennikat,

this kind of filtering is possible only for some objects, like tables. Status icons are different objects.

Created on Nov 17, 2017 2:34:59 PM by  Arne Seifert [Paessler Support]



Votes:

0

I have an issue getting the custom background colors to work after several tries. I keep getting a transparent background instead of a color. The main goal in doing this is to get Paused and Acknowledged sensors to set the background to the same Green as Up.

I made a copy of 'An Icon A9' and changed the name. I also changed the prefix to 'map_iconcolorcust_'.

Based on what I've read here and what I gleaned from looking at main.css, I added the following to 'styles_custom_v2.css' :

{{{.map_object.map_icon2.map_iconcolorcust_sensg, .map_object.map_icon2.map_iconcolorcust_sensg label, .map_object.map_icon2.map_iconcolorcust_sensg span, .map_object.map_iconcolorcust_sensb, .map_object.map_iconcolorcust_sensb label, .map_object.map_iconcolorcust_sensb span, .map_object.map_iconcolorcust_senso, .map_object.map_iconcolorcust_senso label, .map_object.map_iconcolorcust_senso span, .map_object.map_iconcolorcust_sensp, .map_object.map_iconcolorcust_sensp label, .map_object.map_iconcolorcust_sensp span, .map_object.map_iconcolorcust_sensq, .map_object.map_iconcolorcust_sensq label, .map_object.map_iconcolorcust_sensq span, .map_object.map_iconcolorcust_sensr, .map_object.map_iconcolorcust_sensr label, .map_object.map_iconcolorcust_sensr span, .map_object.map_iconcolorcust_sensx, .map_object.map_iconcolorcust_sensx label, .map_object.map_iconcolorcust_sensx span, .map_object.map_iconcolorcust_sensy, .map_object.map_iconcolorcust_sensy label, .map_object.map_iconcolorcust_sensy span { text-shadow: -1px 0 2px rgb(87 87 86 / 50%), 0 1px 2px rgb(87 87 86 / 50%), 1px 0 2px rgb(87 87 86 / 50%), 0 -1px 2px rgb(87 87 86 / 50%); color:#fff; }

.map_object.map_iconcolorcust_sensx, .map_object.map_iconcolorcust_hasblack { background-color:#878787; color:#fff; }

.map_object.map_iconcolorcust_hasgreen { background-color:#b8c419; color:#fff; }

.map_object.map_iconcolorcust_sensb, .map_object.map_iconcolorcust_hasblue, .map_iconcolorcust_sensb, .map_iconcolorcust_hasblue { background-color:#b8c419; color:#fff; }

.map_object.map_iconcolorcust_hasorange { background-color: #FED78C; }

.map_object.map_iconcolorcust_hasyellow { background-color: #F8FBC5; }

.map_iconcolorcust_hasred, .map_iconcolorcust_haspartialred, .map_iconcolorcust_hasredok { background-color: #FFCCCC !important; }

}}}

I've also tried:

.map_iconcolorcust_hasblack,
.map_iconcolorcust_sensx {
  background-color:#878787;
  color:#fff;
}

.map_iconcolorcust_hasgreen,
.map_iconcolorcust_sensg {
  background-color:#b8c419;
  color:#fff;
}

.map_iconcolorcust_hasblue,
.map_iconcolorcust_sensb {
  background-color:#b8c419;
  color:#fff;
}

.map_iconcolorcust_hasblue *,
.map_iconcolorcust_sensb * {
  color:#fff;
}


.map_iconcolorcust_hasorange,
.map_iconcolorcust_sensp {
  background-color:#f59c00;
  color:#fff;
}

.map_iconcolorcust_hasyellow,
.map_iconcolorcust_sensy {
  background-color:#f5c500;
  color:#fff;
}

.map_iconcolorcust_hasred,
.map_iconcolorcust_haspartialred,
.map_iconcolorcust_sensr {
  background-color:#e30613;
  color:#fff;
}

.map_iconcolorcust_hasack,
.map_iconcolorcust_senso {
  background-color:#b8c419;
  color:#fff;
}

If I change the prefix back to 'map_iconcolor_' it works like the original, so I'm pretty sure it's an issue with my CSS.

Created on Oct 5, 2021 9:49:44 PM




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.