Templates

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 4 templates but you can create as many templates as you want.

Template listing

You can access the template listing by clicking on the Joomla menu Components -> AcyMailing -> Templates or by using the AcyMailing menu Newsletters -> Templates.

Import : Enables you to import a template. The template has to be a zip file.
Export : Enables you to export the selected template from the listing.
New : Enables you to create a new template.
Edit : Select a template and then click on this button in order to edit its information.
Delete : Select one or several templates and click on this button in order to completely delete the selected templates.
Help : This button enables you to turn ON/OFF the help section, this screen will appear or disappear.

Column headers

# : An indexing number automatically assigned for ease of reference.
Order : The templates are ordered and you can modify the ordering of the templates. The templates will be displayed following this ordering on the template selection screen.
Checkbox : Check this box to select one or more items. To select all items, check the box in the column heading. After one or more boxes are checked, click on the delete button in order to delete the selected templates.
Template Name : Name of the template so that you can easily identify it.
Default : 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 another template when you create a Newsletter but the first PUBLISHED and set as DEFAULT template will be automatically loaded. If you do not set any template as DEFAULT, no template will be loaded when you create a Newsletter.
Published: If you don't publish a template, this template won't be displayed in the template selection screen when you write a Newsletter.
ID : This field indicates the ID of the template.

Template creation

Tags : This button enables you to choose a tag and include it in your template so that you won't have to include it each time you write your Newsletter. We highly recommend you to INCLUDE AN UNSUBSCRIBE LINK in each template you will create!
Send a test : Send a test of the template to yourself (default value), to an entire Joomla group (Manager, Administrator or Super Administrator) or to any other e-mail address.
Save : Save the template and go back to the templates management.
Apply : Apply the modifications to the current template and stay on the same screen.
Cancel : Return to the previous screen.
Help : This button enables you to turn ON/OFF the help section, this screen will appear or disappear.

Configure your template

- First, enter a template name. This name will be used to identify your template but will never be visible for your visitors.
- Enter a 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 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 another 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 :
```
<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:

 
<!-- 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 styles 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 article area will be used to encompass your article
- Style for the article 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 Style of the links 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.

Header

In some cases (generally because of Outlook), you may need to add some specific code to the <head> part of the sent emails. In this case, you can paste it in the "Header" tab of your templates like in this example:

Please be careful of what you add in this tab, as AcyMailing doesn't check its content at all (so you may break your template's structure if you insert a bad code).

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" )
Outlook might resize your pictures in a strange way, to avoid this layout issue and keep a good ratio for all your picture, insert the width and the height of each of your pictures directly in their <img> tag. If you forget to do this, don't worry, AcyMailing will do it for you!
If you want to create styles that will appear in the style dropdown of the Acymailing editor, you should then create them in the Stylesheet tab and specify the html tag on which the class is meant to apply. For example span.myClass will apply the style only on the selected text, div.myClass will apply the style on all the whole area containing the text. For example:
```
span.myClass{ color:#d1021c; }
div.anotherClass{ font-size:12px; }
```

Frequently Asked Questions

I have another template exported from another program, how can I use it in AcyMailing?

First create a zip file of this template (including the pictures) and then upload it on AcyMailing.

Outlook applies a style to the text inside your table, that's why the text outside a table is different than the one inside the table.
To avoid this issue, you should force the style of your content by adding some CSS to your Newsletter-template, for example:
```
table,div{ font-family:Verdana;font-size:12px;}
```