Are you are running your Mac on Lion, Mac OS X 10.7? You want to create your own HTML Signature in Apple Mail? You are in the right place. This tutorial is for you! Many people have been having trouble setting up their own HTML signature for Apple Mail on Lion, Mac OS X 10.7 since the Library folder is now hidden making the signature folder hard to find.
If creating your own HTML signature seems a bit too much work or you just don’t have the time for it, please consider having me do it for you. For a small fee, I will design a few different options for you to choose from, write up the HTML codes, host your custom email images and help guide you through the installation process. Visit www.mydesignpad.com/htmlsignature/ to start.
My original post was meant for Apple Mail in Snow Leopard, Mac OS X 10.6. On the latest version, Lion, Mac OS X 10.7, the setup has changed slightly. Just follow the instructions in this tutorial and you will have your own signature created in no time. If you are still running on Mac OS X 10.6, please follow the instructions in my previous tutorial: Creating an attractive HTML Signature in Apple Mail.
Step 1: Designing the HTML/CSS
Before we begin, here are some basic but important notes to keep in mind as you design your signature. One major obstacle in designing HTML e-mail templates is that there are literally dozens of different e-mail clients out there (most if not all canâ€™t handle CSS and HTML as well as our internet browsers can) so you have to keep your design and codes as simple and straightforward as possible.
- Use tables for basic layout. The CSS float property is not supported in Gmail or Outlook, making CSS layouts impractical.
- Use inline CSS. The style tag is not supported in Gmail, and support for CSS selectors is spotty.
- Use only basic CSS properties. E-mail clients tend to be very picky about which CSS properties they support. Campaign Monitor has a great summary of CSS support in e-mail to use for reference.
- Use absolute URLs. Relative paths won’t work for an e-mail signature. So all your links need to be absolute URLs.
- Link to images. I personally dislike e-mail signature images as attachments (it makes it easy to mistaken that image as a legitimate attachment). Because of this, I recommend linking to your images by placing them on a web server rather than including them as attachments.
- Exclude HTML, HEAD, and BODY tags. When we get ready to save your HTML signature into Mail, make sure that only the relevant HTML is included in your document.
For my signature, I used a two-column table. I have my logo on the left and the text on the right. I placed each element inside its own SPAN division to have the text float left without it breaking off to its own line and so that I could use inline CSS to format each element. If you use a DIV instead of a SPAN, each element will start in a new line.
Feel free to use my HTML signature design as a starting point for your own signature creation. Once you have the signature design opened in a browser, you may see the HTML codes by pressing down on Command + Option + U on Safari or Command + U in Firefox. If you use another browser, find “View Source” somewhere under the browser navigation menu. Once you have created your HTML file, give it a name and save it to a directory that you will remember like on the Desktop. We will come back to this file later on.
Step 2: Create a .webarchive File
Once you have created the HTML for your e-mail signature, the next step create a .webarchive file. Open your HTML file in Safari. Go to File > Save As. Make sure Web Archive is chosen as the format. Give a name you can recognize and save it onto your desktop.
Step 3: Create Placeholder Signature in Mail
In Mail, open Preferences and click on the Signatures tab. There you will see 3 columns, the 1st one are your mail box accounts, the 2nd one are your custom signatures and the 3rd column is the signature detail preview. Create a new placeholder signature by clicking on the plus icon at the bottom of the 2nd column and name it. Drag your new signature from column 2 into your preferred mail box in column 1. Select your preferred mail box in the first column and go down to Choose Signature at the bottom. In the drop down menu, find and select your new signature. Note: At this point you will not see your HTML signature design on the 3rd column yet. Leave the 3rd column as is for now. Close window and quit Mail.
Step 4: Open the Signatures Folder
On Finder’s top nav, drop down the Go menu and than hold down the Option key to see the hidden Library folder. Once the Library folder is open, go to: ~/Library/Mail/V2/MailData/Signatures/.
Step 5: Replace the Placeholder File
Find the signature (a file ending with a .webarchive extension) that you just added. If there are multiple files in this folder, switch to list view. The signature that you just added in Mail should be the file that was last modified a few minutes ago. Copy the file name. Rename the .webarchive file on your desktop with the file name that you just copy. Drag the file on your desktop into the Signatures folder. Click Replace when a window pop up asking if you to replace the file.
Step 6: Double Check Installation
Reopen Mail and click on the compose new message icon. Your new custom signature will appear automatically in your compose email window. If not, make sure you have followed Step 3 correctly. Links will not work when you are composing your email. But will work on the receiving end.
Feel free to contact me if you run into any problems creating your very own Apple Mail signature. I’m very interested in seeing all the creative signatures that others are creating so please post your link in the comment area. Cheers!
UPDATE 08-30-2012: Due to the high number of recent requests to create custom email signatures, I created a service section for signature design and development. If you would like me to create a signature for you, please visit www.mydesignpad.com/htmlsignature/ for more info.