Style your template

Overview

Cascading Style Sheets (CSS) define the look of the document.

The system has two levels of CSS:

• Base CSS is fixed and defines the overall document geometry and conventions

• Additional CSS is customisable and defines document style

CSS classes are added to HTML elements to control formatting and layout using the class attribute.

<p class="warning-box warning-text center-text">  
  I am going to be big, red and centred.
</p>

In the example above, the classes warning-box, warning-text and center-text are combined to add formatting the paragraph tag. Those CSS classes are defined in the Additional CSS.

Default CSS rules

While the Additional CSS is user customisable, it's hard to start from scratch.

A default set of CSS has been developed to give template authors common layout and style controls for form letters. You can download this from the Additional CSS section of this page. It is also applied by default to all new mail merge templates.

The guidance on this page assumes you basing your template on those CSS rules.

Layout controls

Some basic box controls allow paragraphs to be moved around the page.

Note, you should use a <div> rather than a <p> if laying out both a left and a right column.

CSS Class	Description
left-box	Creates a text box and places it on the left half of the page.
right-box	Creates a text box and paces it no the right half of the page.
warning-box	Creates a bright red warning message

Text formatting controls

Some basic text formatting classes allow for common formatting within the paragraphs.

CSS Class	Description
left-text	Left justifies the text
right-text	Right justifies the text
center-text	Centre justifies the text
justify-text	Fully justifies the text
small-text	Makes the text smaller than the base font size (in CSS this is currently 85%)
warning-text	Makes the text red and bold.
top-heading	This provides alternative sized headings for the top page

These can be combined — for example:

<p class="small-text warning-text center-text">  
  I am a small, centred warning.
</p>

Positioning your addresses for windowed envelopes

A special HTML element <address> is used to handle fixed positioning for windowed envelopes.

<address>    
  Your adddress goes here
</address> 

If you want to use windowed envelopes, place your address tokens inside this element. If you do this, the address will be positioned exactly where it needs to be for your envelope, irrespective of the rest of the document's content.

The position of the address window is controlled by the system, and you can change the top and left position by entering in the number of millimetres from the edge of the envelope.

The following example shows the addition of both an address (using the <address> element), and some additional wording positioned above and to the right of the fixed address.

The HTML looks like this:

<!-- The address block is in a fixed position on the letter -->
<address>
  {if $overrideOwnerDetails}        
    {$overrideOwnerDetails|nl2br}    
  {else}        
    {$assetContact.fullName}<br />        
    {$assetContact.address1}<br />
    {$assetContact.address2}<br />
    {$assetContact.address3} {$assetContact.address4}    
  {/if}
</address> 

<!-- The article block holds the main letter content -->
<article>    
  <!-- This part floats left -->
  <p class="left-box">        
    <strong>I direct:</strong>        
    
    <!-- Leave a big space here for the address window -->
    <br />
    <br />
    <br />
    <br />
    <br />
    <!-- ... here you can add your letter content ... -->
  </p>

  <!-- This part floats right of the address -->  
  <p class="right-box right-text">
    <strong>Notice #{$noticeNumber}</strong><br />
    Issued {$MERGE_DATE}<br />
    <br />
    <em>The owner or occupier of:</em>
    <br />
    {$item.Asset.friendly}<br />
    Property No. {$item.Asset.friendlyCode}    
  </p>
</article>

Note that in this example, the <address> element has been placed outside of the <article> body.

This is optional, but aids in understanding that it floats above the body rather than being positioned where it was written.

Tip: As an aid, you can adjust the CSS rules to place a light grey background on the <address> section, so you can see where it is. This can be controlled in the Additional CSS section.

You can extend the default styles and add your own, using the Additional CSS field.

Below are some common recipes.

Customising the defaults

You can extend and customise the default Additional CSS rules.

Set the body text font

It's a good idea to set the font once, and then adjust your heading sizes relative to that base size.

/* Set the default font for the document */
body {
    font-family: arial, helvetica, sans-serif;
    font-size: 11pt !important;
}

/* Define headings relative to the default font */
h1 {
    font-size: 125%;
    font-weight: bold;
}
 
h2 {
    font-size: 100%;
    font-weight: bold;
}
 
h3 {
    font-size: 80;
    font-weight: bold;
    font-variant: small-caps;
}

Make the address pop out for positioning tests

When doing layout tests, this makes the address box pop out to make it easier to position.

address {
     border: 1px solid grey;
     background-color: lightgrey;
}

Control the size of printed images

Assuming your images are defined with class of "media" as per the examples earlier in this document, you can control their size like this:

img.media {
  width: 10cm;
}