How to Create/Edit Your Own Mail.app Stationery

74 Comments

Mail Stationery

One of the new features in Leopard’s Mail is that it includes a few dozen stationery templates for you to easily choose from to jazz up your emails.

For the most part these templates are just plain ole’ fashioned HTML with a tiny bit of XML. So really the only requirements for editing or creating your own stationery is that you know a small bit of HTML. Some design skills wouldn’t hurt if you’re creating your own from scratch.

I’m not a huge fan of getting HTML email, but there are times when it’s nice. I decided to dig in to things a bit to figure out just how all of this works and was pleasantly surprised to find that it’s really quite simple.

Below is a fairly in-depth walkthrough on just how you can create your own Mail stationery or edit the pre-made stationery.

Overview

Ultimately each stationery design is just a separate folder of HTML and images packaged up and organized well. As long as you know how to navigation the Finder and use the contextual menu, you’ll do just fine.

Using the steps below you’ll be able to either edit one of Apple’s predesigned templates, or create your own from scratch. In this walkthrough we’ll be creating a new stationery from scratch. I’d suggest downloading the walkthrough files to have as a reference along the way.

Family Newsletter Stationery

Folder Structure

In case you didn’t know, when you go to your trusty Applications folder and double click on an icon to launch the app, you’re actually double clicking on a folder of sorts.

If you go to an application and right-click (or control-click) you’ll see an option to “Show Package Contents” in the contextual menu. If you click that option you’ll then see that inside the “package” (ie. the appliction) are actually quite a few files and folders that make up the application.

To edit and create stationery you’ll make use of this functionality.

To access the stationery you’ll need to go to:
/Library/Application Support/Apple/Mail/Stationery/Apple/Contents/Resources/

Yes, there are quite a few subfolders.

Once you are in that Resources folder you will notice a few other folders listed which ultimately amount to the different categories of stationery to choose from. In this walkthrough we’ll be creating a ‘Family Newsletter’ template and I’ve chosen to put it in the ‘Announcements‘ directory.

Go ahead and start making your way down a few of the subdirectories (/Contents/Resources/). You’ll now notice a listing of the stationery packages.

Each stationery is named using the format of Stationery Name.mailstationery.

Go ahead and create a new folder and name it Family Newsletter.mailstationery. Immediately after you create it you’ll notice it has changed in to a stationery “package” just like the others listed there.

Creating the Template

Again, don’t be overwhelmed by the number of folders you’re having to traverse through. Once you’ve made it through the folders you’ll look back and realize it wasn’t that complicated.

That being said, lets move through a few more folders. :)

Control-click on the Family Newsletter.mailstationery file you just created and click on “Show Package Contents.” You’ll need to to create two subfolders so that you ultimately have the following setup:

Family Newsletter.mailstationery/Contents/Resources/

Inside the Resources folder there are a few core files and folders that need to be created.

  1. Description.plist – This is what “builds” the template. We’ll cover the contents of this file shortly.
  2. /English.lproj/DisplayName.strings – Yes “English.lproj” is the name of the folder you should create.
  3. content.html – This is the (mostly) plain HTML for the template.

The HTML

Before we get any farther, you should know that HTML for email templates is just plain in the dark ages. In fact, certain companies are actually moving backwards as far as innovation goes. So, for all you standards junkies, the HTML for this is going to make you cringe.

At the end of this walkthrough there is a link to download the necessary files for this. I won’t post all of the HTML here, but I will post a few bits of code that might be new to you as well as some that is unique to Mail stationery.

contenteditable
contenteditable is an HTML attribute that is used for making areas of content editable (go figure). Here’s an example of how it would be used:

This is some boring text

Basically what this does is it lets you define what areas of text can be edited in your stationery.

AppleCompositeImage
If you’d like to be able to drop in photographs for your stationery and have them be restricted to certain areas, you’ll want to make use of AppleCompositeImage. Here’s an example of use:

This will be where your “drop zone” is for dropping in images. The src attribute is paired up with code used later on in the walkthrough.

apple-content-name
I’m not completely sure what the apple-content-name attribute is used for. My guess is that it’s used for when you switch between templates. Using it will help keep your text intact as you switch. Example use:

Our Vacation

That’s basically it as far as out-of-the-ordinary HTML goes. At this point I’d suggest downloading the file at the end of the article and opening up the content.html file to take a look at the sample HTML code I used to create my template.

DisplayName.strings

Above I mentioned a file you should create called DisplayName.strings. This file is really straightforward and all it does is tell Mail what it should show as the name of your stationery. It only needs to contain the following code:

"Display Name" = "Family Newsletter";

Description.plist

The Description.plist file is probably the most complex part of this whole process. I don’t suggest typing out the contents of this file from scratch. My suggestion would be to download the accompanying walkthrough files and copy/paste the contest of Description.plist in to the one you created.

Te Description.plist file is just an XML file that controls some of the settings of your stationery.

<key>Background Images</key>
This bit should contain any images used as backgrounds in any HTML.

Example:
Background Images

content_bg.png
header_bg.png

<key>Composite Images</key>
This is where things get a bit tricky. The Composite Images code sets up the dynamic image spots that let you drop in your own photos.

Here is what makes up the Composite Images bit of code:
Composite Images


Base Image
banner.png
Composite Name
Photos
Masks


Drop Zone Angle
0
Drop Zone Offset

0
0

Drop Zone Size

496
186

File Name
mask.png
Placeholder Image
placeholder.jpg


Overlay Image
shadow.png

Now for some explanation.

Base Image – The base image is the image that is behind the dynamic area. It’s what is seen without any photograph or image “hot spot” in place.

Composite Name – This is what you put in the src attribute of your HTML. I named my “Photos.”

Masks – The Masks area is what does all the magic. More details below.

Drop Zone Angle – If you’d like the “drop zone” (the area where you can drop a photo) to be rotated, you can change this value.

Drop Zone Offset – This crops your masking area using X and Y coordinates to tweak where exactly the mask is located.

Drop Zone Size – This is there pixel dimensions of where you can drop your image and have it be masked.

File Name – The image name of your mask file. You must create a masking image with a block of black that will set exactly where the image shows.

Placeholder Image – This is the image that shows in the drop zone until you put your own image in.

Overlay Image – If you’d like to overlay something (such as an inner shadow) over your photo, then just drop in the name of your image file.

There’s one more chunk of code that needs some explanation in this file:
Folder Name
Family Newsletter.mailstationery
HTML File
content.html
Images

header.png
bottom.png

Stationery ID
52CF436E-68DA-4842-A638-2B912C5F7361
Thumbnail Image
thumbnail.png

Folder Name – The name of the .mailstationery file you created.

HTML File – The name of the file containing the stationery HTML.

Image – Similar to the Background Images mentioned earlier, this should be a listing of image files used in the HTML.

Stationery IDAs far as I can tell, you could make the ID just about anything you’d like. It just needs to be unique. Greg filled me on exactly how this works. Yes, you can still “make up” whatever you’d like, but he suggested using the command ‘uuidgen’ in Terminal to created a “Universally Unique ID” that is guaranteed to be unique.

Thumbnail Image – A 69x90px thumbnail preview file of your stationery. This is used in the listing of stationery.

Wrapping Up

Yes, it’s quite a bit to read and digest all of this and I know it looks pretty complex. My suggestion is to download the walkthrough files below and just pick it apart. Also dig through Apple’s pre-made stationery and check out the code used. Edit a few pre-made ones to get a feel for what does what and then jump in and create your own. With a little bit of trial and error you’ll get the hang of it in no time at all.

Feel free to ask any questions or let me know if I missed something. I’ll do my best to answer your questions.

Disclaimer: This is all code I have used (and am currently using) on my system. But The Apple Blog is not responsible for anything that happens as a result editing these sort of files. I can’t possibly imagine how you could do any real damage with this…but this disclaimer stands regardless.

74 Comments

Daniel Tewfik

I’m also having the same problem that William is experiencing. I have everything set up except the Header won’t go through. Even when I save it to drafts, the Header just disappears. I’ve been trying to figure it out btu am completely lost.

William

I am having a terrible time with the header.png not showing up on the other end, and actually disappearing from the local preview and sent message copy after the mail goes out. Freaking strange, I have spent two days now trying to figure out where I am going wrong. Can you please help?

AJ

This is really cool, will certainly incorporate for my personal use! I’m trying to create a html template for a client which they would be able to drag and drop photos and edit text – exactly how you can with the stationery templates in Mail. My question – if I followed these steps would the client be able to “blast” the html file using a ESP such as Constant Contact, Vertical Response etc. or would they have to send it from from Leopard’s Mail app?

Sherrie

I’m trying to download the walkthru files and I keep getting this message:

NoSuchKeyThe specified key does not exist.downloads/FamilyNewsletter.zip37B39F22C00594B3ZeYimnfOC/xMPByKes9EP7sZIyRnBal8WLWWO+ni0jFR9EHDAn3NpTyPvbx4ziCU

Are the files not available anymore?

Franck

Hello,

I am trying to download the Walkthrou File but i got a XML error message.

Thanks for the article.

Franck

Miguel

First of all thank you for your post!
I´m treating to deal with the HTML code.
1) I open the .html and edit (change) the editable text and photos.
2) Now I try to save the .html file (for example with a different name) but I need to do this including my last changes not in the template mode.
3) If I open the .html (the last I save), the file have the template .html information.
Is this possible?
Thank you for your help!

Miguel

Leon

So am I the only one that has trouble with the header not coming through on the email? It shows up in my draft, but once it’s sent out and returns there’s no header.png…

(I found this after editing and customizing my own… scrambled my brain for a few hours, then tested the original downloaded walkthrough files to discover the same problem.)

Any ideas?

Many thanks,

-Leon

John

I have been able to create a lot of stationery using the demos from the stationery pack from equinux. I edited the description file from the stationery given by Apple (easy all you need to do is to change the name of the pictures). The some what hard part is to modify the content.html file…just takes a minute but if you think about it, it’s all about changing table size and images… Have fun guys.

Greg

Help. i downloaded your example file and now all my default apple stationery is gone.

Oscar

Hey, thanks for the input. I had a question though. I’m new to all this stuff, so I don’t understand how to write a file. You said:
“Above I mentioned a file you should create called DisplayName.strings. This file is really straightforward and all it does is tell Mail what it should show as the name of your stationery. It only needs to contain the following code:”

How do I create the file? What app do I use to create it? When I try to open similar files from other stationery it opens with OmniOutliner. Can you help?

Chuy

Does somebody knows how to edit the image of the stationary and change for a different one?

Thanks

John

You can also download the trial version of the stationary Pack from Equinux. By looking at the content you can have all the 111 template then 2 files need to be edited to make them work. You can use the files to create your own templates.

Michael

I have figured out the easiest way for:

Drop Zone Offset: I used guides in photoshop to get the exact pixels to the edge of the frame, this will give you your first:

Guide value to left edge of drop zone = 125

  <array>
   <integer>125 </integer>

For the (y) value you have to measure again from the bottom of your file to the bottom edge of your drop zone area. Remember that the Drop Zone Offset is measured from the bottom left. If you use guides as the tool to do this, you can place your guide on the bottom of your zone and look at your (y) value in the information for that guide. Then all you have to do is subtract that value from the total height in pixels of your entire banner.

Example:

Guide to bottom of frame (y) value = 470

Total banner height = 537
Therefore 537-470 = 67

<integer>67</integer>
End result
<key>Drop Zone Offset</key>

  <array>
   <integer>125<integer/>    <integer/>67<integer/>
 </array>

Drop Zone Angle is still perplexing me. I did try to use the rotate tool to measure the angle (remember it’s measured counter clockwise in degrees) but that didn’t work out so will. I will figure and easy way for this and post later

Michael

I have figured out the easiest way for:

Drop Zone Offset: I used guides in photoshop to get the exact pixels to the edge of the frame, this will give you your first:
&nbsp
guide value to left edge of drop zone = 125
&nbsp
  <array>
   &nbsp<integer>125 </integer>
&nbsp
For the (y) value you have to measure again from the bottom of your file to the bottom edge of your drop zone area. Remember that the Drop Zone Offset is measured from the bottom left. If you use guides as the tool to do this, you can place your guide on the bottom of your zone and look at your (y) value in the information for that guide. Then all you have to do is subtract that value from the total height in pixels of your entire banner.
&nbsp
Example
&nbsp
guide to bottom of frame (y) value = 470
&nbsp
total banner height = 537
&nbsp
(y )offset value = 67
&nbsp
<integer>67</integer>
&nbsp
end result
&nbsp
<key>Drop Zone Offset</key>
  &nbsp<array>
   &nbsp&nbsp<integer>125<integer/>
    &nbsp<integer/>67<integer/>
 &nbsp</array>

&nbsp
I did try to use the rotate tool to measure the angle (remember it’s measured counter clockwise in degrees) but that didn’t work out so will. I will figure and easy way for this and post later

Michael

Working through the example. I am having a hard time figuring out the exact measurements for

Drop Zone Offset and Drop Zone Angle

How do you determine these values? I have been searching in vain to find the way to get these exact values. Any help would be appreciated

Michael

pixie

you got a mistake on the code
it’s CONTENTEDITABLE=”true” not CONTENTEDITIABLE=”true”

Cheers and thanks for the info

The BFG

Oh, I almost forgot. I found that
span contenteditiable=”true”
by itself does not work by iteslf. It appears to need
span contenteditiable=”true” apple-content-name=”title” or name=”body”
to allow you to edit the content of your mail.

Hope that helps.

The BFG

Great article Josh – very handy indeed.

Something else that may be useful for those wanting to create a stationery template quickly and easily. This is mainly for those wanting to have their template look like an existing web page.

Open Safari and go to the page you want and select File->Mail Contents of this page. This will open Mail. Now goto File->Save as Stationery…

This will create new Mail stationery in user->Library->Application Support->Mail->Stationery->Apple->Contents->Resources->Custom

You will still need to edit some elements for it to work right, but it creates all the files you need and gives you a good base to start with.

Follow the other tips in this article and you’ll be away in no time. :)

Mosscow

Thanks Josh! I’m stoked to get home and try this…

Take it easy –

Greg

A suggestion for the description of the Stationery ID key in the Description.plist file:
The correct way to get an ID for this is to use the command-line program `uuidgen`. This will generate a universally unique ID that’s actually guaranteed to be unique, as opposed to just making something up.

The man page for `uuidgen` goes into more detail as to why what it generates is truly universally unique.

Josh Pigford

@Avery: Good question. I’m not sure of way to do it other than having the vCard available somewhere online and then providing a download link.

That, or manually dropping it in each time.

Avery Z Chipka

Any chance you know how to embed a downloadable file like a vcard into the stationary. Direct encoding into the html does not work.

Matt Chandler

you need to re-read your disclaimer. as it reads now you say you are responsible if i mess up my system

“Disclaimer: This is all code I have used (and am currently using) on my system. But The Apple Blog is responsible for anything that happens as a result editing these sort of files. I can’t possibly imagine how you could do any real damage with this…but this disclaimer stands regardless.”

Seth

Ummm.. .dude? Check the text of your disclaimer.

I think you want to add a “not”.

Comments are closed.