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

Article Comments

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


Feb, 2014 - Permalink

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;
}

Feb, 2014 - Permalink

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?


Nov, 2017 - Permalink