New Question
 
 
PRTG Network Monitor

Intuitive to Use.
Easy to manage.

300.000 administrators have chosen PRTG to monitor their network. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free PRTG
Download >>

 

What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general. You are invited to get involved by asking and answering questions!

Learn more

 

Top Tags


View all Tags


Making Status Icons larger

Votes:

0

Your Vote:

Up

Down

I currently have a map that has Status Icons No-Name, Transparent, Large.

Is there a way to replace the icons that are displayed with even bigger ones?

The look of the icons is fine, but I would want them displayed at 200% of their size. How could I accomplish that?

maps prtg resize status-icons style-sheet

Created on Mar 12, 2010 4:11:43 PM by  moster (0) 1

Last change on Mar 16, 2010 8:09:16 AM by  Daniel Zobel [Product Manager]



Best Answer

Accepted Answer

Votes:

0

Your Vote:

Up

Down

Use this:

.map_icon_large div.sensg, .map_icon_large div.sensr, .map_icon_large div.sensb, .map_icon_large div.senso, .map_icon_large div.sensy, .map_icon_large div.sensp, .map_icon_large div.sensx { height:100px !important; width:100px !important; display:inline-block; background-image:url(yourimageurl); padding-left:50px; }

the <a> tag is defined as "display:inline" in the original CSS, so you can not control the size without setting "display" to a block-type.

"padding-left" must be set to the width of your image.

To apply your own CSS follow these instructions:
How can I re-brand and customize the PRTG web interface using CSS?

Created on Mar 16, 2010 9:06:01 AM by  Dirk Paessler [Founder Paessler AG] (10,921) 3 4

Last change on Mar 18, 2010 12:03:55 PM by  Dirk Paessler [Founder Paessler AG] (10,921) 3 4



8 Replies

Votes:

0

Your Vote:

Up

Down

Created on Mar 15, 2010 9:29:20 AM by  Gennady (60) 2 1

Last change on Mar 15, 2010 10:17:20 AM by  Daniel Zobel [Product Manager]



Votes:

1

Your Vote:

Up

Down

It is not a simply task to resize these, it would involve a lot of CSS tweaking...

Did you try zooming the webpage in the web browser?

Created on Mar 15, 2010 10:31:50 AM by  Dirk Paessler [Founder Paessler AG] (10,921) 3 4



Votes:

0

Your Vote:

Up

Down

I have looked in style.css. From attempting to view the source of the embedded iFrame which shows the customized map, I see that there is in the following order:

<div> /
   <div id=showamap> ~
      <div> ~
         <div class="map_background"> ~
            <div class="map_objectbox> ~
               <div class="map_object map_icon map_icon_large"> ~
                  <div class="sensg">

The sensg seems to indicate the actual status icon, but changing the options for that (for example):

.sensg {
	height:100px !important;
	width:100px !important;
}

[Actual height would be refined based on size needs, but I changed it to 100 just to make the change look obvious on the webpage.]

Does not seem to do anything. If I replace the led_green_big.png in the icon file with a larger icon, it just gets cut off.

If I try to increase the height and width of .map_icon_large div.sensg, it seems to do nothing. The sensors do not appear to be embedded in any sort of table.

Do you have any idea which options I would need to update in the css file to be able to display a larger or the original icon in a larger manner?

Thanks for your help.

Created on Mar 15, 2010 6:17:42 PM by  moster (0) 1

Last change on Mar 16, 2010 9:06:53 AM by  Dirk Paessler [Founder Paessler AG] (10,921) 3 4



Accepted Answer

Votes:

0

Your Vote:

Up

Down

Use this:

.map_icon_large div.sensg, .map_icon_large div.sensr, .map_icon_large div.sensb, .map_icon_large div.senso, .map_icon_large div.sensy, .map_icon_large div.sensp, .map_icon_large div.sensx { height:100px !important; width:100px !important; display:inline-block; background-image:url(yourimageurl); padding-left:50px; }

the <a> tag is defined as "display:inline" in the original CSS, so you can not control the size without setting "display" to a block-type.

"padding-left" must be set to the width of your image.

To apply your own CSS follow these instructions:
How can I re-brand and customize the PRTG web interface using CSS?

Created on Mar 16, 2010 9:06:01 AM by  Dirk Paessler [Founder Paessler AG] (10,921) 3 4

Last change on Mar 18, 2010 12:03:55 PM by  Dirk Paessler [Founder Paessler AG] (10,921) 3 4



Votes:

0

Your Vote:

Up

Down

I added those lines to my customerstyles.css.

I'm afraid that my icons are still displayed the same as they were even with your suggested change above. The sensor icons are clipped and whatever container that they are in does not provide enough space to display the entire icon.

Any other suggestions?

Created on Mar 17, 2010 5:13:06 PM by  moster (0) 1



Votes:

0

Your Vote:

Up

Down

Try

padding-bottom:80px!important; padding-left:580px!important;

In your CSS ; it worked for me . I can add my big icon to a map but cannot drag it ...

Created on Feb 2, 2011 7:31:05 PM by  akhalighi (0) 1



Votes:

0

Your Vote:

Up

Down

I wrote a full post about this in my blog. Inside and out. http://itspectrum.ca/2011/03/08/customizeprtgmaps/

[note by moderator: See reply below]

Created on Mar 8, 2011 9:11:37 PM by  akhalighi (0) 1

Last change on Mar 9, 2011 7:58:25 AM by  Dirk Paessler [Founder Paessler AG] (10,921) 3 4



Votes:

0

Your Vote:

Up

Down

@akhalighi: Thanks for your blog post at . http://itspectrum.ca/2011/03/08/customizeprtgmaps/.

I have two comments for you.

1. You wrote:

Create a new CSS file , you can user customerstyle.css as a template. It’s under this path: <Path to PRTG>\PRTG Network Monitor\website\icons

The path is not correct, please use

<Path to PRTG>\PRTG Network Monitor\website\css

2. Don't duplicate and create your own .css file. If you simply put your own CSS code into "customerstyle.css" your css code will be loaded automatically, no need to edit prtg.css. There is a strong reason to use customerstyles.css: This is the only CSS file that will not be overwritten by the installer when you install the next update. prtg.css will be overwritten and you changes are lost.

Thanks again for sharing your ideas!

Created on Mar 9, 2011 7:57:56 AM by  Dirk Paessler [Founder Paessler AG] (10,921) 3 4

Last change on Mar 9, 2011 7:58:50 AM by  Dirk Paessler [Founder Paessler AG] (10,921) 3 4



Please log in or register to enter your reply.


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.