HowTo: Re-Brand and Customize the PRTG Web Interface Using CSS

Many PRTG users want to use their own logos and/or corporate colors for the web interface of their PRTG installation. A hidden feature of PRTG 7.2.x allows you to modify the look&feel of the web interface using just a few CSS statements.

Sample Screenshot

Here is a screenshot of PRTG's original design (top) and a sample redesign using CSS (bottom).

How does it work?

When PRTG's 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&feel.

PRTG also looks for the file customerstyles.css in the "\prtg network monitor\website\css folder", and - if the file exists - its content is added to PRTG's default CSS file (at the end of the file). By creating this file and adding your own CSS statements (e.g. by using a text editor) you can overwrite the built-in CSS statements to change PRTG's look and feel.

After adding/changing the file a simple "full reload" of your browser window (Shift-F5) will instantly use the new code and you should be able to see the changes immediately.

This is Not an Officially Supported Feature

Due to the complexity of PRTG's HTML and CSS code the Paessler Support Team does not officially support redesigning webpages using this technqiue, especially beyond the techniques shown in the sample code below (but we will try of course). New versions of PRTG may render their web pages with a different HTML structure and may require changes for your CSS statements (but we will try to avoid such situations).

Writing CSS Code

For some common redesign tasks (colors, logos, margins) we have included sample statements in the CSS code below.

If you have additional design requirements we recommend that you use a tool like FireBug (our favorite developer plug-in for Firefox) and any other web page analyzer tool to dig into PRTG's existing HTML code structure and CSS statements in order to find out what CSS statements you must add.

By the way: You can also completely redesign the login form (or even host the form in other webpages), see this blog post for more information.

Sample CSS Code

The CSS used for the example screenshot looks like this:

/* Sample CSS redesign file for PRTG Network Monitor, works with V7.2.x */
/* Created November 2009 by Dirk Paessler */

/* How to use: 
   - Create file "customerstyles.css" in the \prtg network monitor\website\css folder
   - insert the code below
   - reload your browser */

/********************************************************************/
/* hide Paessler branding: "Paessler" logo, "PRTG" logo, and the 
   three branding images on the login page */
/********************************************************************/
#paesslerlogo,#prtgname,.artwork,.prtgsky,.prtgcity
{
	display:none!important;
}

.welcomebackground
{
	background-image:none!important;
	padding:50px!important;
	background-color:white!important;
}

/********************************************************************/
/* show a new logo as branding at the top of the page */
/********************************************************************/

#header
{
	min-width:180px;
	min-height:31px;
	background-image:url(http://media.paessler.com/blog/paessler_transparent_grey.png);
	background-position:5px 4px;
	background-repeat:no-repeat;
}

/********************************************************************/
/* set the background color of the webpages to a common color */
/********************************************************************/

#thepage, #header, body, #main, div.onedashboardcell, div.onedashboardcellhead
{
	background-color:#EEE9DC!important;
}

/********************************************************************/
/* some additional restyling, removing some borders */
/********************************************************************/

#thepage,#head,#main
{
	margin:0px!important;
	border:none!important;
}

#mainmenu 
{
	left:5px!important;
}
/********************************************************************/
/* Change the colors of the main menu */
/********************************************************************/

#menus
{
	background-color:#CCC4B0;
	padding-bottom:0px;
	border-top:#CCC4B0 4px solid;
}

ul.jd_menu 
{
	border:none;
}

#menus ul.jd_menu li, #menus ul.jd_menu li.jdm_hover 
{
	background-image:none!important;
	background-color:#423006!important;
	color:white;
}

#menus ul.jd_menu > li
{
	border:1px outset #CCC4B0;
	width:68px;
}

#menus ul.jd_menu li:hover, #menus ul.jd_menu li.jdm_hover:hover 
{
	background-color:#6B531B!important;
}

#menus ul.jd_menu a, #menus ul.jd_menu a:active, #menus ul.jd_menu a:link, #menus ul.jd_menu a:visited 
{
	color:#fff!important;
}

/********************************************************************/
/* Hide breadcrumbs */
/********************************************************************/

#breadcrumbs
{
	display:none;
}

/********************************************************************/
/* change the look if links at top right */
/********************************************************************/

div.buttonbox a
{
	border:2px groove #EEE9DC!important;
	padding:3px!important;
	padding-top:1px!important;
	padding-bottom:1px!important;
}




/********************************************************************/
/* change table cell colors (experimental)*/
/********************************************************************/

table.table thead.pagenavigation th, table.table tfoot.pagenavigation td 
{
	background-color:#F1F1F1;
	background-image:none!important;
}

table tr.even td 
{
	background-color:#EEE9DC!important;
	border-bottom:1px solid #EEE9DC!important;
	border-top:1px solid #EEE9DC!important;
}
table tr.odd td 
{
	background-color:#E0DCD2!important;
	border-bottom:1px solid #E0DCD2!important;
	border-top:1px solid #E0DCD2!important;
}

table.hoverable tr.even:hover td,
table.hoverable tr.odd:hover td
{
	background-color:#fff!important;
	border-bottom:1px solid #ddd!important;
	border-top:1px solid #ddd!important;
}

tr.multiselected.even td ,
tr.multiselected.odd td 
{
	background-color:#C5F5CC !important;
}

More

To also customize the login screen for your PRTG Network Monitor installation, please see our article HowTo Customize PRTG Login Screen