Create Custom HTML Email Templates in the OS X Mail App

A normal mail signature is all that most people need, but it’s possible in Mail to create more advanced HTML-based stationery templates which can contain almost any HTML that you want. In an earlier tutorial, we showed you how to create custom signatures, but this tutorial goes a step further and shows you how to define fully-featured HTML stationery.

Follow each of the steps described below to create your custom stationery.
[wp_ad_camp_4]

STEP 1: Create a HTML Template

The first thing to do is design your HTML template that you want to use as stationery. There are various ways to do this but the easiest way is within a HTML editing package, as it’s by far the quickest option and means that you don’t need to know as much about HTML markup. In this example, we’ll create a very simple template using an image from the Chris Writes website and some additional text, but you can also incorporate all kinds of text, images and CSS. The more HTML you know, the more complicated your stationery can be.

STEP 2: Create a Custom Stationary File

1. You’ll need to create a new email in Mail, which will serve as the basis for the stationery template. It doesn’t matter what’s in the mail at this stage because you’re going to edit the HTML later on.

New Stationery

Create a new mail message to save as stationery

2. From the File menu, select Save as Stationery and enter a name in the dialog box that appears. This saves the template as a stationery file that we can now edit.

Save As Stationery

Save your new message as stationery

STEP 3: Edit The Stationery File

Mail keeps all stationery files in your Library folder. To edit the stationary:

1. Open the following folder location by choosing Go To Folder from Finder’s Go menu (or just press Cmd + Shift + G in Finder and enter the path as follows):

~Library > Application Support > Mail > Stationery > Apple > Contents > Resources
> Custom > Contents > Resources > { your stationery name }

The path really is that long – when you open the directory you’ll see a file that shows a special stationery icon.

2. Right-click on the file and select Show Package Contents to open it. You’ll now see another couple of folders to navigate

Open Stationery Package

Show the stationery package contents to view the files

3. Drill down into the Contents > Resources folder and you should see several files: content.html, Description.plist, and possibly a preview thumbnail file called thumbnail.tiff, though it doesn’t always seem to appear (more on previews later)

4. Open the HTML file with a suitable HTML editor – if you don’t have one just use TextEdit but note that you need to disable some options in the Preferences to be able to edit it properly. To do this, open TextEdit’s Preferences, and in the New Document tab under Format select the Plain text radio button. Next, in the Open and Save tab check ignore rich text commands in HTML files (the first option shown)

5. The next step is to insert the custom HTML that you created earlier. Edit the content.html file so that it looks similar to the HTML below but use your own markup instead of mine. The bold bits are the main part of my template – in this case just some text and an image. Note that images must reside on a web server online rather than be stored locally, and should contain the full path to image

<html>
<body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break:
 after-white-space; ">
<span contenteditable="true" apple-content-name="body" style="display: block; ">
Chris Writes Mail Template
</span>
<img src="http://www.chriswrites.com/wp-content/uploads/Article-12-Mountain-Lion-Icon.jpg">
</body>
</html>

STEP 4: Check Your Stationery in Mail

Now, go back to mail and open a new mail message. At the top right of the message, click the stationery icon to open the stationary panel as shown below.

Under Custom, your new stationery should be displayed. Just click your template and the main body of the message should reflect what you’ve written in the HTML. You’re free to type anything you want just as a regular email message, but you’ll notice that the preview will probably be blank. Follow the next section to create a preview for your new stationery.

Finished Template No Preview

The finished stationary has no preview yet

STEP 4: Add a Preview to Your Stationery

Custom stationery created in Mail sometimes creates a thumbnail preview file automatically and stores it in the Mail folder that you were in before, but other times it’s not shown. There doesn’t seem to be much logic to this but if it is already present as either a TIFF or PNG file, you can just edit the image in an editor such as Pixelmator and create whatever you want to use. The file should be saved as thumbnail.tiff or thumbnail.png.

If the preview file is not present, here’s how to create one:

  1. Open you favourite image editor and create a preview that reflects your newly created stationery
  2. Save the image as a png file with a width of 69 pixels and a height of 90 pixels
  3. Make sure the png file is in the same directory as the content.html file created earlier
  4. Edit the Description.plist file and add the following lines near the end:
<key>Thumbnail Image</key>
<string>thumbnail.png</string>

Lastly, reopen Mail and create a new message. Hit the stationery icon at the top right of the mail message and the Custom category from the menu on the left below the Subject line. Your new stationery preview should be visible and can now edit your message as desired.

Stationery Preview

Your stationery preview should now be visible

[wp_ad_camp_3]

Comments

  1. Prime says

    Thanks Roland, your instructions helped me recover an earlier Snow Leopard custom template that had got screwed up when migrating to Lion.

  2. Luke says

    Hi Roland,

    I’ve done this before in Snow Leopard, but my Application Support/Mail folder appears to be empty.

    Any thoughts on how to get into those files? I tried using Go To Folder, but the Mail folder is as deep as it will let me go.

  3. says

    Using Mountain Lion try to locate the following Folder:

    Library/Containers/com.apple.mail/Data/Library/Application Support/Mail/Stationery/Apple/Contents/Resources/Custom/Contents/Resources/

    (in your users-Library)

Leave a Reply