SmartTemplates

Home Variable Definitions Example Templates Screenshots Version History Knowlegebase FAQ Bugs & Features Premium Features Licenses GDPR + Impressum

SmartTemplates :: Knowledgebase: Basics


Making a HTML Fragment

If you write html templates for your e-Mail you should first have to know that you don't write complete html files like for websites.
Please don't write something like this in your e-Mail template: 

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
   <html>
     <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> </title>
     </head>
    <body>
    </body>
   </html>

If you write this you cause some trouble because your mail client inserts the elements <body> and <head> automatically.
Your e-Mail content itself will be embedded only. 

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> </title>
     </head>
    <body>
     <div>your content inside div tag</div>
     <span>your content inside span tag</span>
    </body>
   </html>
 

Why the <font> tag is bad

Thunderbird achieves its default font settings in composer by inserting a pair of <font> tags, like this:

  <font size="-1"><font face="Calibri"> [Your Cursor here]  </font></font>

Any <font> tag needs a closing </font> tag.

<font> is bad and wasteful because it requires these tags to be inserted for every new paragraph / block level element and it cannot be wrapped around paragraphs. It is easily error prone and leads to a lot of extra work especially if you are quoting text while writing your email. Every time you change the font or font size within composer, more </font> tags are added, leading to a quite error-prone mess of html.

Therefore, when composing a new email, SmartTemplate will always remove these codes and relies on the user to make their own font choices within the template code. Instead of using this deprecated tag, one would be much better off wrapping the whole SmartTemplate template in a <div> with a style attribute. 

<div style="font-family: Calibri; font-size: 13pt;">
  <p>Dear %from(name)%,</p>
  <p>Your template text here...</p>
</div>
 

Inline style or the style tag

You can either style elements directly as in the example of wrapping everything in a <div> above, or you can specify a section rules for specific parts of your html. This is entirely up to personal preference - inline styles potentially are more work if you need to copy sections whereas style blocks can be a little harder to trouble shoot. If your HTML styles do not behave as expected take a look at our troubleshooting styles section.

 

The <style> tag

A nice of way of styling is using CSS classes. A css class is a name of your choice, starting with a full stop (.) It can be used in any html tag by adding the html attribute class="name of the class".
Advantage: it can be used on multiple elements to make them look the same without lots of copying and pasting of style attributes. 

   <style type="text/css">
   .veryLegible {
     font-family: "Comic Sans MS",cursive;
     font-size: 30pt;
   }
   </style>
   ...
   ...
   <p class="veryLegible">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
   incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
   exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   </p>
   <p class="veryLegible">
   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
   eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
   sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
   <style type="text/css">
   #introduction {
     color: #888888;
     font-family: Arial,sans-serif;
     font-size: 1em;
   }
   </style>
   ...
   ...
   <p id="introduction">Dear John,<br>
   how have you been?</p>

Apart from class selectors e.g. .myLine the most important CSS selectors are id selectors e.g. #introduction which are meant for single elements, such as <p id="introduction">

 

"Inline" Styling

This is the most robust way of styling because it will always "stay" with the element (here: div) no matter where you move it or whether it is quoted in another email.
Disadvantage: If you want to style 2 elements the same way you have to copy/paste the whole lot. 

   <div style="font-family: 'Comic Sans MS',cursive; font-size: 30pt;">my line</div>

The visual result is for both variants the same
Style tag results

TIP: The only difference between both variants is the way you write font names with white-space
style tag = "inside double quote marks"
inline = 'inside single quote marks'.