Votes:
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?
Last change on Mar 16, 2010 8:09:16 AM by
Votes:
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
Last change on Mar 18, 2010 12:03:55 PM by
8 Replies
Votes:
Please see question How do I increase the font size of a table in PRTG's Maps?
Last change on Mar 15, 2010 10:17:20 AM by
Votes:
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
Votes:
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.
Last change on Mar 16, 2010 9:06:53 AM by
Votes:
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
Last change on Mar 18, 2010 12:03:55 PM by
Votes:
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]
Last change on Mar 9, 2011 7:58:25 AM by
Votes:
@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
Last change on Mar 9, 2011 7:58:50 AM by
Add comment