Most organizations maintain websites, and most of the web pages on these sites use CSS to define the look and feel of the pages. As a report designer, you can reuse the styles from CSS files. The benefits of reusing styles are obvious—you save time by not having to reinvent the styles, and your reports reflect the standard style. You can reuse CSS styles in two ways:
Import the styles into your reports.
When you import styles from a CSS file, BIRT Report Designer copies the styles to the report. Subsequent changes to styles in the CSS file have no effect on the imported styles in the report.
Link the CSS file to your reports.
When you link a CSS file to the report, any changes made to the CSS file are reflected in the report.
Import styles if you expect the styles in the original CSS file to change, but you do not want the report to use the future style changes. If you do not have any control over the original CSS file, extensive style changes in the file, such as font sizes, line spacing, or text alignment, can alter a precisely designed report in undesirable ways.
Link a CSS file to your report if you are the author of the CSS file, and you want to maintain and update the styles in all your reports by modifying a single CSS file.
BIRT Report Designer supports the CSS2 specification. Not all CSS2 properties, however, are supported. For a list of unsupported properties, see the Style and CSS specification document, which is available at the following URL:
http://www.eclipse.org/birt/phoenix/ref
Styles that use unsupported properties are available to a report. The unsupported properties, however, do not have an effect when applied to a report element.
Importing styles
You can import any number of styles from a CSS file. If you import a style whose name matches the name of an existing style in the report, BIRT Report Designer appends a number to the name of the imported style. For example, if a report contains a style named TopLevelHeading, and you import a style with the same name, the imported style’s name changes to TopLevelHeading1.
Imported styles appear in the list of available styles with all the styles that are created with BIRT Report Designer. You apply an imported style to a report element, edit the style’s properties, or delete it in the same way that you do with a style that was created using BIRT Report Designer.
How to import styles
1 Select the layout editor.
2 Choose Element➛Style➛Import CSS Style.
3 In Import CSS Styles, in File Name, specify the name of the CSS file from which to import styles. Choose Browse to find the file. Import CSS Styles displays all the styles defined in the CSS file. Figure 8‑9 shows an example of the styles in a CSS file named base.css.
Figure 8‑9 Examples of styles defined in a CSS file
4 Select the styles that you want to import. To import all the styles, choose Select All.
5 When you finish making your selections, choose Finish. BIRT Report Designer copies the styles to the report. The imported styles appear in the Styles list in Outline.
Linking a CSS file
Linking a CSS file to a report is a two-step process.
1 Place the CSS file in the BIRT resource folder. The resource folder is a central location for external files used by reports.
2 Link the CSS file in the resource folder to the report.
As with styles that you create or import, the styles in a linked CSS file also appear in the list of styles in Outline. The difference is that these styles are read-only. You cannot edit or delete these styles within BIRT Report Designer. Changes can be made only in the CSS file and these changes propagate to all reports linked to the CSS file.
If a style in a linked CSS file has the same name as a style that already exists, the existing style has precedence. In the layout editor, the list of styles available to apply to a report element shows only the existing instance of the style.
How to link a CSS file
1 In Resource Explorer, right-click Shared Resources, then choose Add Resource, as shown in Figure 8‑10.
Figure 8‑10 Choose Add Resource
2 In Add Resource, specify the CSS file to place in the resource folder.
1 In Source File, type the path to the CSS file, or choose Browse to locate and select the file.
2 In File Name, optionally type a new name for the CSS file.
3 In Folder, the read-only path value shows the location of the BIRT resource folder. Add the CSS file to this root folder, or choose Browse to select a subfolder in which to place the CSS file.
Figure 8‑11 shows an example of values specified in Add Resource.
Figure 8‑11 Add Resource with values supplied
4 Choose Finish. The CSS file appears in Resource Explorer, and it is available to any report design. Expand the file to display all styles, as shown in Figure 8‑12.
Figure 8‑12 Resource Explorer showing the styles in a CSS file
3 Link the CSS file to the report by performing the following tasks:
1 Choose Outline.
2 Right-click Styles, then choose Use CSS File, as shown in Figure 8‑13.
Figure 8‑13 Choose Use CSS File
3 In Use CSS, choose Browse to select the CSS file to link to the report. The Browse dialog, shown in Figure 8‑14, displays the resource folder and the CSS files in the folder.
Figure 8‑14 Browse showing the CSS file in the resource folder
4 Select the CSS file, then choose OK. Use CSS displays the selected CSS file and the styles in that file, as shown in Figure 8‑15.
Figure 8‑15 Use CSS showing the selected CSS file and its styles
5 Optionally, link a CSS file at report view time, using the following steps. Use this option to apply HTML-only selectors, such as :link and :visited to customize the style of hyperlinks.
1 Choose Include CSS file at view time.
2 In URI, type the location of the CSS file. Type a full or relative URL.
6 Choose OK. The linked CSS file and its styles appear under Styles in Outline, as shown in Figure 8‑16. The style names appear in gray, indicating that they are not defined in the report design, but rather, are linked from an external file.
Figure 8‑16 Outline showing a linked CSS file and its styles
Import the styles into your reports.
