New Question
 
 
PRTG Network Monitor

Intuitive to Use.
Easy to manage.

200.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


How can I re-brand and customize the PRTG web interface using CSS and Javascript?

Votes:

1

Your Vote:

Up

Down

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?

css customize design howto javascript login-screen look-and-feel prtg web-interface

Created on Feb 1, 2010 4:25:55 PM by  Daniel Zobel [Paessler Support]

Last change on Jun 21, 2013 3:20:33 PM by  Gerald Schoch [Paessler Support]



13 Replies

Accepted Answer

Votes:

2

Your Vote:

Up

Down

This article applies to PRTG Network Monitor 17.3.34 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 please 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, please 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 your PRTG installation. 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 your PRTG installation. 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. Please 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 your PRTG installation instead of webroot for the aspects as introduced above. For more details, please see the article What about my web interface customizations as of PRTG 13.2.3?

Created on Feb 1, 2010 4:58:14 PM by  Daniel Zobel [Paessler Support]

Last change on Mar 22, 2018 11:11:11 AM by  Brandy Mauff [Paessler Support]



Votes:

0

Your Vote:

Up

Down

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...

Created on Sep 29, 2017 8:15:40 PM by  bleis (0)



Votes:

0

Your Vote:

Up

Down

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]

Created on Oct 2, 2017 7:53:52 AM by  Luciano Lingnau [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Can you please confirm if the API remains unchanged as our entire ticketing system hangs off this ?

Created on Nov 16, 2017 11:47:36 AM by  Samuel Ashdown (60) 1 1



Votes:

0

Your Vote:

Up

Down

The API is not affected by this at all :)


Kind regards,
Stephan Linke, Tech Support Team

Created on Nov 16, 2017 12:10:31 PM by  Stephan Linke [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Hallo,

changes in the following directories are also affecte?

  • <webroot\mapobjects>
  • <webroot\mapicons>
  • <webroot\includes>

Created on Nov 30, 2017 3:11:02 PM by  Michel Power (0) 2

Last change on Dec 1, 2017 7:27:02 AM by  Stephan Linke [Paessler Support]



Votes:

0

Your Vote:

Up

Down

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

Created on Dec 1, 2017 7:28:19 AM by  Stephan Linke [Paessler Support]



Votes:

0

Your Vote:

Up

Down

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.

Created on Dec 6, 2017 4:04:00 PM by  Michel Power (0) 2



Votes:

0

Your Vote:

Up

Down

Those will not be overwritten anyway :) If you're unsure, just create a backup before updating.


Kind regards,
Stephan Linke, Tech Support Team

Created on Dec 7, 2017 10:05:18 AM by  Stephan Linke [Paessler Support]



Votes:

0

Your Vote:

Up

Down

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 by  Marco Heinrich (10) 2

Last change on Jan 2, 2018 11:04:40 AM by  Luciano Lingnau [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Hi Marco,

It works partially (table head stays small) for me:

screenshot

Is your browser cache cleared? The CSS also lacks a closing }.


Kind regards,
Stephan Linke, Tech Support Team

Created on Jan 4, 2018 11:01:59 AM by  Stephan Linke [Paessler Support]



Votes:

0

Your Vote:

Up

Down

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.

Created on May 14, 2018 2:23:19 AM by  Joshra (0)



Votes:

0

Your Vote:

Up

Down

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

Created on May 14, 2018 8:14:28 AM by  Stephan Linke [Paessler Support]



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.