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?


This article applies to PRTG Network Monitor 19 or later

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

Good news: We introduce a new, modern PRTG web interface with version 17.3.34! However, this update requires major changes to the code and will override your existing customizations of the PRTG web interface.

So if you have customized your PRTG installation with the help of HTML, CSS, or JavaScript files, these changes will not be available anymore and you will see the new default PRTG web interface after updating to PRTG 17.3.34 or later. Usually, we try to avoid such situations, even if not officially supported features like UI customizations are affected. 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 support@paessler.com and help us understand your needs. Thank you!

The PRTG API allows you to modify the look and feel of the web interface and using 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 using 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 by using 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 using 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 versions 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 installing 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?