SmartLETTERS: Advanced template editing (headers, footers and page breaks)

SmartLETTERS: Advanced template editing (headers, footers and page breaks)

Once a template is in SmartLETTERS it is actually a pure HTML/CSS template with locally stored images. If you have the requisite skills you can edit the raw HTML by editing the template and clicking the 'View' > 'Source code' menu item. There are advantages to this approach in that you can adjust the template in any way supported by the HTML2PDF library including adding headers, footers and page breaks as well as adjusting margins.

Adjusting margins

Perhaps the simplest change to make is to adjust the margins of your template. You will see at the top of the HTML source code the line:
  1. <div style="background-color: #fff; margin: 72pt 72pt 72pt 72pt;">
Just adjust the 72pt values accordingly. They specify the margins in the order top right bottom left so adjusting the third one to 30pt would adjust the bottom margin to 30pt.

Adding a header and/or footer

You can add a header or footer to your content by adding the below to your HTML. It does not matter if this is at the end or start of the HTML although this effects where the code appears in our normal editor. The below are examples for which you can adjust the content in the normal editor after you have added them to the source code. The page header here has a 72pt margin applied to it and 20pt at top. This is so the content is centered nicely although you can remove the DIV and /DIV to remove this margin.

  1. <page_header>
  2. <div style="padding: 20pt 72pt 72pt 72pt;"><img style="width: 87%; margin-left: 0px; margin-top: 0px; transform: rotate(0rad) translateZ(0px);" title="" src="https://dev.smartsync.org/files/images/4hyjic5hKoDaZhA8TSkKTKTarbGiYH--OCGO1RVJBspIPCiFR5UsLGPzcWKid_0LFG4fh_sX9-1WqN8OL7W0-1cm_7BDmKLDjrBNFW1kbDfPue2TsUYxMgHJfnglnF-RbeH3s82avxiHmsw7iXbRT9Av77PHDdnf.png"></div>
  3. </page_header>
and
  1. <page_footer>
  2. <div><img style="width: 100%; ;  margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="" src="https://dev.smartsync.org/files/images/-Opwj6wKHCsMV2pIuysz8alB6Qlbd_AceKt4AESlXNGvM6zFC8VKN2htwhDI1H7RmBSYgP5pMn-sjYtAQdoKGbCebjHPcabLd-8zAdA2Ew968-hVeVbeKElRu1t7eAvHKTUCmO5g2lUki4I0FZVH2AeaDZidSwV6.png"></div>
  3. </page_footer>
you would then have the normal content with it's surrounding margin DIV too i.e.
  1. <div style="margin: 150px 72pt 72pt 72pt;">
  2. <p style="margin: 0; color: #000; font-size: 11pt;>{constituent|primary_addressee}</p>
  3. <p style="margin: 0; color: #000; font-size: 11pt;">{constituent|address|formatted_address}</p>
  4. <p style="margin: 0; color: #000; font-size: 11pt;">&nbsp;</p>
  5. <p style="margin: 0; color: #000; font-size: 11pt;">Dear {constituent|primary_salutation},</p>
  6. <p style="margin: 0; color: #000; font-size: 11pt;">&nbsp;</p>
  7. <p style="margin: 0; color: #000; font-size: 11pt;">Thank you for your gift of ${gift_aid_amount|value::currency}</p>
  8. <p style="margin: 0; color: #000; font-size: 11pt;">&nbsp;</p>
  9. <p style="margin: 0; color: #000; font-size: 11pt;">All the best</p>
  10. <p style="margin: 0; color: #000; font-size: 11pt;">&nbsp;</p>
  11. <p style="margin: 0; color: #000; font-size: 11pt;">Penn Highlands Healthcare Team</p>
  12. <p style="margin: 0; color: #000; font-size: 11pt;">&nbsp;</p>
  13. </div>

    • Related Articles

    • SmartLETTERS: FAQS

      Where can we see a live demonstration of SmartLETTERS and sign up for the Early Access Program? https://www.smartthing.org/smartletters/ How much does SmartLETTERS cost? £600 | $800 US | $1000 CAN per year. When SmartLETTERS goes live, will we be ...

    • SmartLETTERS set up instructions

      Connect to your Raiser's Edge NXT (ref image below) Optionally connect your Google or Microsoft Account (Connect Office) if you want to import templates from OneDrive or Google Drive and send email via your own account Email ...

    • SmartLETTERS: Add Gift Aid support

      SmartLETTERS natively supports gift aid now so please refer to the merge field guide for relevant fields.

    • SmartLETTERS: Demo video and connecting a trial to RENXT

      Demo Video We have produced a comprehensive demo video for SmartLETTERS 2 which you can access via the below link: https://youtu.be/2-I8Fmoujp8 Connecting SmartLETTERS for your trial To activate your trial of SmartLETTERS please: Go to the Blackbaud ...

    • SmartLETTERS: Merge fields

      Within your document you can use a wide range of merge fields. These will be taken from the output of Step 1 of your SmartSYNC flow. A non-exhaustive list is below. Merge fields for CONSTITUENT letters The standard fields are listed below. You can ...