Setup HTML Signatures in Apple Mail (Mail.app)

[digicrowd]

At first glance, it may not appear that Apple Mail (otherwise known as Mail.app) supports the use of HTML signature emails. However, with a little terminal and Safari magic, you will be sending HTML signatures.

1. Prepare your HTML signature.

Open TextEdit or your favorite HTML editor and create your signature just how you want it to look. Remember to keep it simple as most mail applications are not HTML and CSS compliant. You can also leave off the html, head and body tags. A simple table or CSS div box will do just fine. For the sake of this HOWTO you will save the file as 'htmlsig.html'.

<div style="display: inline; width: 100%; height: 30px; border-top: 1px dotted #337099; margin: 15px; padding: 10px; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 11px; color: #337099; ">Joe Professional ✭ [e-mail] ✭ Ph 817-555-1212 ✭ Fx 817-555-1213 ✭ AIM: joepro</div>

2. Verify your HTML signature.

Open Safari and verify your signature is how you want it to look. Use the File -> File Open... menu option or simply drag htmlsig.html to your browser window. Make any tweaks to your HTML code to get the look you want. We will not be embedding any graphics or linking to any graphics in this example as embedded graphics come in the form of attachments and can annoy other users, the same with images in HTML. If you choose to use images in your HTML, but sure to use the full URL ([http://example.com/images/htmlsig.jpg) to a site that is publicly accessible.

It may be difficult to view the top border in Safari with the basic code above. While your fine tuning your code, you may wish to add "<p>&nbsp;</p>" above the <div> tag while viewing your HTML in Safari. Remember to remove it prior to the next step.

3. Save your HTML code as a Web Archive.

In Safari while viewing your HTML signature code, File -> Save As... and choose "Web Archive" format. When you click Save, you will want to use the ".webarchive" suffix when prompted. Save it your Desktop for the time being.

4. Open Mail.app and Make a New Signature

Inside Mail.app, create a new signature for the account you wish this to be for, and name it the name you want your new HTML signature to be called. In the text portion of the signature, type "Blue Frog". It will make it easier to find in next step. Go ahead and close the Preferences window for it to save your new signature. Then quit the Mail.app application.

5. Open Terminal (in Applications -> Utilities)

Inside Terminal, you will want to find the signature file created by Mail.app. Once your terminal window is open and at the command line type:

 grep -i "Blue Frog" ~/Library/Mail/Signatures/*

You should get a match with some obscure file name which matches (although not identical to this example) C7424254-ABBC-49BB-82BC-BD6F058B2BE3.webarchive.

Now we just need to replace this file with our htmlsig.webarchive file we created in Step 3. We can do this inside the Terminal window.

 cp ~/Desktop/htmlsig.webarchive ~/Library/Mail/Signatures/C7424254-ABBC-49BB-82BC-BD6F058B2BE3.webarchive 

6. Verify Your new HTML Signature

Launch Mail.app and create a New Message and using the Signature drop down, select your new Signature. It should show up inside your new message just as it did in Safari.