Styling and formatting

In the Designer you have everything at hand to make your templates look good: colors, fonts and all the tools to position, align and embellish elements in your designs. This topic informs about the ways to style a template.

Local formatting versus style sheets

There are in general two ways to style elements:

  • Using local formatting. Local formatting means styling an element directly, using a toolbar button or one of the formatting dialogs.
  • Using Cascading Style Sheets (CSS). Style sheets can determine the appearance of individual elements, as well as the appearance of elements that have the same class or HTML tag.

Whether applied through style sheets or through local formatting, behind the scenes all layout properties in the Designer are CSS properties. When you format an element locally, an inline style rule is added to the element.

Note that where local formatting conflicts with a formatting rule for the same element in one of the style sheets, the local formatting rule gets priority; the rule in the style sheet will be ignored.

It is highly recommended to use style sheets in templates right from the start. Even more so if the communications are going to be output to different output channels, or if they consist of different sections (for example, a covering letter followed by a policy). Using CSS with templates allows a consistent look and feel to be applied. A style sheet can change the look of multiple elements, making it unnecessary to format each and every element in the template, time and again, when the company's layout preferences change. See Styling templates with CSS files.

Layout properties

Colors and fonts make an important contribution to the look and feel of your template. See Colors and Fonts.

Text and paragraphs have a number of formatting options that are not available for other elements: font styles and line height, for example. See Styling text and paragraphs.

Boxes and a number of other elements can have a background color and/or background image; see Background color and/or image.

Several elements, such as boxes, images, paragraphs, and tables, can have a border; see Border.

Boxes, images, tables, text and other elements can be rotated; see Rotating elements.

Spacing (padding and margin) helps to position elements relative to other elements in the template; see Spacing.

The best way to position elements depends on the output channel for which the template is intended; see How to position elements.

The locale setting influences how dates, numbers and amounts of money are displayed; see Locale.

 
  • Last Topic Update: 24/01/2017 09:32
  • Last Published: 7/6/2017 : 9:49 AM