BackPrevious Topic Next TopicNext

CSS Styles

Logi Report CSS styles enables you to create various visual presentation sets from a single report, and change the visual presentation of your report. A CSS style file is like a style group, which contains a set of styles with many predefined properties. In Logi Report, the CSS style file, which is defined according to CSS 2.1 standard of W3C, is supported. Properties of all of the components in a report can be controlled by a CSS file. You can customize, edit and save a CSS style with visible UI of the CSS Editor in Logi Report Designer, and can also compile and save a CSS file manually according to the W3C standard. After that, these CSS style files can be imported to apply to a component. By using Logi Report cSS styles, you can create various visual presentation sets from a single report, and change the visual presentation of your report.

Logi Report supports some of the W3C CSS 2.1 standard properties at present, which are background-color, border-style/border-top-style/border-bottom-style/border-left-style/border-right-style, color, font-size, height, padding/padding-top/padding-bottom/padding-left/padding-right, text-align, and width.

This topic includes the following sections:

Creating CSS Styles

To create a CSS style in Logi Report Designer:

  1. Right-click an object in the design area and then select Save Style from the shortcut menu. The New CSS Style dialog appears.

    New CSS Style

  2. Define the type of the CSS style as required:
    • To create a custom style that can be applied as a class attribute to a range or block of text, select the Class option and type a name for the style in the Selector Name combo box.

      Note: Class names must begin with a period and can contain any combination of letters and numbers (for example, .myhead1). If you don't type a beginning period, Logi Report Designer automatically enters it for you.

    • To redefine the default formatting of a specific tag, select the Tag option and then select a tag from the Selector Name combo box.
    • To define the formatting for a particular combination of tags or for all tags that contain a specific ID attribute, select the Advanced option and then type one or more tags in the Selector Name combo box or select one from the box. If the object is in a crosstab, when this option is selected, the following advanced selector names will be available in the Selector Name drop-down list according to the current object name.
      Object NameCSS Tag NameAdvanced Selector Name Example
      Aggregation TitleCrosstabLabelFieldCrosstabLabelField[Depth=<current>]
      Aggregation FieldCrosstabAggregationFieldCrosstabAggregationField[XDepth=<current>][YDepth=<current>]
      CrosstabAggregationField[XDepth=<current>]
      CrosstabAggregationField[YDepth=<current>]
      Special Aggregation FieldCrosstabAggregationSpecialFieldCrosstabAggregationSpecialField[XDepth=<current>][YDepth=<current>]
      CrosstabAggregationSpecialField[XDepth=<current>]
      CrosstabAggregationSpecialField[YDepth=<current>]
      Label of Column/Row FieldCrosstabDBTitleFieldCrosstabDBTitleField[Depth=<current>][IsXHeader=<true or false>]
      CrosstabDBTitleField[Depth=<current>]
      CrosstabDBTitleField[IsXHeader=<true or false>]
      Column/Row FieldCrosstabDBFieldCrosstabDBField[Depth=<current>][IsXHeader=<true or false>]
      CrosstabDBField[Depth=<current>]
      CrosstabDBField[IsXHeader=<true or false>]
      Total LabelCrosstabTextFieldCrosstabTextField[Depth=<current>][IsXHeader=<true or false>]
      CrosstabTextField[Depth=<current>]
      CrosstabTextField[IsXHeader=<true or false>]

      The following image demonstrates the four selector attributes in a crosstab: Depth, XDepth, YDepth and IsXHeader. IsXHeader is a Boolean type attribute which specifies whether it is a column header.

      CSS Properties for Crosstab

      The four attributes are not String in the crosstab definition, so they should be converted to String to meet the CSS definition, for example:

      • CrosstabTextField[Depth="1"]
      • CrosstabTextField[IsXHeader="false"]

      Depth, XDepth and YDepth can use the dynamic value named JR-MAX to represent the maximum value in the parallel-setting or summary area they belong to. For example, CrosstabTextField[Depth=JR-MAX]. In this case, the JR-MAX conditions will also be listed in the Selector Name drop-down list.

  3. Select the location in which the style will be defined in the Add Selector to Style drop-down list.
    • If you want to create an external style file, select New Style Sheet File and select OK. Then,
      1. In the Save CSS As dialog, specify the name of the new CSS file.

        Save CSS As dialog

      2. Select Save to save the file and the CSS Style Definition dialog appears.

        CSS Style Definition

      3. Define the properties of the CSS file.
      4. Select Save to save the CSS file.
    • If you want to embed the style in an existing CSS file, select any of the existing styles and select OK. In the CSS Style Definition dialog, define the properties of the style as required and select Save to save the file.

Back to top

Managing CSS Styles

In Logi Report Designer, you can manage CSS styles at any time in the CSS Editor. However you might find it easier to use a third party CSS editor such as Dreamweaver that allows you to see all of the CSS classes at one time.

To access the CSS Editor, select Home > CSS Editor.

CSS Editor

  • To import a CSS style:
    1. Select the Import button in the CSS Editor.
    2. In the Import CSS File dialog, select the CSS style you want to import and select Open.

    Note: In the imported CSS styles, only the valid property names, which match with those in Logi Report Designer, will take effect.

  • To duplicate a CSS style:
    1. Select the CSS style you want to duplicate from the CSS File box.
    2. Select the Duplicate button.
  • To export a CSS style:
    1. Select the CSS style you want to output from the CSS File box, then select the Export button.
    2. In the Save As dialog, specify the directory to locate the CSS style.
    3. Select Save to save the CSS style to the specified directory.
  • To remove a CSS style:
    1. Select the CSS style file you want to remove from the CSS File box.
    2. Select the Remove button below the CSS File box to remove the style.
  • To create a style sheet in a CSS style:
    1. Select the CSS style you want to edit from the CSS File box, then select the New button on the right.
    2. In the New CSS Style dialog, define the type of the CSS style as required:

      New CSS Style

      • To create a custom style that can be applied as a class attribute to a range or block of text, select the Class option and then type a name for the style in the Selector Name combo box.

        Note: Class names must begin with a period and can contain any combination of letters and numbers (for example, .myhead1). If you don't type a beginning period, Logi Report Designer automatically enters it for you.

      • To redefine the default formatting of a specific tag, select the Tag option and then select a tag from the Selector Name combo box.
      • To define the formatting for a particular combination of tags or for all tags that contain a specific ID attribute, select the Advanced option and then type one or more tags in the Selector Name combo box or select one from the box.
    3. Select OK and the CSS Style Definition dialog appears.

      CSS Style Definition

    4. Add the properties you want to contain in the style sheet, specify the values for the properties and check if the properties are important or not.
    5. Select Save to create the style sheet.
  • To edit the style sheets in a CSS style:
    1. Select the CSS style you want to edit from the CSS File box. All the style sheets in the style file will be displayed in the Styles box.
    2. Select the one you want to edit and select the Edit button on the right.
    3. In the CSS Style Definition dialog, edit properties for the selected style sheet as required.
    4. Select Save to confirm the editing.
  • To remove a style sheet from a CSS style:
    1. Select the CSS style you want to edit from the CSS File box. All the style sheets in the style file will be displayed in the Styles box.
    2. Select the style sheet you want to remove and select the Remove button on the right.

Back to top

BackPrevious Topic Next TopicNext