MyMail Templates

MyMail Templates

Create custom templates for MyMail

MyMail Plugin Templates

If you every have wondered how you can build custom templates for MyMail this is how you can do it!

Welcome

Great! You would like to create a custom template for MyMail. This documentation should help you during the progress.

While MyMail has some limitations you should be able to create as nearly every layout you like.

Structure

A template includes at least two template files:

While the index.html file contains all available modules the notification.html file contains only a text area which is used for notifications (e.g. confirmation, new subscriber infos, mails used by WordPress ( wp_mail() )

Each template file must include a header, similar to the header of a WordPress Theme:

<!--
    Template Name: Your Template Name
    Template URI: http://example.com
    Description: some short description of your template
    Author: Your Name
    Author URI: http://example.com
    Version: 1.0
-->

Each template file is structured as following:

Let's take a look at this example

<!--
     Template Name: Your Template Name
     ...
-->
<html>
    <head>
    <title>{subject}</title>
   </head>
<body>
   <style>
      //some styling here
   </style>
<!-- content -->
<modules>
   <module> </module>
   <module> </module>
</modules>
</body>
</html>
You can see that the style block is inside the body tag. This is required otherwise it's getting removed in the final email

Preheader

Preheader is used to display a short info in the preview pane of the email client

Outlook 2007 + 2010

Google Mail

iPhone

To make preheaders work correctly you have to add a {preheader} tag in your templates. Best is to wrap it in a div a hide it by default with CSS:

<div class="preheader">{preheader}</div>

div.preheader{
    line-height:0px;
    font-size:0px;
    height:0px;
    display:none !important;
    display:none;
    visibility:hidden;
}

This CSS is good to hide the preheader in most of all email clients 

Content and Modules

The content is often based on modules but modules are not alway required (the notification.html template files doesn't use modules) Modules helps to easily include prepared content blocks with images, text or both. You can use any content inside modules (beside the ones which are not accepted like iframe, oembed, scripts, etc).

A module starts with a module tag and ends with a closing module tag

<module label="My fancy module">

... //modulecontent

</module>
You should define a label to give your module a name!

You can use an active attribute to include the module automatically on new campaigns

<module label="My fancy module" active>

... //modulecontent

</module>

You should name you modules depending on their content but you can use the same name more then once too. All modules must be inside a modules tag to work correctly:

<modules>

    <module label="My fancy module">
        ... //modulecontent
    </module>

    <module label="My second module">
        ... //modulecontent
    </module>

    <module label="Another module">
        ... //modulecontent
    </module>

</modules>

adding three modules will add them in the dropdown list:

Editable Content

You can now make individual modules but now you need to add editable regions to make them editable via the editbar.

There are four types of editable content:

Single Lines

To make single lines editable just wrap a <single> tag around it:

<h1><single>Headline goes here</single></h1>

You can (and should) also define a label for this element:

<h1><single label="My Headline">Headline goes here</single></h1>

Single lines are made for short sentences, headlines or other texts with view word without need of further formatting

Multi Lines

Multi line are similar like single lines but offer a rich text editor:

<multi label="My Body Text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla mollis tortor a scelerisque...
</multi>

Multi lines should be used always when additional markup like font styles, colors or additional headings are required

Images

To make an image ediable simple add an "editable" attribute to the element:

<img src="IMGSRC" editable>

The label attribute works as well:

<img src="IMGSRC" editable label="My Image">

Buttons

Buttons are possible as single buttons or as button groups. Single buttons need an editable attribute in the anchor tag:

<a href="#" editable label="My Button"><img src="BTNIMG"></a>

To group buttons wrap all buttons into a buttons tag:

<buttons>
    <a href="#" editable label="My Button 1"><img src="BTNIMG_1"></a>
    <a href="#" editable label="My Button 2"><img src="BTNIMG_2"></a>
    <a href="#" editable label="My Button 3"><img src="BTNIMG_3"></a>
</buttons>

Button groups allows to add multiple buttons next to each others

Text Buttons

Text Buttons are easy to style and to edit (You don't have to upload a new image)

Simple wrap a table with a "textbutton" class around it:

<table class="textbutton" align="left">
   <tr>
      <td><a href="#" editable label="My Button">Button Text</a></td>
   </tr>
</table>

The additional markup is required to style them with CSS and make them look (nearly) equaly accross email clients

Note: The tags <single>, <multi>, <module>, <modules> and <buttons> will get removed in the final email so don't style them directly!

Notification template

The Notification template (notification.html) is used for

It's a simplier version of your base template file and must include at leat two tags:

You should also includea {notification} tag which get replaced why and where users signed up

Placeholder Images

You can include all images within the final zip file. This is perfect for button images, social media images and other required images.

For larger placeholder images you can use MyMails dummy image service:

<img src="assets/images/image_1.jpg" />

Just use http://dummy.newsletter-plugin.com/AAAxBBB while AAA is for the width in pixels and BBB is the height. Only use the jpg extension!

You can of course use your own placeholder images!

Tags

MyMail uses tags to show dynamic content. You can use following tags in your template:

{unsub} - unsubscribe link including anchor tags
{unsublink} - unsubscribe link 
{webversion} - web version link including anchor tags 
{webversionlink} - web version link 
{forward} - web version link including anchor tags to forward mail
{forwardlink} - link to forward mail

{subject} - subject
{preheader} - preheader text

{headline} - used for the headline in notification.html
{content} - used for the content in notification.html
{notification} - used for information about subscription in the notification.html

{copyright} - displays the copyright defined in the settings

{email} - subscribers email address wrapped in anchor tags

{emailaddress} - subscribers email address

{firstname} - subscribers first name 
{lastname} - subscribers last name 
{fullname} - subscribers full name 

{year} - current year (YYYY)
{month} - current month (MM) 
{day} - current day (DD)

File Structure

To help MyMail find all required files you have to save them in certain folders. Here's the general structure of the files:

Please keep the folder structure and the naming convention so MyMail can show all files correctly. You can add additional folders with images in the btn and social folder. Each folder will show up as a tab in MyMail:

colors.json

To add additional color schemas on template uplaod you can add a colors.json file which containes an array of color schemas:

[
    ["#F4F4F4","#F8F8F8","#F07800","#787878","#FFFFFF","#E1E1E1"],
    ["#F4F4F4","#F8F8F8","#C36100","#787878","#FFFFFF","#E1E1E1"],
    ["#F4F4F4","#F8F8F8","#BF8D1A","#787878","#FFFFFF","#E1E1E1"],
    ["#F4F4F4","#F8F8F8","#9C186C","#787878","#FFFFFF","#E1E1E1"],
    ["#F4F4F4","#F8F8F8","#A5183E","#787878","#FFFFFF","#E1E1E1"],
]
colors.json only get imported if users uploads the zip on the backend and not while uploading th estructure via FTP

Limitations

HTML Email templates have a lot of limitations. This is mostly because of the used email clients which do not support the latest technology. Do get an overview which client support certain functions check out CampaignMonitors Guide to CSS support in email

Colors

Colors in MyMail get extracted from the template file. Each color has it's own purpose so you can't use the (exact) same color for the text color and for the background color without changing them at the same time.

Only 6 digit color codes are recognized (#123456)

If you like to make a color unchangeable simple use three digit (#123) or color names ('red', 'green' blue',...). Don't use rgb or rgba definitions cause they are not supported in all clients

Background Images

MyMail uses this approach to use background images in email. While background images do not work properly in all clients you should prepare your template to work with them. Simple wrap your email content into this table:

<table class="bodytbl" width="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td background="" align="center">
       //Your content here
    </td>
    </tr>
</table>
</body>

Please note the "bodytbl" class and the background attribute in the first td. Both are required to display background images in most of the common email clients as well on Yahoo's web mail service

Style Blocks

While you can (and should) use embedded CSS instead of inline you have to keep your style block inside the body tag

Wrong:

<html>
<head>
    <style> <style>
</head>
   <body>
   </body>
</html>

Correct:

<html>
<head>
</head>
   <body>
       <style> </style>
   </body>
</html>

Example Template

I've prepared a an example template which you can use as starting point. Download it here.