Create custom email templates in Mail

Create a Custom Email Template in Apple’s Mail

You must be comfortable with (or willing to learn!) simple HTML and have access to an image-editing software program in order to use this particular method of customizing one of Apple Mail’s existing stationery templates.

General Instructions for Working with Your New Template

You cannot move your new template outside of the Mail environment so nothing you normally do to work with or save a project will function as usual.

In general:

1. Open a new Finder window
2. Click through: Finder > Macintosh HD > Library > App Support > Apple > Mail > Stationery > Apple > Contents > Resources > Custom > Contents > Resources

Look Inside the Template Folder: Right-click on your newly named email template Open Show Package Contents Displays the content.html and all the supporting foreign folders and images inside your chosen template	Displays the path to open your new template for customization.
Work with Your New Email Template: Right-click on your newly named email template Click Open with > Other	Shows the path for opening the HTML editing program you prefer to use.
Choose an HTML editing software program (it has its issues, but I like MacRabbit’s Espresso)	Applications opens allowing you to choose your HTML editing program.

Start with an Existing Template

You can use any existing template as your starting point, but we have discovered that the best existing template for our purposes is Flower as it doesn’t require a lot of fussing.

Click through Finder > Macintosh HD > Library > Application Support > Apple > Mail > Stationery > Apple > Contents > Resources With Resources selected, click through Finder > File > New Folder Name the new folder Custom This makes it easier to keep track of the new template on which you are working	I just love how computers automatically file folders and files alphabetically.
Click back to Resources to allow the new folder to slip into place Copy flower.mailstationery (not all of the templates lend themselves to customization as they have too many parts which will drive you nuts trying to line up) Back up to the Custom folder Paste flower.mailstationery into this folder Rename it yourclient.mailstationery (I’m using kddidit)

Make This Email Template Yours

Import Your Images

Note that the width (for Flower) is 740px. Ensure that any images which span the width of the template body look good at 740px (check the width if/when you choose any other template as they all different).

Right-click on your newly named email template Open Show Package Contents Displays the content.html and all the supporting foreign folders and images inside your chosen template Open a second Finder window (you want two Finder windows open) Navigate to your desired images	Displays the path to open your new template for customization.
Position this Finder window so it’s next to the Finder window from Working with… Select the images you want to use in your new Email Template Copy the images Select the Resources folder Paste your desired images into the Resources folder	Having two Finder windows open makes it easier to keep track of the images you care copying into your new email template files.

Customize Email Template

Apple uses tables to create their layout so be comfortable with HTML coding for tables.

<table><table> – contains the table; tells the browser that all the code in between is a table.

<tr></tr> – starts and ends a table row

You can have as many <tr>s as you want

<td></td> – contains the contents of a table cell

The number of table cells in a row, <td>s, can depend upon the width of the actual table AND the width the table cell’s contents take up (or that you choose to dictate).

<table> Tells the browser that this is the beginning of a table layout

<tr> Indicates the start of a table row

<td>This begins the table cell contents
</td> Ends the table cell contents

</tr> Indicates the end of a table row

</table> Ends the table layout

Keep in mind that, inside the content.html file, you can change the font, its color, and its size as well.

Using Your Images

Contrary to normal HTML/CSS coding, your images will not appear simply because you have changed the coding in the mailstationery. Each existing image for Flower needs to be replaced with your own images using THEIR filenames:

bg_letter.jpg	740px wide x 414px high. It will expand as needed.
bg_pattern.jpg	135px wide x 231px high. It will expand as needed.
bottom.jpg	740px wide x 129px high.
top.jpg	740px wide x 146px high.
thumbnail.png	66px wide x 90px high. This functions as the image you will see in the Mail program when you click Show Stationery

Depending upon your design, you may simply rename your own image files to reflect the ones provided in mailstationery or open bg_letter, bottom, and top image files and replace the colors and textures with what is needed to create the custom design you want.

The texture/color used in bg_pattern can be replaced by anything you want; the size does not matter.

Once you have created a satisfactory template, the easiest way to create a new thumbnail image is to open Mail > New Message > Show Stationery > choose the new stationery you have just created and snap a screenshot (hold down CMD + SHIFT + 4 and then click-drag the mouse to encompass the new template). Open the screenshot in your image-editing program and change its size to 66px x 90px—otherwise it won’t appear in Mail.

Ensure Appearance of New Template in Mail

There are three places where you need to change the name of your template to ensure it will show up in Mail: content.html, Description.plist, and English.lproj > DisplayName.strings.

You must use the exact same spacing and capitalization in all four areas including the .mailstationery.

Content.html

Change the <title> inside the content.html page

Only <title> needs changing inside the content.html file.

Description.plist

The file, Description.plist, is the second name change that is needed.

Look for the .mailstationery file extension to know which name to change in the Description.plist file.

DisplayName.Strings

Find this bit of script, DisplayName.string, inside the English.lproj folder If you plan on using a language other than English, you will need to change those lproj files	The LPROJ folders contain the DisplayName.string files.
Change the Display Name to exactly match the previous two name changes above.	It's even easier to changing the name in the DisplayName.string file than it was in content.html

Create a Thumbnail

Once you’ve customized the template’s appearance, you need to replace the existing thumbnail. The thumbnail is the reference that Mail displays when you click Show Stationery.

1. Take a screenshot of the entire page
   1. Easiest if you create a New Message in Mail
   2. Click Show Stationery
   3. Navigate to Custom
   4. Double-click the new template
   5. Click Hide Stationery
   6. Adjust the message window so you see the whole template
   7. Click CMD + SHIFT + 3 to take picture of the entire screen
2. Open your image-editing program
   1. Open the screenshot
   2. Crop it to just the template image
   3. Reduce the image size to 69px wide x 90px high

Save the image as thumbnail.png to replace the original PNG file inside yourclient.mailstationery It may default to saving it to the Resources folder (either the folder just before yourclient.mailstationery OR the Resources folder prior to the categories of stationery) Drag the thumbnail.png into your Package Contents if this occurs Apple will ask if you want to replace an older thumbnail.png Say yes

It's a good thing! You do want to replace the existing thumbnail.

Verify the Changes

Check out the name and thumbnail changes by:

1. Open Mail
2. Create a New Message
3. Click Show Stationery
4. Navigate to Custom
5. And…voila!

Troubleshooting

If, for some reason, the changes do not appear, shut down Mail and re-open it.

If the changes still do not appear, reboot the computer. Sometimes you just need to recharge the system!