74 Comments

Summary:

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. […]

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.

You’re subscribed! If you like, you can update your settings

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

    I think you want to add a “not”.

  2. 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. I beat you by a day!
    How to create customized OSX Mail Stationery in Leopard
    Excellent post though, Josh! Very thorough.

  4. Hawk Wings » Blog Archive » How to edit Leopard Mail’s Stationery Wednesday, October 31, 2007

    [...] you are a lover of this kind of thing, Josh Pigford at The Apple Blog has a long and detailed post on how to edit or create your own stationery for use with Leopard [...]

  5. @Seth and Matt: Doh. Fixed. :)

  6. Morning Links – Customize Leopard Dock and Mail Stationary Wednesday, October 31, 2007

    [...] see much point it in myself) you can create your own templates by following the instructions on The Apple Blog. Maybe if there were some cool stationary templates out there, I might like it better….so go [...]

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

  8. @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.

  9. 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.

  10. @Greg: Great tip and something I wasn’t aware of. I’ve updated the post to reflect your tip.

Comments have been disabled for this post