Create a Newsletter-template

On your website, you probably installed a template so your content is always formatted the same way and respects some graphic rules.

You can do the same thing for a Newsletter so once your own template is created, you will simply add some content in the main area of your template and you're done.

AcyMailing will automatically install 3 templates but you can create as many templates as you want.

• Configure your template
• Create your template structure
• Apply a stylesheet to your template
  • Individual styling
  • Stylesheet
• Tips
• Frequently Asked Questions

Configure your template

• On the AcyMailing back-end, click on the menu Components -> AcyMailing -> Templates
• Click on the button New
  
  



• First, enter a template name. This name will be used to identify your template but will never be visible for your visitors.
• Enter few words in the description field, you can add some HTML code in this area and so display a template thumbnail if you want.
• You can enter a subject, so when you create a new Newsletter based on this template, the subject of your Newsletter will be automatically filled with the subject defined in your template. This is a non mandatory field which is used to speed up the Newsletter creation but in most of cases you won't have to use it.
  
  



• If you set a published template as default, this template will be automatically loaded when you create a new Newsletter.
  You will still be able to choose an other template when you create a Newsletter but the first default published template will be automatically loaded.
  If you do not set any template as default, no template will be loaded when you create a Newsletter.

Create your template structure

• If you already created a Joomla template, you probably used a lot of div and refused to insert any table in your template.
  Nevertheless, for a Newsletter template, your structure should be created with tables as it's the only way to display it properly on all mail clients.
  Forget about float:left, position:absolute... and say hello to table,tr and td!
• Let's create a table structure:
  • First create a div which will encompass your entire Newsletter and centre it on the mail client :
    Show / hide php code
    

    <div style="text-align:center;width:100%"> </div>

  • Then create a table structure inside this div. A classical table structure will be composed of a header, a main area and a footer:
    Show / hide php code
    

     
    <!-- This first div encompass your entire Newsletter, you can set the background-color on it -->
    <div style="text-align:center;width:100%;background-color:#dddddd;">
    <!-- this table will enable you to get a centred area on which you will add your header, main content and footer. -->
     <table width="600" cellpadding="0" cellspacing="0" style="background-color:#ffffff;text-align:left;margin:auto;" align="center">
    <!-- then you can add your header -->
     <tr><td>HERE WILL BE MY HEADER</td></tr>
    <!-- your main area -->
     <tr><td>HERE WILL BE MY MAIN CONTENT</td></tr>
    <!-- your footer -->
     <tr><td>HERE WILL BE MY FOOTER</td></tr>
     </table>
    </div>

  • We set a fixed width to the table, 600px is what's usually used to create newsletter-templates.
• To apply a background-colour to your template, select the colour you want to use using the colour selection.
• This is the default structure most of Newsletters-templates will have but you can of course use the structure you want and copy one of our default Newsletter-template for ease of use.
  
  

Apply some style to your content

Being compatible with all e-mail clients is a nightmare. Some of them don't accept external stylesheet, others don't accept internal stylesheet...

But one solution is working for all e-mail clients : the inline CSS!
To facilitate the use of such a method, AcyMailing gives you the possibility to directly write some CSS and AcyMailing will convert your CSS classes or stylesheet into inline CSS.

Individual styling

• You can set some CSS to each element and this CSS will be added as inline CSS to your Newsletter on the preview screen and during the send process.
• When you insert articles, products, events... using our tag system, AcyMailing will use the style you defined in your template:
  • Style for the content area will be used to encompass your article
  • Style for the content title will be applied to your content title
  • Style for the read more link will be applied to the read more link coming from content inserted via our tag system.
    If you insert the introduction only of Joomla articles for example.
  • You can also set the style of all your links using the Link a field

For example, this configuration:

Will render:

Stylesheet

But you can also simply add a stylesheet to your template and this entire Stylesheet will be automatically applied to each of your html element in your Newsletter (as inline CSS).

• This stylesheet interface has been developed with AcyMailing 1.3.0 and is only available if your server uses at least PHP 5 and the PHP DOM Extension is enabled on your server as AcyMailing needs this php library to handle the replacement of your html elements in inline CSS.
• Both interfaces to handle the styles will have the same result but you will have much more flexibility by directly using the stylesheet.
• Please don't use * and don't add any comments in this area. Only CSS.

Tips

• Outlook 2007 won't display any of your background images so if you add background images, please also make sure you specified a background colour to support Outlook 2007
• Some mail system will apply a default style on any content inserted in a table.
  We recommend you to define the style applied on your table and div so you will overwrite the style specified by the mail client and make sure the content will be displayed the way you want on every mail client.
  Example : table,div{ font-family:verdana;font-size:12px;}
• Outlook may not apply the width you set on each column if you don't apply it on all your columns on the current table.
• Hotmail applies a green color to your titles (h2,h3,h4...), you should add a !important to your css to make sure Hotmail won't overwrite your color ( style="color:red !important" )