# Style your template ## Overview Cascading Style Sheets (CSS) define the look of the document. The system has two levels of CSS: * [Base CSS](#base-css-built-in) is fixed and defines the overall document geometry and conventions * [Additional CSS](#additional-css-customisable) is customisable and defines document style CSS classes are added to HTML elements to control formatting and layout using the `class` attribute. ```html

I am going to be big, red and centred.

``` 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](#additional-css-customisable) section of this page. It is also applied by default to all new mail merge templates. {% hint style="info" %} The guidance on this page assumes you basing your template on those CSS rules. {% endhint %} ## Layout controls Some basic box controls allow paragraphs to be moved around the page. Note, you should use a `
` rather than a `

` 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: ```html

I am a small, centred warning.

``` ## Positioning your addresses for windowed envelopes A special HTML element `
` is used to handle fixed positioning for windowed envelopes. ```html
Your adddress goes here
``` 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 `
` 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>
{% hint style="warning" %} Note that in this example, the `
` element has been placed outside of the `
` body. This is optional, but aids in understanding that it floats above the body rather than being positioned where it was written. {% endhint %} {% hint style="info" %} Tip: As an aid, you can adjust the CSS rules to place a light grey background on the `
` section, so you can see where it is. This can be controlled in the **Additional CSS** section. {% endhint %} 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. ```css /* 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. ```css 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](#aguidetocreatingcustommailmergetemplates-addingaphotospageifevidenceexists) earlier in this document, you can control their size like this: ```css img.media { width: 10cm; } ``` To change the size of a signature, for example to 100 pixels, you could use the "signature" class to set the width (and or height): ```css img.signature { width:100px; } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.cw.crisisworks.com/security-and-support/technical-reference/merge-template-reference/style-your-template.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.