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


Custom Status Symbols on Map

Votes:

1

Your Vote:

Up

Down

Is it possible to create an new Status Icon for the Map?

We want to use the Status Icon (normal rectangle) but use instead of the rectangle an Computer Symbol (green or red one)

What's the easiest way to achieve this?

Greetings

custom maps prtg status-icons

Created on Mar 22, 2010 2:20:21 PM by  Andreas Loibingdorfer (355) 1 1

Last change on Mar 23, 2010 4:07:00 PM by  Daniel Zobel [Product Manager]



7 Replies

Accepted Answer

Votes:

2

Your Vote:

Up

Down

The icons used are contained in the \webroot\icons sub folder of your PRTG program installation. You can replace these with any image but must observe that the pixel size of the images used is identical to that of the icon you want to replace.

Please note: Your changes may be overwritten when installing an update. So please store your icons additionally at a save place.

Created on Mar 22, 2010 3:18:09 PM by  Patrick Hutter [Paessler Support] (7,215) 3 3

Last change on Aug 26, 2014 12:16:22 PM by  Gerald Schoch [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Another option is to add your own CSS code to PRTG.

Option 1: Simply replacing the image for green icons (same size as the original)

div.sensg 
{ 
  background-image:url(yourimageurl)!important; 
}

Option 2: Replacing the image for green icons an Maps (with your own size)

.map_icon div.sensg 
{ 
  height:30px !important; 
  display:inline-block; 
  background-image:url(yourimageurl)!important; 
  padding-left:30px!important; 
}

The codes for the other sensor states are:

  • div.sensr: Alarm
  • div.senso: Alarm Acknowledged
  • div.sensb: Blue (Paused)
  • div.sensy: Warning
  • div.sensp: Unusual
  • div.sensx: Unknown

Created on Mar 24, 2010 9:51:13 AM by  Dirk Paessler [Founder Paessler AG] (10,921) 3 4



Votes:

1

Your Vote:

Up

Down

I've made extensive use of the customerstyles.css along with custom map icons to create multiple sets of custom icons.

For example, I've created a status wallboard for my Service Desk that uses larger fonts and custom icons so it can be seen across the room. I've added the following to my customerstyles.css:

** XL Map sizes - used for SD Wallboard
/******************************************************************************************/


}

div.map_icon_xl,div.map_icon_xl div,div.map_icon_xl span,td.map_icon_xl
{
	font-size: 35px !important;
	font-weight: bold !important;
	padding-right: 10px;
	padding-left: 1px;
	margin-right: 30px;
	margin-left: 10px;
	margin-top: 2px;
	margin-bottom: 25px;
}


.map_icon_xl div.sensg,.map_icon_xl div.sensr,.map_icon_xl div.sensb,.map_icon_xl div.sensy,.map_icon_xl div.sensp,.map_icon_xl div.sensx,.map_icon_xl div.senso
{
	background-repeat: no-repeat;
	padding-left: 55px;
	background-position: 0px 0px;
	padding-bottom: 8px;
	padding-right: 10px;
	margin-bottom: 25px;
	margin-left: 10px;
	text-transform: capitalize;

}


.map_icon_xl div.sensg
{
	background-image: url(/icons/led_green_xl.png);
	min-height: 34pt;
	margin-left: 10px;
	margin-right: 10px;
}
.map_icon_xl div.sensy
{
    background-image:url(/icons/led_yellow_xl.png);
   	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}
.map_icon_xl div.sensr
{
    background-image:url(/icons/led_red_xl.png);
	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}
.map_icon_xl div.sensb
{
    background-image:url(/icons/led_blue_xl.png);
	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}
.map_icon_xl div.sensp
{
    background-image:url(/icons/led_orange_xl.png);
	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}
.map_icon_xl div.sensx
{
    background-image:url(/icons/led_grey_xl.png);
	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}

.map_icon_xl div.senso
{
    background-image:url(/icons/led_downack_xl.png);
	min-height: 34pt;
	margin-right: 10px;
	margin-left: 10px;
}

div.map_icon div.sensr,div.map_icon div.senso
{
    background-color:#ffffff;
}

I've then created custom map icons to take advantage of these (in the website/mapbojects folder)

<!--Status Icons (for Groups, Devices, or Sensors): With Name, White Background (Large)-->

<div class="map_object map_icon map_icon_large" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="topleftcoordinates" subid="<@subid>" mode="<@editmode>">">
	<#mapobject type="objectgrip" mode="<@editmode>">
	<#mapobject type="htmlbefore" subid="<@subid>">
	<span>
		<#objectproperty name="Name" id="<@objectid>">: 
		<#objectstatus name="downsens" 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>">
	</span>
	<#mapobject type="htmlafter" subid="<@subid>">
</div>

You can get really creative using this method to produce quality maps and displays.

Created on Apr 7, 2010 11:50:02 PM by  Charlie Bailey (10) 1



Votes:

0

Your Vote:

Up

Down

use of customerstyle.css seems to be a good workaround , I followed instructions above but cannot see my set of icons... any hints ?

I created the CSS file , I copied new icons over and I made an htm file (called it vpn.htm) under map objects...

Created on Jan 31, 2011 9:15:51 PM by  akhalighi (0) 1



Votes:

0

Your Vote:

Up

Down

Please try if restarting the PRTG Core Service does help.

Created on Feb 1, 2011 1:48:00 PM by  Torsten Lindner [Paessler Support]



Votes:

0

Your Vote:

Up

Down

My icon showed up but just part of it . it's a 500pxx100px symbole , but only a little part of it is showing up. I tried adding Height and Width parameters to customestyle.css but still getting the same ... just one part of the symbole showes up.

Created on Feb 1, 2011 2:27:58 PM by  akhalighi (0) 1



Votes:

0

Your Vote:

Up

Down

same thing , how your map icon htm uses customerstyle.css ? in your CSS ; you used map_icon_xl but in the htm you are referring map_icon_large ...

Created on Feb 2, 2011 9:16:53 PM by  akhalighi (0) 1



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.