What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general.

Learn more

PRTG Network Monitor

Intuitive to Use. Easy to manage.
More than 500,000 users rely on Paessler PRTG every day. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free Download

Top Tags


View all Tags

CSS changes to modify white background

Votes:

0

With the latest update, 14.1.8 and on, the application has a whole new look. Parts of it we really like, but some parts we really hate. The biggest thing we hate is the very bright white background.

I looked around on how to change the background so it's not so blindingly white. I have found my answer and decided to post here so others can benefit if they feel the same way.

In the webroot\css directory, edit the styles_custom.css file with this:

#login-container /* Change background color */
{
  background:#DDDDDD ;
}
#main /* Change background color */
{
  background:#DDDDDD ;
}

Use shift-f5 to refresh the site. You'll also want to add this to the files styles_mini_custom.css and styles_mobile_custom.css file.

It doesn't fix every bright white area, but this does fix most of the trouble spots.

Thanks

background color css styles-custom white

Created on Feb 20, 2014 12:19:58 AM

Last change on Feb 20, 2014 5:43:08 AM by Konstantin Wolff [Paessler Support]



Best Answer

Accepted Answer

Votes:

0

Important note: The current customization approach is unsupported and deprecated as of versions 17.3.34/17.4.35. This customization no longer works.

For more details, see How can I re-brand and customize the PRTG web interface using CSS and Javascript?

Created on Nov 7, 2017 2:29:50 PM by Gerald Schoch [Paessler Support]

Last change on Mar 22, 2018 12:20:12 PM by Brandy Greger [Paessler Support]



3 Replies

Votes:

0

Hi,
thanks for sharing this. You might consider posting the guide as an answer as well (as seen here) because then it can be voted as best answer and is more likely to be found.
Best regards

Created on Feb 20, 2014 5:44:45 AM by Konstantin Wolff [Paessler Support]



Votes:

0

I am unable to edit my original post so instead I'll post a reply.

Here is a fuller custom css file that replaces almost all of the white areas with grey.

#login-container /* Change background color */
{
  background:#E8E8E8 ;
}
html { background: #E8E8E8 }
header /* Change header color */
{
  background:#E8E8E8 ;
}
#header_menu /*change top header background color*/
{
  background:#E8E8E8;
  border-bottom: #E8E8E8;
}
#quickbar /*change top header background color*/
{
  background:#E8E8E8;
}
#main_menu /* Change background color */
{
  background:#E8E8E8 ;
}
body /* Change background color */
{
  background:#E8E8E8 ;
}
#container /*change background color*/
{
  background:#E8E8E8;
}
#loadedcontent /*change body background color*/
{
  background:#E8E8E8;
}
.deviceoverviewsensorvalues /*change sensor box color*/
{
  background:#E8E8E8;
  border-color:#E8E8E8;
}

Created on Feb 25, 2014 5:57:59 PM



Accepted Answer

Votes:

0

Important note: The current customization approach is unsupported and deprecated as of versions 17.3.34/17.4.35. This customization no longer works.

For more details, see How can I re-brand and customize the PRTG web interface using CSS and Javascript?

Created on Nov 7, 2017 2:29:50 PM by Gerald Schoch [Paessler Support]

Last change on Mar 22, 2018 12:20:12 PM by Brandy Greger [Paessler Support]




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.