I’ve long had a small, un-obnoxious HTML and CSS-based email signature in Apple Mail. In OS X Snow Leopard, Lion, Mountain Lion, and Mavericks, you could do that by writing a little code, creating a signature, and then digging into your ~library/ folder to edit the file.
That’s cumbersome, and it actually doesn’t even work on Mavericks.
I found an easier way. It works like this:
- Create your signature using inline HTML and CSS and save as a .html file*
- Open it in Firefox or Chrome (just not Safari!)
- Copy and paste it into Mail’s “create Signature” dialog box.
That’s it!
*If you don’t know HTML or CSS…
If you don’t know HTML or CSS, that’s okay. You can create a signature in Mail by creating a new Mail message. Change fonts, colors, add images, etc. then just copy and paste it into the OS X Mail Signatures dialog.
For convenience, you can even take mine and alter it a bit if you’d like.
<div id="sig" style="min-height: 50px; line-height: 17px; margin: 6px 0; padding: 8px; font-family: 'Avenir Book', 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 11px; color: #606f78; min-width: 530px;"><a href="https://5858da9d-1311-477d-9219-78a6455eed07.s14.conves.io"><img style="float: left; padding: 2px 6px 0 0;" src="https://5858da9d-1311-477d-9219-78a6455eed07.s14.conves.io/images/superpixel-email-logo.png" alt="SuperPixel Logo" /></a><strong style="color: #606f78;">Justin Harter</strong> (317) 395-3875 | <a style="color: #606f78; text-decoration: none; border-bottom: 1px #999999 dotted;" href="http://facebook.com/pages/superpixelco" title="Visit us on Facebook">Facebook</a> | <a style="color: #606f78; text-decoration: none; border-bottom: 1px #999999 dotted;" href="http://twitter.com/superpixelco" title="Follow us on Twitter">Twitter</a></div>
It’s important to note that any images you copy into the Signatures dialog box may not appear. That’s okay, just double-check that they do appear when you create a new message.
And you should also know this doesn’t work with Safari because Safari strips out or doesn’t quite grab onto all the page contents’ code. Just use Firefox or Chrome and hit Cmd+A to grab everything to copy.
Just have to say THANK YOU. I’m working on an older OS (X.5) and have been fighting this email signature thing for an hour with several different tutorials. Just found yours and wow – 5 minutes and I’m done.
Thank you so much for sharing!!!!
This is exactly I was looking for. Thanks Justin! This works great and you don’t have to mess around with overriding Mails preference files.
The essential part is that you have to open the HTML file with Firefox/Chrome INSTEAD of Safari.
I love you man i tried all morning with different guides this is the only one that worked with minimal hassle
True. But copy/pasting doesn’t always work. Depends on the actual signature.
There’s even simpler way, you can use a Signature Manager for the whole process. It just works as an HTML editor that automatically finds the corrects signature paths and makes all the work for you.
Im using this one: http://signaturemanager.eu/ but I’m sure there’s a few others.