How To: Mac OS X 10.5 Leopard - HTML Mail Templates
Posted on onsdag, mars 04, 2009 @ 00:13:28 by david
Create your own HTML Templates for Mac Mail. A How To for creating an HTML Mail Template in Leopard.
OS X Mail Signature vs OS X Mail Stationary
A text-based signature is great for most people, ok 90%, but I was looking at the new stationary of Mac OS X 10.5 Leopard and got some cool ideas.
I wanted to create an HTML file that looks similar to our current website, and use it as Stationary in Mail.
Step 1. Create your HTML template file
SInce I am a webdesigner this task was fairly easy. Besides the fact that our website is already done, I just used the materials that were already there. The logo and background images are all identical to the website and are linked accordingly.
I used Taco HTML Editor for this, free and works great.
Read more about my 5 tips to creating fool proof HTML Email Templates.
Step 2. How to get the HTML template to be Mail Stationary template
First I needed to find out where the Mail Stationary files are on my system, and then try to implement my HTML code.
So I looked online at apple.com/support under Mail...
Nothing. Absolutely no help what so ever.
So I looked in the Apple Mail Application Help on my machine :)
Yes it gave me a good start, but did not offer an article about how to do this.
I did end up finding the standard stationary templates here:
Macintosh HD > Library > Application Support > Apple > Mail > Stationery > Apple > Contents > Resources
But after taking a reading the Help file, I found there was an easier way to get this done.
I found out that I first needed to Save a new message as a template... then I could find it and edit it using Taco HTML Editor.
Step 3. Creating a Custom Stationary File
First you need to create a New Message.
Then add some text inside the message and Save As Template.
Give the new Template a name
Now it shows up under the "Custom" category with all the rest of the Stationary templates.
Step 4. Customizing the new Stationary template
I looked around on my hard drive for the files in the usual places.
The Stationary template files reside here:
Users > {your account name} > Library > Application Support > Mail > Stationery > Apple > Contents > Resources > Custom > Contents > Resources
My Stationary template was called WOW webdesign.mailstationery
So the next step was finding out how to edit this file.
I did a right-click on the file and it comes up "Open with Mail (default)"... well that doesn't help.
So instead I chose to Open with Taco HTML editor. BAAAM!
Opens up perfectly inside of Taco, with preview buttons and the works!!
I worked on moving over the HTML that I created into this template and kept some of the code that was already there. This whole mess is where the content goes:
<!-- START CONTENT SECTION -->
<span contenteditable="true" apple-content-name="body" style="display: block; ">
<div>
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Futura; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; ">
<div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">
body text here
</div>
</span><br class="Apple-interchange-newline">
</div>
</span>
<!-- END CONTENT SECTION -->
So after working and testing the new template and it was complete, I tested a few times to see how it looks with Mail.app.
The only thing missing is the preview image, otherwise it works PERFECT.
Step 5: Adding a Preview image to the Mail Stationary Template
First create a .png thumbnail (69px width and height 90 px) and add it to the directory:
.mailstationary > Contents > Resources
Next find the Description.plist file and add the follow two lines:
<key>Thumbnail Image</key>
<string>thumbnail.png</string>
DONE!
As you can see, the final product. Thumbnail image and all.
