Showing results for 
Search instead for 
Did you mean: 

PerfStack Custom Colors

PerfStack Custom Colors

Recently in a conversation with some Thwack MVPs there was some lamenting over PerfStack™ color palette. I had a few minutes so I decided to look into it. This is a quick write up from the results of that conversation.

I found the path for the cascading style sheets is here: \inetpub\SolarWinds\ui\modules\perfstack\css

At the moment I do not understand the difference between perfstack.css and the perfstack.min.css - how they interact or if only one is necessary. The kicker for a simple search and replace is the values in perfstack.min.css don't exactly match what is in perfstack.css. An example is .color-1 rgba(181, 34, 0, 0.8) will be in perfstack.css and .color-1 rgba(181,34,0,.8) will be in perfstack.min.css. The spaces are removed and the leading zero on the saturation is dropped. In addition, perfstack.min.css has no CR/LFs, so it is one line. It would be nice to understand the relationship between the two files. Is perfstack.css used as the base and the perfstack.min.css was created after the web server started? Otherwise, it can be a little painful but you only have to do it once.

I thought it would be neat to be able to create several sets of files based on some "top x" list of web color schemes then post them with an article saying, if you want to use this color palette use this perfstack_Iowa_State_.css file set and replace your originals. Or perhaps write a PowerShell script that would take a file containing a color palette of your design and create the PerfStack™ color palette files for you. Alas, I do not have the time right now to do either of these things.

So using the site and data from the Iowa State University web site I created a scheme based on Iowa State University. There are five basic colors from ISU, but there are 17 in the css. I used the basic colors and had paletton give me the rest of the color palette to create the two files. After making a backup of the original file and storing it in a safe place, simply replace perfstack.min.css on the web server with the perfstack.min.IowaState.css file. Do the same with perfstack.IowaState.css and perfstack.css.

The files use a combination of HEX and RGBA color definitions. The colors are paired up in different classes so that the legends in PerfStack™ and the charts match up.These color changes will effect all your PerfStack™ charts.

I hope to expand upon this as time permits. [I used Iowa State since my boss went there, my undergraduate school didn't have a football team.]


Labels (1)

Great stuff, tomiannelli​. Don't forget to tag CourtesyIT​ so he can list it on his list of lists.

Great write up tomiannelli​. I'm keen to test this out!

Added.  Cool stuff.  I have always said, "If you are going to say something, say it with color"

Here's my take, branded for my org: Alternative Perfstack Colors

Version history
Revision #:
1 of 1
Last update:
‎08-21-2018 03:45 PM
Updated by: