Styling With Fonts, Colors, and Grids

How to:

You can style a report or objects in a report by changing font size and style, adjusting colors, and adding grids.

If you have worked with HTML you know that you do not always have complete control over how your report or document looks in any given Web browser, because browsers interpret HTML code and display it according to their local configurations. Nevertheless, the Report Painter works with HTML to provide you with as much styling control as possible. In fact, since Web browsers have gotten better at handling fonts and fonts sizes, you can apply a greater range of fonts and font styles to report element in HTML reports.

To further improve the display of HTML output you can:

For PDF reports, output may be affected by limitations of Adobe® Reader®.
Top of page
x
Procedure: How to Specify a Font for a Report Element

The Report Painter enables you to apply a number of fonts and font styles to columns and the contents of object areas. You can apply fonts to any element of the report using the Font toolbar, from which you can also specify whether to apply font styles to Titles only, Data only, or Titles and Data.

  1. Select a column or highlight an element in an object area.
  2. For a column, click a component button to specify whether you want to style title, data, or both.
  3. Click a button on the Font toolbar to specify the style you want to apply. For details, see Font Toolbar.
Top of page
x
Procedure: How to Copy Styling Characteristics From One Column to Another

You can copy styling characteristics from one column to another.

  1. Select the column(s) that you want to apply styling to by simultaneously clicking your mouse and pressing the Shift key.
  2. Select the column that contains the styling you want to apply and keep the Shift key pressed as you click it.
  3. Select an option from the Match All Styles drop-down list, and then select the column(s) you want to apply the formatting to. The styling characteristics are:
    • Match All Styles
    • Match Font
    • Match Grid/Border
    • Match Background Color
    • Match Conditional Styling
    • Match Justification
    • Match Width Attributes
Top of page
x
Procedure: How to Apply and Remove a Grid in an HTML Report

To add or remove the grid that appears around your report:

  1. Click the Options button on the Output Format toolbar.

    The Report Options dialog box opens. Ensure that HTML is selected as the report output.

  2. In the Style tab, click the Select Grid button. The HTML Grid dialog box opens.

    Note:

    • If grids are on, you cannot use the Borders feature.
    • With the default StyleSheet, which is included automatically in the request, the Select Grid button will not be available. To make it available, delete the default StyleSheet from the request. For information about deleting the default StyleSheet from the request, see Using the StyleSheet File Selector.
  3. Click the On or Off option button.
  4. Click OK.

Tip: If you choose to turn grids on, you can improve the grid display in HTML reports by using internal Cascading Style Sheets.
Top of page
x
Procedure: How to Add a Grid in a PDF Report

You can apply a grid to an entire report, a column, or another object area, such as a heading or footing.

To set a global report grid (that will apply to all objects you subsequently add to the report):

  1. From the Report menu, select Styling.

    The Report Options dialog box opens at the Style tab.

    Note: Ensure that PDF is selected as the report output.

  2. Click the Select Grid button.

    The Grid dialog box opens.

    Note: With the default StyleSheet, which is included automatically in the request, the Select Grid button will not be available. To make it available, delete the default StyleSheet from the request. For information about deleting the default StyleSheet from the request, see Using the StyleSheet File Selector.

    Make your grid selection:

    • Click the down arrow in the Grid drop-down list box and select:

      Horizontal & Vertical to insert lines between rows and columns.

      Horizontal to insert lines between rows.

      Vertical to insert lines between columns.

    • Select a line style option button (light or heavy).

      Note: By default, the None option button is selected. If you do not select a line style, no grid lines will be shown.

    • Click OK to close the Grid dialog box.
  3. Click the down arrow in the active object area drop-down list and select:

    Report to apply a grid to the entire report.

    Data to apply a grid only to the data component of a column.

    Title to apply a grid to only the title component of a column.

    Table Heading to apply a grid only to the report heading component of a report.

    Table Footing to apply a grid only to the report footing component of a report.

    Heading to apply a grid only to the page heading component of a report.

    Footing to apply a grid only to the page footing component of a report.

    Subhead to apply a grid only to a subheading component of a report.

    Subfoot to apply a grid only to a subfooting component of a report.

    Subtotal to apply a grid only to a subtotal component of a report.

    Across Column to apply a grid only to ACROSS values used as column titles under an ACROSS value in a report.

    Across Title to apply a grid only an ACROSS value used as a column title component of a report.

    Column Totals to apply a grid only to the column total component of a report.

    Row Totals (Report) to apply a grid only the row total column component of a report.

    Row Totals (Title) to apply a grid only the row total title component of a report.

    Row Totals (Data) to apply a grid only the data in the row total column component of a report.

Note: If grids are on, you cannot use the Borders feature.

To apply a grid to a column:

  1. Right-click the column and select Options.

    The Field Properties dialog box opens at the Style tab.

  2. Click the down arrow in the active object area drop-down list and select:

    Column Title and Data to apply grids to the column title and data.

    Column Data to apply grids to column data.

    Column Title to apply grids to column title.

  3. Click the Select Grid button.

    The Grid dialog box opens. Make your grid selections:

    • Choose a grid type (Horizontal & Vertical, Horizontal, Vertical).
    • Choose a line style (light or heavy).

    Note: By default, the None option button is selected. If you do not select a line style, no grid lines will be shown.

  4. Click OK.

To apply a grid to another object area:

  1. Right-click the object area and select Options.

    The Properties dialog box opens at the Style tab.

    Note: The active object area shows the object area selected. For example, Page Heading.

  2. Click the Select Grid button.
  3. Make your grid selections:
    • Choose a grid type (Horizontal & Vertical, Horizontal, Vertical).
    • Choose a line style (light or heavy).

    Note: By default, the None option button is selected. If you do not select a line style, no grid lines will be shown.

  4. Click OK.
Top of page
x
Procedure: How to Remove a Grid
  1. Right-click the column and select Options.

    The Field Properties dialog box opens at the Style tab.

    Note: To remove a grid for an entire report, select the Style tab in the Report Options dialog box.

  2. Click the Select Grid button.

    The Grid dialog box opens.

  3. Choose None.
  4. Click OK.
Top of page
x
Procedure: How to Add Borders to an HTML or PDF Report

You can add borders to an entire report, a column, or another object area, such as a heading or footing.

Note: You must remove grids from the report, column, or object area before you can apply borders.

You can set borders to a report globally, so that they will apply to all objects you subsequently add to the report. To set global borders:

  1. From the Report menu, select Styling.

    The Report Options dialog box opens at the Style tab.

    Note: Ensure that HTML or PDF is selected as the report output format.

  2. Click the Select Borders button.

    The Borders dialog box opens.

    By default, the Make All Borders The Same option is selected.

  3. To specify border settings for the top, bottom, left, and right borders, click the Make All Borders the Same check box to turn off that option. Make your border selections:
    • Click the down arrow in the Width drop-down list box and select:

      OFF to turn borders off.

      LIGHT to apply thin border lines.

      MEDIUM to apply medium border lines.

      HEAVY to apply thick border lines.

    • Click the down arrow in the Style drop-down list box and select a line style.
    • Click the down arrow in the Color drop-down list and select a color.

    After you make border width, style, and color selections you can see them in the Border Preview window in the Borders dialog box.

    Note: By default, the None option button is selected. If you do not select a border width, style, or color, no borders will be shown.

  4. Click OK.

To apply a border to a column:

  1. Right-click the column and select Options.

    The Field Properties dialog box opens at the Style tab.

  2. Click the down arrow in the active object area drop-down list and select:
    • Column Title and Data to apply grids to the column title and data.
    • Column Data to apply to apply grids to column data.
    • Column Title to apply grids to column title.
  3. Click the Select Borders button.

    The Borders dialog box opens.

    By default, the Make All Borders The Same option is selected.

    To specify border settings for the top, bottom, left, and right borders, select the Make All Borders the Same check box to turn off that option.

  4. Make your border selections:
    • Click the down arrow in the Width drop-down list box and select:

      OFF to turn borders off. (This is the default.)

      LIGHT to apply thin border lines.

      MEDIUM to apply medium border lines.

      HEAVY to apply thick border lines.

    • Click the down arrow in the Style drop-down list box and select a line style.
    • Click the down arrow in the Color drop-down list and select a color.

    After you make border width, style, and color selections you can see them in the Border Preview window in the Borders dialog box.

    Note: If the OFF option is selected in the Width drop-down list, no borders will be shown.

  5. Click OK.

To apply a border to another object area:

  1. Right-click the object area and select Options.

    The Properties dialog box opens at the Style tab.

  2. Click the Select Borders button.

    The Borders dialog box opens.

  3. By default, the Make All Borders The Same option is selected.

    To specify border settings for the top, bottom, left, and right borders, select the Make All Borders the Same check box to turn off that option.

  4. Make your border selections:
    • Click the down arrow in the Width drop-down list box and select:

      OFF to turn borders off. This is the default.

      LIGHT to apply thin border lines.

      MEDIUM to apply medium border lines.

      HEAVY to apply thick border lines.

    • Click the down arrow in the Style drop-down list box and select a line style.
    • Click the down arrow in the Color drop-down list and select a color.

    After you make border width, style, and color selections you can see them in the Border Preview window in the Borders dialog box.

    Note: If the OFF option is selected in the Width drop-down list, no borders will be shown.

  5. Click OK.
WebFOCUS