How to: Reference: |
There are just three items required to format a report with an external cascading style sheet (CSS):
(Although you can also use a WebFOCUS StyleSheet to specify additional formatting outside of the external CSS, this is subject to restrictions. For more information, see Combining an External CSS With Other Formatting Methods.)
To find out how to use these three items to format a report, see How to Format a Report Using an External Cascading Style Sheet.
For an example that demonstrates how these items work together, see Linking to the ReportStyles External Cascading Style Sheet and the following diagram:
To format a report using an external cascading style sheet (CSS):
Graphs differ from other types of reports: to specify formatting for the page in which the graph appears, or for the graph heading or footing, you can use a rule for the BODY element, but not a rule for a class. You cannot format other graph components.
Graphs differ from other types of reports: you can use a rule for the BODY element, but not one for TD. A rule for BODY will format the page in which the graph appears, and its heading and footing, but not the graph itself.
For more information, see Working With an External Cascading Style Sheet.
For an example, see Applying a CSS Class to ACROSS Values in a Report. For more information, see Applying External Cascading Style Sheet Formatting.
There is one exception: if you embed the report output in an existing HTML page using the -HTMLFORM command, include a LINK element in that HTML page instead of setting CSSURL.
For an example, see Linking to the ReportStyles External Cascading Style Sheet. For more information, see Linking to an External Cascading Style Sheet.
Problems? If you encounter problems, see Troubleshooting External Cascading Style Sheets.
This cascading style sheet (CSS) rule declares the ColumnTitle generic class (that is, a class not tied to an element):
.ColumnTitle {font-family:helvetica; font-weight:bold; color:blue;}
For a more comprehensive example that shows a complete external cascading style sheet, a report procedure with an inline WebFOCUS StyleSheet, and generated report output, see Formatting a Report Using an External CSS.
This cascading style sheet (CSS) rule for the TD element specifies the element's font family:
TD {font-family:helvetica}
Because this rule is for the TD element, its formatting is applied to an entire report, not just a component of the report.
For a more comprehensive example of using a rule for the TD element to provide general report formatting, see Formatting a Report Using an External CSS.
This WebFOCUS StyleSheet declaration formats ACROSS values by applying the formatting specified for the ColumnTitle class:
TYPE=AcrossValue, CLASS=ColumnTitle, $
For a more comprehensive example that shows a complete external cascading style sheet, a report procedure with an inline WebFOCUS StyleSheet, and generated report output, see Formatting a Report Using an External CSS.
This WebFOCUS StyleSheet declaration links to the ReportStyles external cascading style sheet:
TYPE=REPORT, CSSURL=http://webserv1/css/reportstyles.css
You could accomplish the same thing using a SET command:
SET CSSURL=http://webserv1/css/reportstyles.css
Alternatively, if you want to embed your report output in an existing HTML page using -HTMLFORM, you would specify the link by coding the LINK element in the HTML page in which the report will be embedded, instead of setting CSSURL:
<HEAD> <TITLE>Accounts Receivable Report</TITLE> <LINK REL="STYLESHEET" HREF="http://srv3/css/reports.css" TYPE="text/css"> </HEAD>
For a more comprehensive example that shows a complete external cascading style sheet, a report procedure with an inline WebFOCUS StyleSheet, and generated report output, see Formatting a Report Using an External CSS.
This report displays the products currently offered by Gotham Grinds, and is formatted using an external cascading style sheet (CSS). The report is formatted so that:
The report request and inline WebFOCUS StyleSheet are shown in the following procedure, curprods.fex. The external cascading style sheet, named report01.css, follows the procedure.
curprods.fex
TABLE FILE GGPRODS HEADING "</1 Current Products</1" PRINT PRODUCT_DESCRIPTION UNIT_PRICE BY PRODUCT_ID ON TABLE SET PAGE-NUM OFF 1. ON TABLE SET STYLE * 2. TYPE=REPORT, CSSURL=http://websrv2/css/report01.css, $ 3. TYPE=HEADING, CLASS=headText, $ 4. TYPE=TITLE, CLASS=reportTitles, $ 5. TYPE=DATA, CLASS=lowCost, WHEN=N3 LT 27, $ 6. ENDSTYLE END
report01.css
7. BODY {font-family:Arial, sans-serif} 8. TABLE {border:0} 8. TD {border:0} 9. .reportTitles {font-weight:bolder; background:lightblue;} 10. .lowCost {color:green; font-style:italic;} 11. .headText {font-family:Times New Roman, serif; font-size:larger; text-align:center}
Because this is a rule for BODY, it is applied to the entire report: all text in the report will default to Arial. You can override this for a particular report component by applying a rule for a generic class to that component, as is done in this procedure with the rule for the headText class (see line 11).
The WebFOCUS StyleSheet applies this to the report column titles (see line 4).
The WebFOCUS StyleSheet applies this rule conditionally to report rows for which the product unit cost is less than $27 (see line 5).
The WebFOCUS StyleSheet applies this rule to the report heading. It overrides the default font family specified in the rule for the BODY element (see line 7).
The procedure displays this report:
WebFOCUS |