CSS Styles

Logi JReport 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 JReport, 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 JReport 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 JReport cSS styles, you can create various visual presentation sets from a single report, and change the visual presentation of your report.

Logi JReport 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.

Below is a list of the sections covered in this topic:

Creating CSS Styles
Managing CSS Styles

Creating CSS Styles

To create a CSS style in Logi JReport Designer:

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

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 enter 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 enter a beginning period, Logi JReport 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 enter 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 checked, the following advanced selector names will be available in the Selector Name drop-down list according to the current object name.

Object Name	CSS Tag Name	Advanced Selector Name Example
Aggregation Title	CrosstabLabelField	CrosstabLabelField[Depth=<current>]
Aggregation Field	CrosstabAggregationField	CrosstabAggregationField[XDepth=<current>][YDepth=<current>] CrosstabAggregationField[XDepth=<current>] CrosstabAggregationField[YDepth=<current>]
Special Aggregation Field	CrosstabAggregationSpecialField	CrosstabAggregationSpecialField[XDepth=<current>][YDepth=<current>] CrosstabAggregationSpecialField[XDepth=<current>] CrosstabAggregationSpecialField[YDepth=<current>]
Label of Column/Row Field	CrosstabDBTitleField	CrosstabDBTitleField[Depth=<current>][IsXHeader=<true or false>] CrosstabDBTitleField[Depth=<current>] CrosstabDBTitleField[IsXHeader=<true or false>]
Column/Row Field	CrosstabDBField	CrosstabDBField[Depth=<current>][IsXHeader=<true or false>] CrosstabDBField[Depth=<current>] CrosstabDBField[IsXHeader=<true or false>]
Total Label	CrosstabTextField	CrosstabTextField[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.

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.
  2. Select Save to save the file and the CSS Style Definition dialog appears.
  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.

Managing CSS Styles

In Logi JReport 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 JReport 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:
  - 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 enter 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 enter a beginning period, Logi JReport 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 enter 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.
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.

Previous Topic Next Topic