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

Need help customizing my map object

Votes:

0

Dear reader,

I have spoken to the Paessler support regarding something I wanted to change on a map object. There was an employee who helped me further with this, however, later on, got corrected by another employee, because Paessler does not help with customizations anymore.

So the employee helped me remove something from the map object, but then something messed up a little bit helped me fix it again and now I wanted the text to be a bit bigger, but he's not allowed to help anymore.

I wanted to see if there might be other PRTG users that can help me with this customization. Here's what I want to realize:

There's a status donut where I wanted to remove the text next to the little indicators. That is done, but then the text that was centered under the object was moved to the left. That is fixed as well, but now we prefer the text a little bit bigger. Is someone able to help with that? The custom code I have in styles_custom_v2 is:

".map_object.map_donutobj span.item.name {display: none !important;} .map_object.map_donutobj .objname {width: calc(100% - 78px) !important;}"

Who has a custom code that allows me to increase the text size?

Kind Regards, Sven

custom-object maps text

Created on Oct 26, 2018 11:29:20 AM



2 Replies

Accepted Answer

Votes:

0

Hi Sven,

This is not much more then CSS.

There is a nice trick in todays browser - you load the MAP directly (not via PRTG) and press F12 - this will show you source code... let's do it in steps:

  • open MAP URL/link in browser
  • press F12
  • use the little icon on the very top left on then menu with the source code it's normally called "Select Element...." a little rectangle with an arrow at the lower right - in most browsers
  • now move your mouse over the screen and find the object you want to change..

Now - having said this - look at what you have already as example:

.map_object.map_donutobj .objname

If I select a whole donut object in a map with the browser-object selector, I find it has a CLASS value assigned in the HTML TAG. The class has several name - one is map_object another is map_donutobj - underneath that DIV tag you find a P tag with the classname objname...

Now you know in theory the class and object you want to change.

In your case - you have it already:

.map_object.map_donutobj .objname {width: calc(100% - 78px) !important;}

you define the WIDTH of the text-box there as it seems... and CALC is a CSS command - see here: https://www.w3schools.com/cssref/func_calc.asp

If you look here - there is a CSS command for adjusting the font-size: https://www.w3schools.com/cssref/pr_font_font-size.asp

Finally - IMPORTANT overwrites any other rules defined - this is "important" cause there likely are CSS tags in the generated HTML code or references that would define the object - you actually overrule those with the !important value.

Now - in theory - you could even play around in the LIVE map with the HTML F12 toolbox... this would be done under STYLES or RULES - after selecting the TEXT-OBJECT in the website you should see a element.style{} there - you in theory could directly type this in:

font-size: 20px !important

and the element would change right away live in the website - note that this is not a change in the actual HTML code source - it is only temporarily in your browser.. the reloading of the MAP that occurs might make it harder to play with this cause you need to be quick :-)

To finalize it - what you probably want is something like this - not sure about the actual font-size and did not test it but it might just work or only need minor adjustments:

".map_object.map_donutobj span.item.name {display: none !important;} .map_object.map_donutobj .objname {width: calc(100% - 78px) !important; font-size: 20 px !important;}"

All I did was addidng this: font-size: 20 px !important;

I chose 20px because on an example map I used to try it on the fly to write those steps used 13px as base standard size for the font - not sure if 20 is the right choice - but it might be...

Regards

Florian Rossmark

www.it-admins.com

Created on Oct 26, 2018 2:05:12 PM



Votes:

0

It worked, thanks Florian!

Created on Oct 31, 2018 8:17:21 AM




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.