Working with the Monitoring CSS Files to Adjust Settings in Deployed Dashboards

PerformancePoint Monitoring server has a few style sheets that can be adjusted in order to modify settings in your deployed dashboards. For example, when exporting a dashboard using the standard CSS file settings you will see a screen similar to the one below:

css1

However, you may want to set the dashboard and page list, filter name and tree, and report titles to be larger. By adjusting settings in the Monitoring style sheets you can get to a dashboard that looks like:

css2

Notice the enlarged font for the dashboard page listing, the parameters and the views. There are many settings in the CSS files that can be adjusted to make minor presentation changes. These are outlined below. Note that there are two different CSS file locations - one for dashboard deployed to SharePoint and one for dashboard deployed to Preview.

For SharePoint the location is: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\wpresources\Microsoft.PerformancePoint.Scorecards.WebParts\<version number>

For Preview there are two file locations. First is the location that will affect the appearance of your dashboard deployed to the preview site: C:\Program Files\Microsoft Office PerformancePoint Server\3.0\Monitoring\PPSMonitoring_1\Preview\res

Second, is the location that will affect the appearance of things in the dashboard designer: C:\Program Files\Microsoft Office PerformancePoint Server\3.0\Monitoring\PPSMonitoring_1\WebService\Preview

The following two CSS files have a variety of class attributes that can be set. Some sample classes and attributes are identified below - other classes and attributes are also available in the files.

ppsDashboard.css file

To adjust the filter name font, change the font-size value on the .pps-parameterTitle class.

To adjust the filter display values font, add a .pps-tree-label-text class and set a font-size attribute - such as:

.pps-tree-label-text

{

Font-size: 14pt;

}

To adjust the report title font size, change the .pps-picker and .pps-pickerSelectedItem class font-size settings.

To adjust the dashboard name and page list font size, change the .ppsma-pageOverviewList and .ppsma-PageOverviewTitle class font-size settings.

ParameterTree.css file (NOTE: this file does not exist in the . PPSMonitoring_1\WebService\Preview location)

To adjust the tree view filter width of the filter, adjust the .pps-tree-label class width from 375px to your selected width.

 

Alyson Powell Erwin (alysonp@microsoft.com)