How to Create/Edit Your Own Mail.app 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.
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.
Description.plist- This is what “builds” the template. We’ll cover the contents of this file shortly./English.lproj/DisplayName.strings- Yes “English.lproj” is the name of the folder you should create.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:
<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:
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 - 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 ID - As 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 69×90px 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.
Trackbacks/Pingbacks (Trackback URL)
Comments RSSComments
#1 Seth says:Ummm.. .dude? Check the text of your disclaimer.
I think you want to add a “not”.
#2 Matt Chandler says: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.”
#3 Jim says:I beat you by a day!
How to create customized OSX Mail Stationery in Leopard
Excellent post though, Josh! Very thorough.
#4 Josh Pigford says:@Seth and Matt: Doh. Fixed.
#5 Avery Z Chipka says:Any chance you know how to embed a downloadable file like a vcard into the stationary. Direct encoding into the html does not work.
#6 Josh Pigford says:@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.
#7 Greg says: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.
#8 Josh Pigford says:@Greg: Great tip and something I wasn’t aware of. I’ve updated the post to reflect your tip.
#9 Avery Z Chipka says:Apple developer documentation for mail stationery can be found online here.
#10 Mosscow says:Thanks Josh! I’m stoked to get home and try this…
Take it easy -
#11 The BFG says: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.
#12 The BFG says: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.
#13 pixie says:you got a mistake on the code
it’s CONTENTEDITABLE=”true” not CONTENTEDITIABLE=”true”
Cheers and thanks for the info
#14 Michael says: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
#15 Michael says: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
 
(y )offset value = 67
 
<integer>67</integer>
 
end result
 
<key>Drop Zone Offset</key>
 <array>
  <integer>125<integer/>
 <integer/>67<integer/>
 </array>
 
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
#16 Michael says:Sorry bout that bad job of html
#17 Michael says: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
#18 John says: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.
#19 Chuy says:Does somebody knows how to edit the image of the stationary and change for a different one?
Thanks
#20 Oscar says: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?
#21 Michael says:I use text edit
#22 Greg says:Help. i downloaded your example file and now all my default apple stationery is gone.
#23 John says: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.
#24 Leon says: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
#25 Miguel says: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
#26 Franck says:Hello,
I am trying to download the Walkthrou File but i got a XML error message.
Thanks for the article.
Franck
#27 Sherrie says: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?
#28 AJ says: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?
#29 William says: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?
#30 Daniel Tewfik says: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.
#31 Andrea Lyons says:This is so great, thank for the info. I have one issue that is driving me madd.
To create the DisplayName.strings file, I tried to use textedit and it adds other extensions to the file. Which, of course, doesn’t work. Any thoughts on how to create the .strings file?
#32 Franck says:Andrea, There is two “steps” to follow.
First, If textedit saves you file with the .rtf extension, make sure you are in “text format”. To do so, go to Format menu and choose Convert to text (or something like that, I am in french, so i don’t know the title for sure). If it says, convert to rich text, then don’t do anything as you are already in plain text mode.
Second. If textedit saves your file in with the .txt extension. simply rename the file in the finder. To make sure it’s properly rename, use the info window (apple + i).
Hope that helps and that I am not answering beside the question.
Franck
#33 Andrea Lyons says:Well, call me baffled. I have followed the steps. Quite a few times actually, in hopes that I was missing something really simple. And I have not been able to change the title under the thumbnail. textedit did alllow me to save as a .strings file. (The change was made under preferences. I checked the plain text radio button and when saving unchecked the box next to “use.txt extension”
The related file is called DisplayName.strings
The file consists of the following copy:
“Display Name” = “Strawberry”;
The file is placed in Library/Application Support/Apple/Mail/Stationery/Apple/Contents/Resources/CGC Strawberry.mailstationery/English.lproj
If you have any thoughts on what I’m missing, I would appreciate your insights. Thanks for your kindness.
Baffled
#34 Franck says:Shouldn’t it be The file is placed in Library/Application Support/Apple/Mail/Stationery/Apple/Contents/Resources/CGC Strawberry.mailstationery/Contents/Ressources/English.lproj
Meaning the the english folder should be in the Ressources folder inside the Contents folder inside the mailstationery bundle ?
If you could share the file one way or the other, i’ll try to have a look at it.
#35 Andrea Lyons says:Franck my email is andrea@cgrantandcompany.com. If you send me your email address and I will send you a link to the file.
#36 Aldo says:Ok i have got the template working but when i apply the template i cant edit or put text in.
Am i missing something or is mail just being typical mail.
Please help
#37 Tony Hart says:Hi Josh,
Great walkthrough. Was hoping to make use of this, but unfortunately the graphic that accompanies the Apple Composite Image section is now missing? Any chance you could re-up it or provide me with something similar?
Would be much appreciative.
All the best
Tony
#38 paul wilshaw says:Hi,
is there anyway of linking the images to an absolute reference (e.g. http://www.weavefm.com/email/images/header.png) so that the email has to download the images from my server rather than emailing the images as attachments?
Thx,
PW
#39 Brian Ross says:This is not the easiest explanation of the process, but it works. NOTE THOUGH: On my system, the plist and other text files opened up in some outliner program that is stuck on the system. DO NOT USE IT! If you do, it will screw up the files completely. Make sure that you manually open, or drag to the app, with TextEdit only.
#40 sathyajeet says:HAI
It’s Great meeting you I want to create my own ID can you please help me.
#41 R0land says:Hey folks…as the header graphic is considered a “background” (check out hte HTML), you’ll need to edit the description.plist and add the header.png as one of the background images. The only current background image in the walkthrough is Content_bg.png. Just highlight the Item 1, press the + button and add in the header.png.
Hope this helps!
#42 Marco Douma says:How and where do change the lineheight after using a linebreak? The lineheight is too high after a
#43 Sean Feeney says:Weird problem - so I created my own mail stationery and it worked great. I was able to successfully send it out. Then I restarted and ever since then I can’t get Mail to use the stationery. I’ve changed nothing, haven’t updated my OS or software. The thumbnail still shows up but when I click on it, it locks up the New Message window. Any ideas? I’ve tried changing the Stationery ID, checking permissions, and copying the package and adding it a second time with a different ID all to no avail.
#44 Luc says:First of all, thanks a lot! This helped me out big time!
@Sean
Yes, I had the same problem, and after ages of trying, i figured out that Mail isn’t able to deal with characters with a ‘ on top, like é é
I don’t know if there is a special tag or something to fix this. I just removed it.
Leave a reply