Define preview styling of Text Blocks

Both KCM Designer and KCM ComposerUI display previews of Text Blocks. You can see previews when you edit a Text Block, browse through the available Text Blocks in a project, or preview the output of an interactive composition.

Only users with Project Administrator role can edit preview styling.

To modify preview styling, follow the steps below:

  1. Navigate to the Corporate Design folder of a project.
  2. Edit the Text Block preview styling object. This invokes a text editor with a CSS file that defines the preview styles.

    The Text Block preview styling object only exists on the top level of the Corporate Design folder. It does not depend on Brand or Document Type.

  3. To modify the styling of a generic paragraph, edit or create a CSS rule that works on p, and:
    • Set the text font with the font-family attribute.
    • Set the text size with the font-size attribute.
    • Set the text color with the color attribute.
  4. To modify the styling of a paragraph in a predefined style (header, normal, custom1, custom2, custom3), edit or create a CSS rule that works on p.class. The same attributes as above can be applied to this rule too. When an attribute is specified both in the generic and in the specific styling, then the one in the specific styling takes precedence.

    The class names for header and normal are simply header and normal. The class names for custom1, custom2, and custom3 are customclass1, customclass2 and customclass3.

  5. Save the changes and close the editor.

The changes to the preview styling are applied immediately to all Text Blocks that belong to the same project. The previews in Designer use the In development revision when the preview styling is being edited by the same user, and the current revision otherwise. The previews in KCM ComposerUI use the revision that was specified on the interactive run.

The styling of previews is defined separately from the styling of the actual output. It is up to you to make sure that the preview styling and the output styling are in sync. Furthermore, less options are available for the preview styling. The preview styling should distinguish between the paragraph styles in a way that resembles the output styling, but it can never be more than an approximation.

KCM uses the :has attribute to style the bullets and numbers in a list. If list bullets and list numbers are displayed differently than the text that follows, check if your browser supports the :has attribute.