Addemar Support Knowledge

How do I create a custom template?

When you want to create a custom template for Addemar, first design it using an html editor such as Dreamweaver.

Design as if you were designing just one individual e-mail.

Some special recommendations, however:

  • Keep in mind that, to make sure that all e-mail clients can read your html, it should respect the XHTML prescriptions. Run an XHTML validator when you are finished.

  • Some e-mail clients cut off the entire <head> of a message, so to avoid any problems with the .css, you should put the .css code in the <body> of the e-mail or use simple html styling. 

  • To make sure e-mails display nicely within the preview pane of an e-mail client, put all the content in a centered table with a width of 600 pixels. <table width='600' border='0' align='center'>

  • Respect our ten commandments if you want your template to be supported by all different mail clients.

When your design is ready, you can start converting it to an Addemar template.

Note: before you start integrating ADDEMAR tags, make a copy of the original template. Use the preview of this template to create a thumbnail of your template. Dreamweaver cannot read ADDEMAR tags and will maybe display the e-mail differently.

To convert an html e-mail to an Addemar custom template:

  1. Change the doctype to:

    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

  2. Change the character set to UTF-8:

    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />

    Addemar works with the UTF-8 standard for special characters. Putting this characterset garantees that special characters (symbols, accents, arabian, cinese, russian) are supported.

  3. Change the title to:

    <title><?add_subject?></title>

    When your e-mail is viewed in a browser, the subject of the e-mail will be shown as page title.

  4. Make your template ready for sending via e-mail. Integrate the standard sentences on the top and the bottom of the message. Use ADDEMAR tags of the type "addemar" for this 

  5. Define the editable areas of the template. By defining the editable areas, you make your template ready for the interactive preview. 

  6. Upload the images that you want to integrate in the template to your Addemar library. In the html code, change the image source to URL that points to the images folder in the Library, which is '<?add_userdata?>/Image/'.
    For example: '<img src="<?add_userdata?>/Image/filename.jpg" />'

  7. Save your custom template as .html. Upload it to Addemar.

  8. Test your custom template in Addemar. Make a creation, test all the editable areas in the interactive preview and send a testmail. If possible, send a testmail to different types of e-mail clients (Outlook 2003, Outlook 2007, Hotmail, Gmail, Lotus Notes, ...) to verify if they all display rightly the e-mail based on your template.

  9. The styles you defined in your html code are not editable via Addemar yet. If you want to make styles editable, use ADDEMARSTYLE tags. The users of your template will be able to change the styles via the layout settings menu and the colours & fonts dialog.

  10. Save your custom template. Now you can upload your template to Addemar again and test it.