Last Update: 2023-11-16
All files of a single Template must be in an individual folder. Files must be in following stucture:
▢ templatefolder/
↳ index.php
↳ index.txt
↳ index_web.php
//optional//
↳ thumb.gif
↳ preview.gif
↳ detail.php
↳ config.xml
↳ event_index.php
↳ event_detail.php
↳ event_config.xml
↳ survey_detail.php
↳ survey_config.xml
↳ form_detail.php
↳ form_config.xml
↳ sweepstake_index.php
↳ sweepstake_detail.php
↳ sweepstake_config.xml
↳ ▢ text/ (mandatory for multilingual templates)
↳ de.txt
↳ en.txt
↳ ...
↳ ▢ otherfolder/ (e.g. for images or included files)
↳ ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title><!--TITLE//--></title>
<style type="text/css">
@-ms-viewport { width: device-width; }
body{ -ms-text-size-adjust:100%; }
img{ -ms-interpolation-mode:bicubic; }
*{
font-size-adjust: none !important;
-webkit-text-size-adjust: 100%;
}
a[href^="x-apple-data-detectors:"] {
color: inherit !important;
text-decoration: inherit !important;
font-weight: inherit !important;
}
td, table, tr { border-collapse:collapse; }
a { text-decoration: underline; color:#0099ff; }
a:hover { color:#0066cc; }
</style>
</head>
Eventhough CSS layouts have won over table based layouts in the web, HTML email work differently. Gmail, Outlook 2007, Lotus Notes, and many more all have big issues with floated elements, margins and padding. Structural HTML tables are the only reliable way to end up with an email that at least holds together well.
To implement a margin or padding, use a spacer image. This is a transparent gif image with the desired margin or padding as width or height. Normally a spacer image has either a height of 1px and the desired width to get a horizontal margin, or a width of 1x and the desired height to get a vertical margin.
<!--SPACER:width:height//-->
| width | Width of the spacer image |
| height | Height of the spacer image |
<!--SPACER:10:1//-->Generates:
<img src="{BaseURL}images/spacer_10x1.gif" width="10" height="1" border="0" alt="" style="width: 10px; height: 1px; display:block;">
{BaseURL} is replaced with the URL of your Template-Folder, and spacer_10x1.gif is generated dynamically on the fly (The folder "images" does not have to exist).
Borders are best created by defining an extra <td> with the desired width and bgcolor and including a spacer image.
To ensure Outlook displays the correct size, add font-size: 1px; line-height:1px; to the inline css of the wrapping html element.
<table width="600" style="width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td bgcolor="#888888" style="height: 1px; font-size: 1px; line-height: 1px;"><!--SPACER:1:1//--></td></tr>
</table>
<table width="600" style="width: 600px;" bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1" bgcolor="#888888" style="width: 1px; font-size: 1px; line-height: 1px;"><!--SPACER:1:1//--></td>
<td width="19" style="width: 19px; font-size: 1px; line-height: 1px;"><!--SPACER:19:1//--></td>
<td style="...">
Content goes here ..
</td>
<td width="19" style="width: 19px; font-size: 1px; line-height: 1px;"><!--SPACER:19:1//--></td>
<td width="1" bgcolor="#888888" style="width: 1px; font-size: 1px; line-height: 1px;"><!--SPACER:1:1//--></td>
</tr>
</table>
<table width="600" style="width: 600px;" align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td bgcolor="#888888" style="height: 1px; font-size: 1px; line-height: 1px;"><!--SPACER:1:1//--></td></tr>
</table>
To ensure the correct format of the <img ..> tags for spacer images, we implemented the template-tag <!--SPACER:w:h//-->, where w stands for width and h for height.
Some email clients will ignore a background on the <body> tag, or one that’s set in your style sheet. Having a wrapping table around all your content and setting the bgcolor attribute on it, will work around this issue.
<body style="margin:0; padding: 0;" bgcolor="#eff3f4">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#eff3f4"><tr>
<td> </td>
<td width="600" style="width: 600px;" align="center">
Content goes here ..
</td>
<td> </td>
</tr></table>
</body>
<link..> as mail clients do not load externals automaticallyfont:arial 11px bold;, but declare each css-property used separately, like font-family:arial; font-size:11px font-weight:bold;<td style="font-family:arial,sans-serif; font-size:11px; color:#333333;">Some text</td>
As some mailclients will strip out styles from the head-section, you can't use it to layout or style the content. Use styles in the head-section as addition for elements that can't be styled inline, e.g. elements created in WYSIWYG editor, or to set default setting for specific clients.
Using media queries we can define CSS styles, which will only be used when the query parameters are fulfilled. Therefore we can target specific device sizes, and customize CSS for each device size as needed. All clients not supporting media queries, will simpy render the normal newsletter layout, without CSS defined in the media queries. (Overview of mobile clients)
To override inline styles and HTML attributes, all styles need to be given the !important attribute.
@media only screen and (max-width: 480px) {
table.container {
width: 320px !important;
}
}
<!--LAYOUT_URL//--> to get the URL to your template folderstyle="display:block;" is needed to avoid unwantend margins in Gmail<img src="<!--LAYOUT_URL//-->images/logo.gif" border="0" width="120" height="80" style="width:120px; height:80px; display:block;">
Parts of a template, which are used multiple times, can be outsourced in separate files. For example, when header and footer areas in the index.php and detail.php are identical. To include those files use <!--INCLUDE:filename//-->.
To allow for multilingual templates, translations can be stored in separate language files, for each language supported, a language file is needed. These language files are saved in the subfolder "text", within the folder of the template. The filename needs to be the 2-letter language code of the language (see table below for supported languages) in the file, extension is ".txt".
[[TagName]] Text [[TagName]] Text
| 2-letter Code | Language |
|---|---|
| at | German (Austria) |
| be | Dutch (Belgium) |
| bg | Bulgarian |
| bs | Bosnian |
| ch | German (Switzerland) |
| cs | Czech |
| de | German |
| el | Greek |
| en | English |
| es | Spanish |
| et | Estonian |
| fc | French (Switzerland) |
| fr | French |
| hr | Croatian |
| hu | Hungarian |
| it | Italian |
| ka | Georgian |
| lv | Latvian |
| me | Montenegrin |
| mk | Makedonian |
| nl | Dutch |
| no | Norwegian |
| pl | Polish |
| pt | Portugese |
| rm | Romansh |
| ro | Rumanian |
| ru | Russian |
| sk | Slovak |
| sl | Slovenian |
| sq | Albanian |
| sr | Serbian |
| sv | Swedish |
| tr | Turkish |
| uk | Ukranian |
| zh | Chinese |
To insert a translation use <!--TEXT:TagName//-->.
To display different images for different languages you can use the template-tag <!--LNG//-->, which returns the language of the current newsletter.
<img src="<!--LAYOUT_URL//-->images/picture_<!--LNG//-->.jpg"> <img src="<!--LAYOUT_URL//-->images/<!--LNG//-->/picture.jpg">
The HTML-Code between <!--IF:Variable//--> and <!--ENDIF:Variable//--> will only be shown, if the variable is not empty.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!--IF:CONTENT_PICTURE//-->
<td width="200" valign="top"><img src="<!--CONTENT_PICTURE//-->" width="200" /></td>
<td width="20"><!--SPACER:20:1//--></td>
<!--ENDIF:CONTENT_PICTURE//-->
<td valign="top">
Article title, teaser and link goes here ..
</td>
</tr>
</table>
The check for <!--IF:CONTENT_CTR//--> will always validate as true, as there is always a link to a landing page. Check for <!--IF:CONTENT_CTRNAME//--> instead.
The opposite, to show HTML-Code if a variable is empty, is <!--IFNOT:Variable//--> and <!--ENDIFNOT:Variable//-->
Identical IF/IFNOT controls may never be nested. It won't throw an error, but will likely mess up the HTML Code.
Remember that <!--INCLUDE:filename//--> wrapped with IF/IFNOT controlls may also not contain identical controlls inside of the included file.
To insert recepient address data in the template, use <!--ADDRESS:AddressField//-->, replacing AddressField with the Address-Fields mentioned below.
The following Address-Fields can be used:
Anrede, Titel, Vorname, Nachname, Firma, Funktion, Strasse, PLZ, Ort, Land, Email, Telefon, Mobiltelefon, Internet, Fax, and for custom fields <!--ADDRESS:Attribute1//--> to <!--ADDRESS:Attribute20//-->
Additionally the following notation can be used for address data, the name of the address field enclosed by double square brackets, like [[AddressField]].
Please be advised that control structures cannot be used with this notation.
Address data of the account manager, can also be used in the template. For this case, we included a template tag, which changes allows the placeholder to access the data of the account manager. The placeholders are the same as for normal recepient data, but the placeholder has to be included in the following tag.
Use <!--ACCOUNTMANAGER:AddressField//--> to insert address data of the associated accountmanager.
<table>
<tr>
<td valign="top">
<b>Ihr persönlicher Ansprechpartner<br />
<!--ACCOUNTMANAGER:Vorname//-->
<!--ACCOUNTMANAGER:Nachname//-->
</b><br />
T: <!--ACCOUNTMANAGER:Telefon//--><br />
<a href="mailto:<!--ACCOUNTMANAGER:Email//-->">E-Mail senden</a>
</td>
</tr>
</table>
To include a "powered by eyepin" logo in the template, a special tag should be used. The tag returns an image, uncluding the link to the eyepin website. To faciliate including the image in youzr design, you can set two parameters, which control how the image is displayed, like <!--POWEREDBY:type:bgcolor//-->.
The type parameter, controls the color scheme of the eyepin logo and the powered by eyepin text in the image, and defaults to black
| type | Description |
|---|---|
| black | Icon: colored; Font: black (#000000) |
| white | Icon: colored; Font: white (#FFFFFF) |
| blackmono | Icon & Font: black (#000000) |
| whitemono | Icon & Font: white (#FFFFFF) |
| darkgreymono | Icon & Font: darkgrey (#313131) |
| greymono | Icon & Font: grey (#616161) |
| lightgreymono | Icon & Font: lightgrey (#B0B0B0) |
The parameter bgcolor, is used to set the background color of the image, and defaults to FFFFFF. Any hex value can be used for this parameter, leading # can be omitted.
To include the current year, represented by 4 digits, in the template, a special tag should be used.
<!--YEAR//-->
To differentiate between an unsent form and a sent form, the following tag can be used. Control structure will validate not empty if form is sent. and empty if form is unsent.
Only used with IF/IFNOT controls.
<!--STATFORM//-->