Stay on Top of Enterprise Technology Trends
Get updates impacting your industry from our GigaOm Research Community
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.
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.
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:
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 ‘
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
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:
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.
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 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.
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.
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:
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.
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 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.
This bit should contain any images used as backgrounds in any HTML.
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 69x90px thumbnail preview file of your stationery. This is used in the listing of stationery.
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.