E-mail-specific customizations

E-mail-specific customizations

CSS-To-Inline

In some email clients, CSS instructions must be attached directly to the HTML tag for error-free display (i.e. inline). When using CSS-To-Inline, CSS properties are automatically written as inline styles into the corresponding tag during rendering.

To activate the function, the attribute transform="true" must be added to the desired <style> tag:

Example: CSS instructions
  1. <style type="text/css" transform="true">
  2.   .font {
  3.       font-family: Open Sans, Arial, sans-serif;
  4.   }
  5. </style>

During rendering, these properties are written as inline style into the tag with the corresponding class.
Template Source Code
Output Source Code
Template Source Code
  1. <table cellspacing="0" cellpadding="0" width="640" align="center">
  2.     <tr>
  3.         <td class="font">Das ist der Text.</td>
  4.     </tr>
  5. </table>
Output Source Code
  1. <table cellspacing="0" cellpadding="0" width="640" align="center">
  2.     <tr>
  3.         <td class="font" style="font-family: Open Sans, Arial, sans-serif;">Das ist der Text.</td>
  4.     </tr>
  5. </table>
 

CSS-To-Attribute

When using CSS-To-Attribute, CSS properties specified in the header are converted into appropriate HTML attributes during rendering and added to the HTML tag.

To activate the function, the comment <!-- cssToAttribute --> must be inserted within <head></head>:


Example: CSS instructions
  1. <head>
  2.   <!-- cssToAttribute -->
  3.   <style type="text/css" transform="true">
  4.     .spacer {
  5.         height: 25px;
  6.     }
  7.   </style>
  8. </head>

Template Source Code
Output Source Code
Template Source Code
  1. <table cellspacing="0" cellpadding="0" width="640" align="center">
  2.     <tr>
  3.         <td class="spacer"></td>
  4.     </tr>
  5. </table>
Output Source Code
  1. <table cellspacing="0" cellpadding="0" width="640" align="center">
  2.     <tr>
  3.         <td class="spacer" style="height: 25px;" heigth="25"></td>
  4.     </tr>
  5. </table>
 

Supported Attributes

CSS Instruction
Generated Attribute
background-image: url("foo.gif")
background="foo.gif"
background-color: #cccccc;
bgcolor="#cccccc"
width: 200px;
width="200"
height: 200px;
height="200"
text-align: left;
align="left"

Text Part

A text part is important to ensure mailings are not classified as spam, even if it is rarely displayed nowadays. Generally, the MWML structure of the HTML part can be used, but without the HTML tags.
  1. Indentations with spaces or tabs should be removed, as these would otherwise be visible.
  2. All line breaks are visible and should therefore only be used where they are desired.
  3. Many attributes such as label or default texts can be omitted in the text part.

Example

  1. View email in browser: [VIEWONLINE /]
  2. ===
  3. [CONTAINER name='header'][ELEMENT name='headerbanner' default='true']
  4. [INPUT type='a_img' name='image'][BLOCK name='caption']
  5. [INPUT type='span' name='text' required='true' /][/BLOCK][/ELEMENT][ELEMENT name='editorial' default='true'][CONTAINER name='editorial'][ELEMENT name='headline' default='true']
  6. [INPUT name='headline' /][/ELEMENT][ELEMENT name='text' default='true']
  7. [INPUT name='text' label='Text' /][/ELEMENT][ELEMENT name='button' default='true']
  8. [INPUT type='a' name='button' required='true' /][/ELEMENT][/CONTAINER][/ELEMENT][/CONTAINER][CONTAINER name='main'][ELEMENT name='teaser-article' default='true']
  9. [INPUT type='img' name='image' /][CONTAINER name='teaser-article'][ELEMENT name='headline' default='true']
  10. [INPUT name='text' /][/ELEMENT][ELEMENT name='headline2']
  11. [INPUT name='text' /][/ELEMENT][ELEMENT name='text' default='true']
  12. [INPUT name='text' /][/ELEMENT][ELEMENT name='button' default='true']
  13. [INPUT type='a' name='button' required='true'][/ELEMENT][/CONTAINER][/ELEMENT][/CONTAINER]
  14. ===
  15. [CONTAINER name='footer']...[/CONTAINER]


Hide Content in Browser View

Example: Hide link to online view in browser
  1. [if-param module='viewonline' render='false']
  2.   <a href="[VIEWONLINE /]">View browser version</a>
  3. [/if-param]

In the next step, learn how to add an automatic table of contents: