Customizing Style Sheets for HTML Viewer and Report Manager
Reporting Services provides default cascading style sheets (.css) files that define styles for the report toolbar in HTML Viewer and for Report Manager. If you are a Web developer or have expertise in creating cascading style sheets, you can modify the default styles at your own risk to change the colors, fonts, and layout of the toolbar or Report Manager. Neither the default style sheets nor instructions for modifying the style sheets are documented in this release.
Modifying the style sheets incorrectly can result in errors when opening reports. If you do not know how to modify style sheets, you should use the default style sheets. If you choose to customize the style sheets, be sure to create a backup of all default .css files before making any modifications.
Modifying style sheets has no effect on the appearance of published reports that you run on a report server. In Reporting Services, reports do not reference style sheets. Ad hoc reports that are auto-generated by the report server use style information that is stored as an embedded resource in the report server program files. Reports that you create in Report Designer use the fonts, colors, and layout that you specify in the report definition. Styles are created inline with the rest of the layout.
Note
If you want to use predefined report styles, use the Report Wizard to create a report. The Report Wizard provides a variety of themes that you can use to create stylized reports that use different color combinations and fonts. The style templates that define the themes for a report can be modified. For more information, see Creating a Report Using Report Wizard.
Reporting Services Style Sheets
The following table describes the style sheet (.css) files that are used in a Reporting Services installation.
Style sheet |
Description |
|---|---|
Htmlviewer.css |
Provides a sample style sheet that you can use as a template to create custom styles for the report toolbar in HTML Viewer. The default styles used by HTML Viewer are compiled into the report server. The Htmlviewer.css file provides a sample of the styles that the viewer uses. |
ReportingServices.css |
Defines styles for Report Manager. |
Note
The following style sheets are used for Report Manager online documentation and should never be modified: Sql.css and Mailto.css. Other style sheets define styles for reports and Report Manager that open in SharePoint Web parts. These style sheets include Rswebparts.css, Sp_full.css, and Sp_small.css. Modifying the SharePoint style sheets is not recommended. For more information about how the Web parts are used, see Viewing Reports with SharePoint 2.0 Web Parts.
Configuring Reporting Services to Use a Custom Style Sheet
The style sheet must be a valid cascading style sheet (.css) file and it must be located in the Styles folder. By default, the Styles folder is located at <drive>:\Program Files\Microsoft SQL Server\MSSQL.n\Reporting Services\ReportServer\Styles.
To use a custom style sheet for HTML Viewer at run time, you can choose from these approaches:
Add the <HTMLViewerStyleSheet> setting to the Reporting Services configuration file.
Specify the style sheet on a report URL.
Modifying the RSReportServer.config File
You can modify the RSReportServer.config file to specify a custom style sheet for HTML Viewer. The <HTMLViewerStyleSheet> setting is not included in the file by default. You must type it into the <Configuration> selection of the RSReportServer.config file and then specify the style sheet you want to use. Do not include the .css file extension when specifying the style sheet.
The following example provides an illustration of how to specify the style sheet:
<Configuration>
...
<HTMLViewerStyleSheet>MyStyleSheet</HTMLViewerStyleSheet>
...
</Configuration>
Specifying a Style Sheet on a Report URL
You can use the rc:StyleSheet URL access parameter to specify a custom style sheet on the report URL. For more information about how to specify URL access parameters, see Using URL Access Parameters.
The following example provides an illustration of how to add custom styles:
https://localhost/reportserver?/AdventureWorksSampleReports/Product+Line+Sales&rs:Command=Render&rc:Stylesheet=MyStyleSheet