Using Dashboard Designer in SharePoint 2010 allows one to build powerful visualizations for end users.  Unfortunately the ability to style the output is limited in the designer.  With a little CSS it is possible to take the generated dashboard output and apply some styling to the page elements in order to achieve commonality or branding across the published content.  In this example we’ll look at styling the filters that are generated with Dashboard Designer.  By default the filters are rendered as plain SELECT tags with a label.

Once the dashboard is published I used the Developer Tools with IE 8 to look at the rendered output for the filter. The labels for the filters are published with a ‘pps-parameterTitle’style,  Because of this it makes it very easy to overwrite the default style.  If we look at the drop down for the filters themselves they are a little more difficult.  They are rendered with a name of ‘pps_????’, where ??? is a GUID attached to the output.  In this case we want to style anything with a name attribute that begins with ‘pps’.

After a little research I found this reference provide the answer.  CSS allows you to target particular attributes within HTML elements for selection.  This is done by using an expression with the attribute name ^= beginning value.  In our case we want all selects where name begins with ‘pps_’.  Our CSS for doing this is SELECT[name^=”pps_”].  (See complete css below).

   1: <style>

   2: .pps-parameterTitle {

   3:     FONT-FAMILY: Verdana, Arial, sans-serif; COLOR: red; FONT-SIZE: 14pt

   4: }

   5: select[name^="pps_"] {

   6:     FONT-FAMILY: Verdana, Arial, sans-serif; COLOR: green; FONT-SIZE: 10pt

   7: }

   8: </style>