PerfStack Custom Colors

Recently in a conversation with some Thwack MVPs there was some lamenting over PerfStackTm 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 PerfStackTm 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 PerfStackTm and the charts match up.These color changes will effect all your PerfStackTm 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.]