Web Report Studio: Changing a Style to Your Colors

On a recent project, we needed to change the colors of the bars to match the customer’s website style.  I had heard this was a daunting task requiring lots of white magic and prayer. Turns out what is difficult is if you want to completely re-do a style but it’s fairly simple if you just want to make a few changes.

Changing the Style Color 

First my goal was to change the default colors on the bar chart.  In the following example I used some crazy colors to ensure I knew it was working.  Thus, red, green and yellow.  Also notice I named my style Tricia and it was added to the Report Style menu.  If you only want to change the bars for a single report, read this Chart Makeover post for a quick how-to.

Update an Existing Style

Note: Refer to the Customizing SAS Web Report Studio Report Styles in the SAS User Documentation for a more in-depth discussion.  

SAS provides a sample cascading style sheet (CSS) file that you can use as a basis for your new style design.  CSS is a flat file that you can edit using Notepad or like application.  [More on CSS here]  The sample style sheet is based on Seaside, which uses blue and gold tones for the color scheme.

1. Make a copy of the sample CSS file (Seaside_Css.css) provided by SAS and give it a new name (such as Tricia).  Mine was located here:

        \\SAS\config\Lev1\Web\Applications\SASWebReportStudio4.3\customer 
    

2. Open the new CSS file in a text editor.  To change the color, look for the GraphDataStylen area of the file.  CSS uses Hex code to identify the colors. [More about finding and using HEX codes.]  For my example I changed #DC143C is red and #66CDAA is green.  

   You can add the colors that best match your desired masterpiece.   Check the Customizing SAS Web Report Studio Report Styles for examples of what the other properties control.  I have not tried to change fonts or other items but it looks like it can get pretty involved fairly quickly – thus the warnings for others!
    

3. Save the file.

Applying the Style to Web Report Studio

1. In SAS Management Console, go to the Configuration Manager > SAS App Infrastructure.
2. Right-click Web Report Studio 4.3. and select Properties.
3. Go to the Advanced tab and make the following changes:
   Add two new properties (as shown)
   sas.wrs.style.css contains the full path and name of .css file
   sas.wrs.style.schemelist contains all valid schemes for the list separated by a comma.
   
4. Restart your web application – which is JBoss for my system.

Test Your New Style 

When you open Web Report Studio  there will be a new style choice in the Report Style menu.  Notice the order is the same as shown in the Property list (see above).  You can apply this style to your report.

Let me know if you have made any style changes and how it worked out.