I want to change the appearance of the PRTG web interface in order to fit better into my company's corporate design. How can I do this?
How can I re-brand and customize the PRTG web interface using CSS and JavaScript?
Votes:
3
19 Replies
Votes:
4
Important notice: The following article only applies to PRTG 17.3.33 or earlier. |
Customizing and re-branding the PRTG web interface (deprecated)
Important note: Existing UI customizations will disappear after updating to PRTG 17.3.34 or later
With version 17.3.34, we introduce a new, modern PRTG web interface. However, this update requires major changes to the code and will override your existing customizations of the PRTG web interface.
If you customized your PRTG installation via .html, .css, or .javascript files, these changes will not be available anymore after updating to PRTG 17.3.34 or later. Instead, you will see the new default PRTG web interface. Usually, we try to avoid such situations, even if not officially supported features like UI customizations are affected. However, the huge improvements to the look and feel make it necessary this time.
PRTG still provides an option to modify the appearance of the web interface as described in this article, but note that this is an unsupported and deprecated feature as of versions 17.3.34/17.4.35. Your changes will be broken or removed with future PRTG updates. If you modify the files, let us know what you are changing in the v2 files and why. You can directly contact us via email to [email protected] and help us understand your needs. |
The PRTG API allows you to modify the look and feel of the web interface and to use your own logos and/or corporate colors, with a few CSS statements and custom JavaScript.
How does it work?
When the PRTG web server delivers web pages to a client browser, the built-in .css files are served via the URL /css/prtg.css. This .css file includes all stylesheet statements that we have included with PRTG and which control the default look and feel.
In addition, PRTG looks for the file styles_custom_v2.css in the \webroot\css subfolder of the PRTG program directory. Its content is added to the PRTG default .css file (at the end of the file). You can add your own CSS statements to this file with a text editor. This approach overwrites the built-in CSS statements to change the appearance of the PRTG web interface.
You can use your own HTML code via the files htmlheader_custom_v2.htm and htmlfooter_custom_v2.htm in the PRTG \webroot\includes subfolder the same way.
Furthermore, you can add custom JavaScript code to modify the appearance. Use the file scripts_custom_v2.js in the \webroot\javascript subfolder of the PRTG program directory. PRTG will lookup the code in this file and will add it to the end of the .javascript file for the web interface.
After adding/changing these file(s), a full reload of your browser window (Shift-F5) will instantly use the new code.
This feature is unsupported and deprecated
Important note: PRTG does not officially support redesigning web pages via HTML, CSS, and JavaScript code and may not provide this feature at all in future versions. Let us know what you change and why to help us understand your needs.
Note: In PRTG 13.2.3 through 17.3.33, the files for custom code were styles_custom.css, htmlheader_custom.htm, htmlfooter_custom.htm, and scripts_custom.js. Changes to these files will not be considered anymore after you have installed PRTG 17.3.34 or later and according modifications of the PRTG web interface will be disabled.
Note: PRTG Network Monitor 7.2 through 12 used the website subfolder of the PRTG program directory instead of webroot for the aspects as introduced above. For more details, see What about my web interface customizations as of PRTG 13.2.3?
Created on Feb 1, 2010 4:58:14 PM by
Daniel Zobel [Product Manager]
Last change on Jan 2, 2023 2:58:22 PM by
Brandy Greger [Paessler Support]
Votes:
0
Do you have a ETA as to when this web interface will be released? I would love to beta-test. Love PRTG but the interface does not play well on a TV that is used for displaying monitoring details about the business...
Votes:
0
Hi there bleis,
we appreciate your contact.
We expect to release it before the end of the current year. It has already been released in the "preview" channel:
This means that you can try out the new version by switching from the "stable" to the "preview" channel under Setup > Auto-Update > (settings tab). After switching, check for updates and you will be presented with version 17.x.34.
If you want to try it out, I encourage you to do so with a trial instance, as the preview channel is not recommended for production use.
Best Regards,
Luciano Lingnau [Paessler Support]
Votes:
0
Can you please confirm if the API remains unchanged as our entire ticketing system hangs off this ?
Votes:
0
The API is not affected by this at all :)
Kind regards,
Stephan Linke, Tech Support Team
Votes:
0
Hallo,
changes in the following directories are also affecte?
- <webroot\mapobjects>
- <webroot\mapicons>
- <webroot\includes>
Created on Nov 30, 2017 3:11:02 PM
Last change on Dec 1, 2017 7:27:02 AM by
Stephan Linke [Paessler Support]
Votes:
0
We've made several changes to the webinterface, hence those files are likely to have changed as well the more or less. Any acute problems with either of those directory / map objects?
Kind regards,
Stephan Linke, Tech Support Team
Votes:
0
no not yet, we will not update until next week. The question was only preventive to avoid later problems. we have created own files in these directories (copies of the original Paessler files) to fit our needs. for example, the header and footer of the reports, own icons or a change of sorting in maps, and much more.
Votes:
0
Those will not be overwritten anyway :) If you're unsure, just create a backup before updating.
Kind regards,
Stephan Linke, Tech Support Team
Votes:
0
Hi,
we use custom css files for a bigger font-size. Unfortunately, the css-configuration does not work after the update to prtg 17.4.36.3670. We have copy the content of styles_custom.css to styles_custom_v2.css:
.customalarms_biggerfont table.table thead.tabletitle th, h3.tabletitle{ font-size: 36px !important; } .customalarms_biggerfont tr { font-size: 100px !important; } .customalarms_biggerfont td { font-size: 100px !important;
Content of the Custom-Map-Object:
<!--Data Tables (Custom): Custom Alarms--> <div class="map_object map_table customalarms_biggerfont" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="font-size:200px;overflow:auto;<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">"> <#mapobject type="objectgrip" mode="<@editmode>"> <#mapobject type="htmlbefore" subid="<@subid>"> <#checkobjecttype objecttype="probenode,group,device" nicemessage="true" id="<@objectid>"> <div class="maptablecontainer" style="overflow:hidden"> <#lang key="html.mapobjects.tablea0.tabletitle" default="Alarms (@@@@)" var="tabletitle"> <#table tableid="sensortable" id="<@objectid>" content="sensors" columns="downtimesince,sensor,status,lastvalue,minigraph,priority,favorite,probegroupdevice,message" sortby="downtimesince" infoheader="false" links="false" sortable="false" varexpand="tabletitle" tabletitle="@tabletitle" filter_tags="@tag(<@tagfilterstring>)" filter_status="5" filter_status="4" filter_status="10" filter_status="14" > </div> <#mapobject type="htmlafter" subid="<@subid>"> </div>
What are we doing wrong?
Cheers, Marco
Created on Dec 28, 2017 7:13:57 AM
Last change on Jan 2, 2018 11:04:40 AM by
Luciano Lingnau [Paessler]
Votes:
1
Hi Marco,
It works partially (table head stays small) for me:
Is your browser cache cleared? The CSS also lacks a closing }.
Kind regards,
Stephan Linke, Tech Support Team
Votes:
0
Has customization been supported again in the latest version. Would like to remove all banners from the pages. How can I do this. whether supported or not is not a concern for me.
Votes:
0
Depending on what banners you'd like to replace, you can simply replace the corresponding images in webroot/images folder in PRTGs application directory.
Kind regards,
Stephan Linke, Tech Support Team
Votes:
0
Wondering if there has been any support added for customizations in latest versions (v19.2.5)? The styles_custom_v2.css file does not work for me and I was hoping for some kind of support for customization somewhere.
Thanks!
Votes:
1
In order for customizations to be loaded properly from the styles_custom_v2.css, you'll need to restart the Core Server service. Have you tried that?
Votes:
1
I did not - that works. Actually, it isn't even necessary to do that - you can go into the Administrative Tools and use the "Clear Caches" button. THanks!
Votes:
0
Hello,
I am looking for customize PRTG Web Interface with my company information. I understood there was a major change for the PRTG 17.X version.
So i edited files mentionned in this KB which "applies to PRTG Network Monitor 19 or later". For each mentionned file in "How does it work" part i found this :
" You can use this file to modify the appearance of the PRTG web interface as described in https://kb.paessler.com/en/topic/33 Please note that you are using an unsupported and deprecated feature. Your changes will be broken or removed with future PRTG updates."
So i dont understand how do i have to proceed to customize appearance.
Thanks a lot for support
Votes:
0
Hello jpilou,
You can do customizations as mentioned in this thread, but it is not officially supported and the warning is about being aware that such customizing might break with future updates due to changes in the interface.
Kind regards,
Erhard
Votes:
0
Hello Erhard
Thanks for you reply. It could be a great feature to change appearance for next version.
Have a nice day
Add comment