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.
Tweet This (6)
Seth on October 31st, 2007 at 5:42 am
Ummm.. .dude? Check the text of your disclaimer.
I think you want to add a “not”.
Matt Chandler on October 31st, 2007 at 5:49 am
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.”
Jim on October 31st, 2007 at 6:33 am
I beat you by a day!
How to create customized OSX Mail Stationery in Leopard
Excellent post though, Josh! Very thorough.
Josh Pigford on October 31st, 2007 at 7:22 am
@Seth and Matt: Doh. Fixed. :)
Avery Z Chipka on October 31st, 2007 at 10:08 am
Any chance you know how to embed a downloadable file like a vcard into the stationary. Direct encoding into the html does not work.
Josh Pigford on October 31st, 2007 at 10:15 am
@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.
Greg on October 31st, 2007 at 10:32 am
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 on October 31st, 2007 at 10:45 am
@Greg: Great tip and something I wasn’t aware of. I’ve updated the post to reflect your tip.
Avery Z Chipka on October 31st, 2007 at 11:08 am
Apple developer documentation for mail stationery can be found online here.
Mosscow on October 31st, 2007 at 1:50 pm
Thanks Josh! I’m stoked to get home and try this…
Take it easy -
The BFG on November 9th, 2007 at 5:21 am
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. :)
The BFG on November 9th, 2007 at 5:31 am
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.
pixie on November 21st, 2007 at 4:41 am
you got a mistake on the code
it’s CONTENTEDITABLE=”true” not CONTENTEDITIABLE=”true”
Cheers and thanks for the info
Michael on November 26th, 2007 at 4:25 am
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
Michael on November 26th, 2007 at 6:41 pm
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
Michael on November 26th, 2007 at 6:42 pm
Sorry bout that bad job of html
Michael on November 26th, 2007 at 7:12 pm
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
John on November 27th, 2007 at 11:23 am
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.
Chuy on November 29th, 2007 at 12:44 am
Does somebody knows how to edit the image of the stationary and change for a different one?
Thanks
Oscar on November 30th, 2007 at 11:06 am
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?
Michael on December 1st, 2007 at 6:39 pm
I use text edit
Greg on December 18th, 2007 at 11:51 am
Help. i downloaded your example file and now all my default apple stationery is gone.
John on December 23rd, 2007 at 10:55 pm
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.
Leon on January 16th, 2008 at 11:24 pm
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
Miguel on February 28th, 2008 at 10:35 am
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
Franck on March 3rd, 2008 at 5:33 am
Hello,
I am trying to download the Walkthrou File but i got a XML error message.
Thanks for the article.
Franck
Sherrie on March 6th, 2008 at 9:33 pm
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?
AJ on March 26th, 2008 at 1:57 pm
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?
William on April 16th, 2008 at 9:18 am
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?
Daniel Tewfik on May 20th, 2008 at 12:56 pm
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.
Andrea Lyons on July 2nd, 2008 at 11:59 pm
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?
Franck on July 3rd, 2008 at 12:45 am
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
Andrea Lyons on July 3rd, 2008 at 8:45 am
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
Franck on July 3rd, 2008 at 11:21 am
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.
Andrea Lyons on July 3rd, 2008 at 11:27 am
Franck my email is andrea@cgrantandcompany.com. If you send me your email address and I will send you a link to the file.
Aldo on July 12th, 2008 at 11:15 am
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
Tony Hart on July 15th, 2008 at 6:38 am
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
paul wilshaw on July 21st, 2008 at 8:42 am
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
Brian Ross on August 21st, 2008 at 11:28 am
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.
sathyajeet on August 27th, 2008 at 12:14 am
HAI
It’s Great meeting you I want to create my own ID can you please help me.
R0land on August 30th, 2008 at 12:44 pm
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!
Marco Douma on September 8th, 2008 at 9:24 am
How and where do change the lineheight after using a linebreak? The lineheight is too high after a
Sean Feeney on September 24th, 2008 at 1:20 am
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.
Luc on December 2nd, 2008 at 7:53 am
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.
Crystal on December 3rd, 2008 at 3:32 pm
hm. Josh lost me on the first step! My mail is not under application support, it’s
library/mail
and when i went to Library/Application Support/Apple
all i found was AirPort!
I guess my mac is just rearranged slightly differently? how come? is it because I have a different version of Leopard?
Then of course I just went to Library/Mail and all i saw were what i thought i’d see: Mailboxes, RSS, IMAP and all my other gmail IMAP boxes, Signatures folder, etc.
I’m sort of stumped as a beginner and it’s hard to do any Html when you don’t know where to find the file to modify!! Help!
Avery Z Chipka on December 3rd, 2008 at 3:36 pm
Crystal it sounds like your looking in ~/Libray not /Libray
The library folder you want is located in the root of the drive not your user folder.
shazia on December 16th, 2008 at 8:43 am
These stationery templates are very useful and important.
Stationery Reviews on February 14th, 2009 at 9:24 am
What a brilliant artice, well thought out, thankyou I appeciate your guidance.
Kate
:-)
Paul on February 17th, 2009 at 12:14 pm
So far I have failed to get a working stationery…
My stationery is so super simple. All I have is a static banner, an image placeholder I want to replace, and some text I want to replace. I deleted the base image and overlay images in the .plist because I didn’t have any of those. Can I leave those references out of the xml?
ken on March 15th, 2009 at 4:12 pm
I use Mozilla’s Thunderbird for HTML email, for my client email newsletter. Not sure why Mail doesn’t … not all small businesses use MS!
JPG on March 23rd, 2009 at 4:33 pm
In Leopard’s new mail.app, Is there a way to use one of the existing templates such as “sand dollar” and edit it, for example to remove the jpeg of the sand dollar, and save it as new stationary?
Linda on March 24th, 2009 at 2:16 pm
Is there any way to create your stationary but use it as a default all the time without having to go thru the “show stationary” step….i.e., I want all of my emails to use a certain font, color and size, but it gets old having to:
1. click on show stationary
and
2. click on the customized one that I use
All the other email programs I’ve used can just save that as the default…any ideas??
Megan on May 17th, 2009 at 7:06 pm
I created my own template using the demons from the Stationery pack like John said. I can’t get it to open in Mail, though. My content.html shows up fine in firefox. I’m thinking I haven’t done the Description.plist right. Can anyone shed some light?
Mr. Reeee on July 21st, 2009 at 11:58 pm
Thanks for the article.
Is there a way that an actual human can make a stationery template? Maybe using Pages or Illustrator or something?
Dennis on July 27th, 2009 at 4:13 am
Big thanks for the article.
For generating the Stationery ID type: “uuidgen” (without the “) in the terminal.
Greetz,
Denniz
Jack C. on August 23rd, 2009 at 6:31 pm
I started using Direct Mail, a bulk mailing client for my email newsletter. Direct Mail you can create HTML email or plain email.
I also use Daylite for management. Daylite works with either Apple Mail or Daylite.
Direct Mail – ethreesoftware.com
Daylite – marketcircle.com
Anisha on September 17th, 2009 at 1:48 pm
once i have created my custom card, I am NOT able to save it with the SAVE AS STATIONARY application–WHY NOT!!!! please help! the icon does not get highlighted and is always grey!
anezka on September 24th, 2009 at 6:40 pm
i’m not exactly an html person so i’m finding this a bit of a challenge. but… i’m wondering how i can make a two-column stationary (something that looks like a blog?). or did you mention it already but i missed that part?
thanks!
Bryce on October 1st, 2009 at 5:43 pm
I can follow the instructions all the way until you open the various .jpgs then I am utterly lost. I am new at this (obviously). How do I open the image so I can insert the xhtml I want to edit it. Any help would be greatly appreciated.
HanZZZen on October 19th, 2009 at 7:22 am
An idea to an OS X application… create or modify a mail template / stationary.
Max Swisher on October 24th, 2009 at 11:43 pm
AHH!! SO MUCH CODING! There NEEDS to be a simpler way…?