Styling With Fonts, Colors, and Grids

In this section:

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, 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

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 a 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

  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, click 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 to 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 to the row total column component of a report.

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

    Row Totals (Data) to apply a grid only to 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, click 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 select your 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 click 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 the column data.
    • Column Title to apply grids to the 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 select your 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 click 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 select your 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.

Top of page

x
Sizing a Grid Component With Respect to Its Container

You can use the following WebFOCUS StyleSheet setting to contain a grid component inside its container on an active dashboard. You must include this setting in the grid component (that is, in the TABLE FILE procedure for the report) inside an active dashboard that you create using COMPOUND syntax.

The StyleSheet syntax is:

ARREPORTSIZE={FLOWING|DIMENSION}

where:

FLOWING

Specifies that the size of the grid component (the active report) will dynamically change as needed and will override the size settings for the grid component. This is the default value.

Note: If values for DIMENSION are set in the TABLE FILE procedure for the report, the output formats, FLEX and APDF, will respect the size set by these values.

DIMENSION

Specifies that the dimensions (height and width) set for the grid component in the active dashboard will be respected. The size of the grid component will not change dynamically, but the grid will be contained inside the container when used in a COMPOUND active dashboard procedure. If the report does not fit inside the container, scroll bars will be added automatically around the report.


WebFOCUS