I'm familiar with using the HTML Before/After functionality to insert content before and after an icon. However, what I am trying to do is change the how the text displays for the icon itself. For example, using a device status icon I would like the text to display as white rather than black. I've tried inserting something like <p style="color:#fff;"> before and </p> after, but that isn't the correct solution. Are there ways to edit the stylesheet associated with the icons?
Changing Text of Status Status Icon
Votes:
0
9 Replies
Votes:
0
Hi there,
Which exact mapobject do you want to edit? You can find alle mapobjects under:
C:\Program Files (x86)\PRTG Network Monitor\webroot\mapobjects\ |
Best regards.
Votes:
0
I'm working with the Primary Channel Gauge Status Icon. I'm wanting to text on the icon to appear as white rather than black.
Votes:
0
Hi there,
Please add the following code in between line 6 and 8 of the "Gauges Sensor Primary.htm" file under "C:\Program Files (x86)\PRTG Network Monitor\webroot\mapobjects\":
<style>#<@itemid> span {color: #fff !important;} #<@itemid> text {fill: rgb(255, 255, 255) !important;} #<@itemid> p {color: #fff !important;}</style> |
Now all fonts on the map object are white.
Best regards.
Votes:
0
Thank you. This solution will be global, correct? I need the text on the objects to be white for one particular map. It would need to be black for others.
Votes:
0
Hi there,
Yes, this is global. To set this for only one map object, you have to find out the mapobjects ID. This can be done via "Strg + Right Click > Inspect Element on the Map Object". The map object id should then look similar to: "mapelement_2539_110" and can be found directly under the comment line. Afterwards just paste the following code into the "HMTL-Before" field, but make sure that you change all three "<@itemid>" to the id of the map object "mapelement_2539_110":
<style>#mapelement_2539_110 span {color: #fff !important;} #mapelement_2539_110 text {fill: rgb(255, 255, 255) !important;} #mapelement_2539_110 p {color: #fff !important;}</style> |
Best regards.
Votes:
0
Hello. I am trying the above. PRTG was updated to version 18.xx.xx.xx and now the text for Status Icon "Sensor Message only on Status Related Background" is white. It makes it hard on the eyes, especially on maps. I tried the above, with what I thing was the correct #mapelement (according to the highlight of the block on the map, below the comment line) -
<style>#mapelement_36831_128 span {color: #fff !important;} #mapelement_36831_128 text {fill: rgb(0,0,0) !important;} #mapelement_36831_128 p {color: #fff !important;}</style>
I put this in the HTML-Before box on the map designer - is this not where it should go? If it goes elsewhere, is the change on the probe server or on the core server?
Votes:
0
Unfortunately,
The mapobjects structure has changed due to the facelift. Please use the following style code:
<style> #mapelement_36831_128[class*=map_iconcolor_sens] .status, #mapelement_36831_128[class*=map_iconcolor_sens] span {color: #000 !important; text-shadow: none !important;} #mapelement_36831_128[class*=map_iconcolor_has] span {color: #000 !important; text-shadow: none !important;} </style>
Let me know if that works out for you. :)
Best regards.
Votes:
0
Thank you, that worked very well. However, it looks like I have to change the sub-id for each sensor on the map. This is a very time consuming process, one I am happy to do, but not sure if our clients would like the time spent on it. Is there different code we can insert on the back end core files for itself for that map ID? If so, would it be on the core files on the local probe or on the core server itself? I understand that the code may be overwritten each update, but if its a simple change then it may be worth doing after each update, as the new white font on that map object (Sensor Message only on Status Related Background).
Votes:
1
Hi there,
You can also try the following approach, sorry for net mentioning it earlier:
- Add a "Custom HTML" Element to the Map
- Add the following HTML Code in the "HTML Before-Field" of this "Custom HTML Object":
<p><style> .map_object[class*=map_iconcolor_sens] .status, .map_object[class*=map_iconcolor_sens] span {color: #000 !important; text-shadow: none !important;} .map_icon_large[class*=map_iconcolor_has] span {color: #000 !important; text-shadow: none !important;} </style></p>
Created on Jan 31, 2018 8:21:23 AM by
Dariusz Gorka [Paessler Support]
Last change on Jan 31, 2018 8:21:38 AM by
Dariusz Gorka [Paessler Support]
Add comment