Share via

Cascading Style Sheets for Customizing the CrystalReportViewer Control

  • Article

In Crystal Reports for Visual Studio, you use a Cascading Style Sheet (CSS) named "default.css" to customize the appearance of the CrystalReportViewer control. The style sheet is stored in a subdirectory of the viewer's virtual directory that is named "css." For more information, see Viewers' Virtual Directory.

To customize the CSS for the CrystalReportViewer control

You access the style sheet from the CssFileName property of the CrystalReportViewer control, which can be viewed from the Properties window when the CrystalReportViewer control is selected in Design view.

Note

In Visual Studio 2005 and later (and ASP.NET version 2.0), the look and feel of visual controls can be managed by a new tool called Themes. Themes can be applied to the CrystalReportViewer control, to apply a consistent look to controls on a page or across an entire Web Site. For more information, see CrystalReportViewer Control Themes.

  1. Create a Web Site with a CrystalReportViewer control and a Crystal report.

    Note

    You can take a coding approach or a reduced-code approach to set up the Web Site. For a coding approach, see Project Setup. For a reduced-code approach, see Tutorial: Reduced-Code Web Site Setup with Crystal Reports Using Smart Tasks.

  2. Compile and run the project at least once to view the CrystalReportViewer control with its default style settings, and then exit from debug mode.

  3. Open the Default.aspx page in Design view.

  4. Click once on the CrystalReportViewer control to select it.

  5. In the Properties window, locate the file directory path in the CssFileName property to the "default.css" file.

  6. In Windows Explorer, locate this file and copy it to your Web Site directory.

  7. Rename the file to "custom.css."

  8. Edit the CssFileName property to point to the Web Site directory and the "custom.css" file name.

  9. Recompile and verify that the CrystalReportViewer control sees the custom.css file in your local Web Site directory.

  10. Exit debug mode.

  11. Open the file "custom.css" and edit the style sheet.

  12. Recompile and verify that your changes have been applied to the CrystalReportViewer control.