Skip to main content

Managing CSS Styles

  • Updated

Previous Topic  Next Topic

Managing CSS Styles

In Logi JReport Designer, you can manage CSS styles at any time in the CSS Editor, including: importing, duplicating, editing, exporting and removing a CSS style. 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.

  • 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