Create a HTML Email Signature for Mac OS X Mountain Lion 10.8

Apple Mac OS X Mountain Lion 10.8 is now available. Once again, Apple updated Mail.app with some changes. If you want to create a custom HTML email signature for Mail on Mountain Lion, the HTML coding part remains the same but the installation have changed. Follow this tutorial to create a HTML email signature file and to get it installed into the new version of Mail on Mountain Lion OS X 10.8.

For Mac OS X 10.7 users, please follow my previous tutorial: Create a HTML Signature in Apple Mail on Lion OS X 10.7.

Step 1: Designing the HTML/CSS

mail-signature-sample-lion

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 straight forward 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.

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. You can view my HTML design here and feel free to use it as a starting point for your own email signature.

For STEP 4, you will need to paste the HTML code of your email signature design. If you used MYDESIGNPAD’s Email Signature Service, read below to reveal the HTML code from the HTML file that was emailed to you.

How to reveal and copy HTML code in Safari
Open your HTML email signature file with Safari.
Go to Safari/Preferences.
On the “Advanced” tab, check “Show Develop menu in menu bar.”
On Safari’s menu bar, go to Develop/View Page Source to reveal HTML code
Select all of the HTML code and copy.

Safari Preferences

Safari Preferences-Advanced

Safari Show Page Source

Safari HTML code

Step 2: Create Placeholder Signature in Mail

In Mail.app, 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.app.

Step 3: 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 4: Update Placeholder Signature

Find the signature that you just added (a file ending with a .mailsignature extension). If there are multiple files in the folder, switch to list view. The signature that you just added in Mail.app should be the file that with the most recent modified date. When you have located the .mailsignature file, open it with TextEdit. You may see some metadata info on top and some HTML code below it. Delete all the HTML code (highlighted in picture below) and leave the metadata info untouched.

Under the metadata info, paste the HTML code of your email signature (Read bottom of Step 1 for instructions on how to reveal and copy the HTML code of your email signature design with Safari). Hit Save and quit TextEdit.

Step 5: Lock Updated Signature File – Important Step!

This step must be followed correctly in order for this signature to work or else Mail.app will use the original version of the signature instead of the new one. Locate the .mailsignature file that you just updated in Finder again. Press Command+I or right click on file to Get Info. In the Get Info window, mark the Locked check box.

***Another way to lock the file is by clicking on the gray text to the right of the file name on the header of TextEdit. A drop-down menu will pop up giving you the option to lock file. (See 2nd image in Step 4)***

Step 6: Check Installation

Testing out new email signature

Restart Mail.app. Your new custom signature should appear automatically when you click on Compose Mail. If not, make sure you have followed Step 2 correctly. Links will not work and the images if any may not show when composing an email. But the links will work and the images will show on the receiving end if the source locations are correct. Compose and send yourself a test email with your new signature selected. If the images show, the links working and everything looks as it should, then you have done this correctly. Good Job!

Summing Up

Feel free to contact me if you run into any problems creating your very own Apple Mail signature. I’ll be pleased to see your creative HTML email signature so please post your link in the comment area. Cheers!

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. Contact me for more info.

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.

Follow responses through the RSS 2.0 feed | July 28th, 2012 | 355,110 views

166 comments »

  1. July 30th, 2012

    Worked like a charm! Thank you.

    Milan

  2. August 2nd, 2012

    Thanks for the tutorial, it come in handy :-)

  3. August 2nd, 2012

    wes says:

    it worked but i made an background color and a top and bottom line, these were the onley things dat din’t showed in mail, any suggestions ? thanx

  4. August 2nd, 2012

    Tim Cai says:

    You may create background color and borders by writing this style code within your specific tags: style=”border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color:#00000″ Hope this will help.

  5. August 13th, 2012

    Great tutorial! One question I have is about sizing for the iPhone. I noticed that after I followed your tutorial any email I sent from Mail and viewed in my iPhone 4S was too wide for the iPhone screen, causing me to scroll horizontally.

    I tried changing the table width to 100% but it messed up the formatting. Is there anyway to get it to scale down to fit the iPhone screen?

  6. August 13th, 2012

    Tim Cai says:

    Anthony, as of now, there isn’t a way around that problem. The best thing to do is to have that in mind. If you going to have emails viewed on mobile devices often, keep the width of the signature design slim at about 400px or less than it would fix nicely when viewed on the iPhone 4S screen.

  7. August 14th, 2012

    Excellent, thanks very much, it worked perfectly for me also.

  8. August 14th, 2012

    This was perfect. Mail was driving me crazy. Deleting links, expanding the href. I now have a great looking email signature I can be proud of. Nice job.

  9. August 14th, 2012

    Tim Cai says:

    That is perfect!

  10. August 15th, 2012

    Preyen says:

    great, works perfectly!

  11. August 15th, 2012

    duwanty says:

    Thank you so much, you are a rockstar! I used your old directions recently and it didn;t want to work, so glad I got this post form you. Thank thanks thanks.

  12. August 17th, 2012

    Thanks a million for this great tutorial. You would make an excellent technical writer!

  13. August 23rd, 2012

    Mudbug says:

    Cheers, Tim! This is great stuff.

  14. August 23rd, 2012

    daniel says:

    Thanks!! This really works!

    Some suggestion for this signature is not consider an spam?

  15. August 25th, 2012

    Steve says:

    Thanks for a great tutorial. I’ve created a signature I’m happy with which include two images that I’ve linked to as suggested. This works in all mail programs and webmail interfaces I’ve tried with one notable exception – Outlook. In outlook, you have to choose to download the images which isn’t what I want for a signature. Is there any way around this?

  16. August 27th, 2012

    Hadia says:

    Y-O-U-A-R-E-T-H-E-B-E-S-T
    Three months (I’m not kidding) of hassle and research for the solution went just like this
    Thank you ever so much!!!

  17. August 27th, 2012

    Tim Cai says:

    Hadia, I am glad you found my tutorial post on this. Seems like your hard work paid off. I am very glad that my post was so helpful to you! Cheers!

  18. August 28th, 2012

    Marco says:

    You’re the best! It’s has been working for almost the whole of company. Though, I found that in mountain lion sometimes the new created .mailsignature document doesn’t show in the signature map. Do you have any suggestions?

  19. August 28th, 2012

    Tim Cai says:

    Good Job! You have to make sure you follow step 4 and 5 correctly. Especially the part on having the file locked after you update it with your own code. If what you mean is that you cannot see your newly created .mailsignature file in the signature folder, I would suggest that you go into mail and create a new signature again.

  20. August 28th, 2012

    Tim Cai says:

    Dear All, thank you for reading my tutorial and I am very happy for those that found this tutorial helpful. I have create a Custom Signature service section on my website for those who would like me to create a signature for them. Please check it out! http://mydesignpad.com/htmlsignature/

  21. September 4th, 2012

    Great tutorial!

    Any thoughts on whether or not there may be away to avoid locking the mailsignature file? It prevents users from editing the signature from within mail preferences. Seems as soon as you quit apple mail all changes are lost.

  22. September 4th, 2012

    Tim Cai says:

    Yes, your problem can be resolved by making sure you do Step 5 in this tutorial.

  23. September 7th, 2012

    AppFreak says:

    Thanks for this useful guide. I recently upgraded to Mountain Lion from Snow Leopard and it was a real pain to get this working. The “lock” step does the trick

  24. September 11th, 2012

    Mark says:

    Quick question; can you make an email signature which is client-aware? That’s to say a signature which appears one way when viewed on a regular screen, but another (and ideally smaller, simpler) way when viewed on a mobile device. My reason for asking is that I’m fed up with wide signatures making messages unreadable on my iPhone because the text wraps to the length of the image and is now 0.02pt in size.

  25. September 17th, 2012

    Thanks. I really appreciate it.

  26. September 19th, 2012

    Randy says:

    Great tutorial! I’ve been using a custom CSS signature in Mac Mail for years. Recently, I wanted to update my signature and discovered that the old way of creating and updating my signature no longer worked with Mountain Lion. Your tutorial perfectly outlined what I was missing. I wanted to add that with the most current update, you simply click the title bar while in TextEdit and you can LOCK the file from there. Super easy and saves a few steps! Thanks!

  27. September 22nd, 2012

    Gail says:

    No way could I have worked this out by myself.
    This is excellent.
    Much appreciation, thank you

  28. September 25th, 2012

    Abi Kornet says:

    Tim,
    I knew how to do this with Snow Leopard and Lion (thanks to your past posts) but when my colleague presented me with Mountain Lion, I immediately came back to your site. And I was able to do all of this via a remote program as my colleague is on his laptop in South Africa! Had him download TextWrangler and I was good to go! Thank you again for your step-by-step guidance – I’ve learned more about this stuff than I ever thought I would!

  29. October 19th, 2012

    Clark says:

    Hi

    I have followed your steps and was very happy – cheers. Can you help solve this issue…?

    I have multiple macs, which are sharing an iCloud account.

    Each mac is using a unique email address to that person (not iCloud email different provider)

    Anyway signature was Woking fine on my mac. I then change the signature in mac two. When I returned to mac one signature was gone.

    Is this linked? Have you come across this problem?

    Thanks
    C

  30. October 19th, 2012

    HI THERE,

    THANK YOU SO MUCH FOR YOUR TUTORIAL. I HAVE FOLLOWED ALL YOUR STEPS, BUT MY HTML SIGNATURE STILL DOES NOT SHOW UP PROPERLY. THE LOGO AND LINKS ARE MISSING AND THERE ARE PLACEHOLDERS INSTEAD. PLEASE HELP!

    /Users/YashikaLaptop/Desktop/Avighna Brand Assets/_Digital/Email signature/Code/YashikaSaraogi.html

  31. October 19th, 2012

    PS: The placeholders have the links on them but the image is not showing..

  32. October 19th, 2012

    Tim Cai says:

    You must have your images hosted on a web server or with a free service like Dropbox.com. Make sure you have written your links as codes correctly. If that is done correctly, the images will load and the links will work on the recipient’s mailbox. It is normal if your images are not showing up and the links not working in the Signature Settings window.

  33. October 19th, 2012

    Tim Cai says:

    Clark, the html signatures must be installed independently on Apple Mail on each computer.

  34. October 20th, 2012

    Clark says:

    I know I did that – that’s why I’m confused. Will try again

  35. October 22nd, 2012

    clark says:

    Seems others are having this problem too https://discussions.apple.com/thread/4209386?start=0&tstart=0

  36. October 22nd, 2012

    Tim Cai says:

    Clark, I have responded to the apple discussion. This is what I wrote there as well.

    I’m just trying to help here. So let me get the senerio correct. You have signature 1 and signature 2 installed in computer A. In computer B, you also have signature 1 and signature 2 installed as well. Is this correct?

    Before assuming that this is an iCloud syncing problem which I hope not, please check this:

    1. Assuming that you have already installed signature 1 and signature 2 and it is working fine on computer A, make sure you have signature 1 selected in the “Choose signature” drop-down menu (located at the bottom) in Mail>Preferences>Signatures for your corresponding Mail account. The same goes for signature 2. After this is done, when you open a new compose message window, your HTML signature will pop up near the bottom of your window.

    2. When installing your HTML signature into Mail, you have to ensure that the .mailsignature file is locked after you edit it with your HTML codes. For more details on this, please view my tutorial. Hope this helps, let me know how it goes.

  37. October 22nd, 2012

    Chris says:

    Thanks for your post. It worked great, until I came back to work the next morning and the signature just disappeared. The file still exists (and it is still locked) but the signature in Mail just doesn’t exist anymore. Am I missing something? Thanks.

  38. October 22nd, 2012

    Tim Cai says:

    Chris, did you make sure you have your signature selected in the “Choose signature” drop-down menu (located at the bottom) in Mail>Preferences>Signatures for your corresponding Mail account? Review Step 2 in my tutorial. Let me know if that fixed the problem. Good luck!

  39. October 22nd, 2012

    Tim Cai says:

    Clark, Another thing to try: Go to Mail Preferences > Accounts > Account Information and uncheck “Enable this Account”. Exit the preference dialog so it saves the changes and quit Mail. Restart Mail and go back to Mail Preferences > Accounts > Account Information and check “Enable this Account.” Do this for each account whose signature is broken.

  40. October 29th, 2012

    Andrew says:

    Hi Tim,
    Thanks a million for this – great tutorial, even I understood it!

  41. November 10th, 2012

    Marianne says:

    Hi Tim,

    Big thanks for this tutorial! All the best!

  42. November 15th, 2012

    Tommy says:

    Hey Tim, I created an email address with a logo, but the logo will not show up when sending or receiving an email. Any thoughts?

  43. November 15th, 2012

    Tim Cai says:

    Tommy, I assume that you have not written your html codes correctly or that you aren’t linking your images to the right place. For more info on how to do it correctly, go here: http://mydesignpad.com/htmlsignature-installation-help/

  44. November 21st, 2012

    Hi Tim, I really enjoy your site and this tutorial; however, I noticed that you’re referencing to only Mail’s folder and signature which is causing the problem that requires the lock workaround. Another site I stumbled across fixes this problem for those who are syncing with iCloud, and you do not need to lock the file.

    The reason it is being overwritten is because the iCloud version does not get changed when you make your changes to that file, and so the changes don’t get pouched to iCloud.

    The iCloud version is located in “~/Library/Mobile Documents/com~apple~mail/Data/MailData/Signatures/”
    Make your changes there instead, and don’t lock the file.

    You can find the original problem solved here on this website and thanks to user gilliginsisland for originally solving it.

  45. November 21st, 2012

    Tim Cai says:

    Jonny, this is great info. Thanks a lot for contributing! Really appreciate it! I will add this information into the post soon.

  46. November 27th, 2012

    Gonzofan says:

    I found the signatures and locked them. We’ll see what happens – they just keep disappearing, but I agree that I think it’s got something to do with synched files since I noticed the signatures in there were the ones I created on my home computer. Alternatively, I should stop deleting signatures when I recreate them. Because I think the ones I’m deleting are the ones on the OTHER computers…I have two computers and a laptop that I use with the same email accounts.

  47. December 2nd, 2012

    Alex says:

    Thank you! Didn’t work first time, worked 2nd time a treat :)

  48. December 4th, 2012

    Thanks a lot! Worked perfectly and saved me a lot of time, especially the famous ‘step 5′
    Best regards and thanks again,
    Q.

  49. December 14th, 2012

    Shae says:

    Hi there! I’ve created my html signature, and up to step 4. However, once I’ve made a blank placeholder signature in mail.app I am finding it is not appearing in the Finder file. All that is appearing that is new is a .webarchive file and not a .mailsignature file. Any tips?

    Thank you!

  50. December 18th, 2012

    Einstein says:

    THANK YOU SO MUCH!!!! Wonderful instructions! I could not of figured this out on my own. You are much Smarter than I!

  51. December 18th, 2012

    Tim Cai says:

    Shae, if you find a .webarchive file instead of a .mailsignature file, I assume you are using Mac OS X 10.7. If that is the case, please follow the tutorial for Mac OS X 10.7. Here is the Installation Help Link.

  52. December 19th, 2012

    Morten says:

    Awesome tutorial. I’ve been struggling with Mail for ages trying to make an acceptable signature. Your tutorial just totally cured all my headaches.

    At first I couldn’t make it work and almost gave up until I switched my mailformat to Rich text – then it all worked. So maybe you should mention this in the tutorial?

    Anyway – Thanks for everything. Now i’ll start sending out my christmas mails :-)

    Merry Christmas and a Happy New Year to you all!

  53. December 20th, 2012

    Josias says:

    Amazing !!! Thanks

  54. January 7th, 2013

    James says:

    Hi Tim,

    When I open the mail .signature.webarchive file (which has my signature image) in Safari to view the html code it wont load the code?? I have ticked view develop. When I press command/option/U it gives me a loading wheel but never loads. Other pages will load the source code.

    Help!

    Also, It was working earlier today and I cut and pasted the html code into a word sheet. I wasnt sure how much of the code I need to paste into the applemail file, because when I pasted all of it in, when I opened mail, it showed the signature perfectly but the images didnt load.

  55. January 10th, 2013

    Julio says:

    I’m working following your instructions, but when I open the “XXXXXXXXX.mailsignature” archive this is what I got:
    P.S.: I`m using TextMate to do this.

    { WebMainResource = {
    WebResourceData = ;
    WebResourceFrameName = “”;
    WebResourceMIMEType = “text/html”;
    WebResourceTextEncodingName = “UTF-8″;
    WebResourceURL = “data:”;
    };
    }

    Someone could PLEASE help me to do this? Or my boss will be really mad with me :/

  56. January 16th, 2013

    MA says:

    It works !!
    Thanks so much.

  57. January 17th, 2013

    Jay says:

    I can’t seem to get this to work and I believe I’ve followed everything correctly. I’m on OSX 10.8.2. ANyone having problems with same OSX?

  58. January 21st, 2013

    Concerned about scaling on iPhone:
    You can try this one?

  59. January 25th, 2013

    Lucie says:

    how to link to your images by placing them on a web server

  60. January 30th, 2013

    Gustav says:

    Hi Tim,
    great tutorial. I’ve followed your guide, but I have the followoing problem. The images are hosted on o public server, have receivers of my mails which are not allowing download of images, cannot see the images in the signature. How can I sent/create a signature in which the images are sent as attached files? Can I mail you my signatures maybe ?
    BR, Gustav

  61. February 1st, 2013

    Steve Howe says:

    Hello, using Kompozer to do this. Everything works but no image in preferences, composing an email or reading a sent email. Code below. Thanks Much!

    Steve Sign 1

    Steve Howe • President
    Office: 800.969.4693 (HOWE)
    Direct/Mobile: 513.515.3430

  62. February 8th, 2013

    Jim C says:

    That’s fine for those who allow remote images in their emails; not a good habit, you are automatically confirming your address is good AND that you will open practically any message sent to you! One must also accept/compose the message in html enabled. Again, a poor choice for security reasons, especially for Windows users.

    Email is not made for html/styles/fluff. ;-)

  63. February 10th, 2013

    Al says:

    Clear and excellent walk-through of a mystery subject.
    Most grateful for your help to all of us…

  64. February 14th, 2013

    cutdam says:

    Works perfect! Many thanks

  65. February 28th, 2013

    Tim Cai says:

    If your signature keeps on disappearing, it may have something to do with iCloud settings. You may try doing the following:

    1. Close Mail
    2. Go to System Preferences > iCloud
    3. Uncheck Mail checkbox
    4. Recheck Mail checkbox
    5. Restart Mail

    Make sure the file “AllSignatures.plist” in ~/Library/Mail/V2/MailData/Signatures/ has a new modify date.

  66. March 7th, 2013

    Thanks for your tutorial. I am new to html. I am tying to support IT stuff. Is there anyway to host the logos on the local client. I do not yet have a web server I could use.
    Thanks
    Ed

  67. March 7th, 2013

    Tim Cai says:

    Ed, you need the images hosted on a web server so the reader of the email can load the remote images off the web server. If it is on a local machine, there is no way for the reader to connect.

  68. March 20th, 2013

    Tim Cai says:

    Recently while trying to help a customer set up her email signature, the signature wouldn’t stick even though we have followed all the instructions to the T. After some research, the problem seems to be a conflict with mail and iCloud. If you have having the same problem where your email signature disappears after installation, please try the following:

    1. Close Mail
    2. Go to System Preferences > iCloud
    3. Uncheck Mail checkbox
    4. Recheck Mail checkbox
    5. Restart Mail
    Make sure the file AllSignatures.plist in ~/Library/Mail/V2/MailData/Signatures/ has got a new modify date.

    Hope this will also resolve your problem as well.

  69. April 9th, 2013

    Great tips! It works perfectly for me. Much appreciated!

  70. April 11th, 2013

    Paul says:

    I dont have a XXXXXXX.mailsignature file! I only have
    XXXXXXXX.webarchive files?!? Help pleeeez …

  71. April 11th, 2013

    Spoot says:

    Thanks a Lot, with the comment and the tuto, i understand more than i excepted… THANKS.

  72. April 11th, 2013

    Tim Cai says:

    Paul, if you only have .webarchive files, that means you are probably on an earlier Mac OS. Try reading this tutorial instead. http://mydesignpad.com/create-a-html-signature-in-apple-mail-on-lion-os-x-10-7/

  73. April 16th, 2013

    Richard says:

    Thanks a lot. Great tutorial – saved my day.

  74. April 18th, 2013

    Roger says:

    Thank you Tim, very insightful. Indeed a creative problem solved !
    : )

  75. April 19th, 2013

    Anne says:

    Best Apple Mail HTML Signature tutorial EVER! Thank You!!!
    All other tutorials tell you to save your html file as a .webarchive file and drag it to the Signatures folder to over-right the .webarchive file created in the mail signature preferences. Trouble is my Signatures folder never had .webarchive files – only .mailsignature files. I tried LOTS of tutorials unsuccessfully until I found this one. It was much easier and worked perfectly!
    THANK YOU!!!

  76. April 23rd, 2013

    Garry says:

    The tutorial procedures work wonderfully. Scaling the logo so that it appears in html in the right proportions was a bit tricky … probably more my lack of experience than anything else. However, when I use the signature in mail, the logo shows up as a box with a ? in the middle of it. Am I using the wrong format? I have ai, jpeg, pdf and png. I have tried them all. Suggestions?

  77. April 23rd, 2013

    Tim Cai says:

    Garry, jpeg, gif and png are all the image formats that will work with your signature. Please ensure that your image is hosted on a server and that the image link path is correct. When viewing your signature in your Preference panel, it will show up with a question mark in place of your image. When you compose a new message, your image should should up correctly on your message window.

  78. April 25th, 2013

    Angel says:

    Many thanks Tim for your wonderful tutorial. Easy enough to follow for a novice, has helped me a lot!!

  79. April 29th, 2013

    […] How to create a html email signature for Mac OS X Mountain Lion […]

  80. May 1st, 2013

    Thanks heaps for the tips!! Very helpful:)

  81. May 2nd, 2013

    Cojak says:

    You saved my day!
    Thanks Filip

  82. May 2nd, 2013

    Dan says:

    Great tutorial, worked great the first time around, but then when I went to repeat the process suddenly I cant write to that folder, any clues?

  83. May 3rd, 2013

    Hello! I made this email signature a few months ago and it’s worked like a charm for our company. However, one of our employees has noticed that every so often, when she replies to a string of emails, the signature loses it’s HTML structure and the image disappears with the rest of the formatting being off. We’ll then try to place the signature again but the format is still lost and the same. It only happens every once and awhile, but it does happen. Any thoughts on why it could be doing this?

  84. May 5th, 2013

    Kylie says:

    Hiya,
    I’m having an odd problem with this…I follow all of the instructions, but I end up with only the text content of my signature with no images or links, all in the original base font the original signature was created in. At first I thought it was because I skipped the locking file step, but then I tried again (locking it) but got the same result.
    I’ve used your other tutorials with no issue, but this time it’s on a new iMac running Mountain Lion and I’m getting no love at all.
    Any ideas??
    Cheers & thanks,
    Kylie

  85. May 6th, 2013

    Bernd says:

    Thank you very much!
    For the very stupid people like me you could add the hint, that e-mails must not be formatteted as plain text but as formatted text ;-)
    After I had found the problem, everything worked well.
    Cool!

  86. May 7th, 2013

    PERFECT SOLUTION!! Thanks so much!

  87. May 8th, 2013

    Les says:

    Totally awesome! Thanks!

  88. May 13th, 2013

    Phillipa says:

    Hi there, I am using Outlook for Mac 14.10. I follow all your instructions, but every time I cmd V the html signature into Outlook it looses all the links, and becomes a static visual.

    What could be the issue?
    Thanks

  89. May 16th, 2013

    Tim Cai says:

    If you are using Outlook on a Mac, please following this tutorial instead: http://mydesignpad.com/how-to-create-html-email-signatures-for-microsoft-outlook-2011-on-mac/

  90. June 7th, 2013

    kameruchi says:

    Thanks for sharing!! :) It was very useful!

  91. June 17th, 2013

    David says:

    Why can’t I create just a symbolic link to a xxx.signature file on e.g. dropbox dir? What xattr does this file has?

  92. June 17th, 2013

    […] Create a HTML Email Signature for Mac OS X Mountain Lion 10.8 […]

  93. June 29th, 2013

    Ian says:

    Software developers, including Apple, seem to love making our lives more difficult. Having just bought a MacBook Pro running Mountain Lion, the change is approach for Mail signatures (.webarchive moving to .mailsignature) completely threw me and although I’ve been using Macs for many years I do not ‘code’. (previous html signatures were created by a web designer friend, and it used to be a simple job to overwrite .webarchive files).

    This article saved me what I imagine would have been hours of wasted time and frustration. Huge thanks – VERY much appreciated.

  94. July 1st, 2013

    Thanks Tim. Very hepful.

  95. July 1st, 2013

    Tim Cai says:

    Happy to hear that you found this post useful!

  96. July 9th, 2013

    jules says:

    I have a major problem, once I navigate into the signature folder, despite having several signature files set, i have no .mailsignature extension files at all.
    There are .webarchive files and a.plist but nothing else. I even tried using revealer to make sure it wasn’t a hidden file type.
    Any suggestions please?

  97. July 9th, 2013

    Tim Cai says:

    Jules, have you created a new placeholder signature in the signature preference panel in Mail? You need to do that first.

  98. July 9th, 2013

    Jimmy says:

    Excellent tut, thanks :) Is it possible to use @font-face?

  99. July 9th, 2013

    Tim Cai says:

    Jimmy, can you explain what you mean by font-face? Not familiar with that.

  100. July 12th, 2013

    Thank you. You are a life saver. And your instructions are super clear!!

  101. July 15th, 2013

    Chase says:

    Thanks so much for the tutorial, very helpful!

    Just one some question… when viewing my email signature on a mobile device, sometimes it will cause it to reformat and look horrible (lines get cut off and then go onto two lines). How can I fix this? I tried to use fixed width columns but can’t get it to seem to stay. I am using Kompozer to do the HTML.

    Thanks!

  102. July 23rd, 2013

    charlie says:

    hi, thanx a lot for the instructions, it works well. but i have a request: i am using a gif, which i’m hosting on my dropbox, linking to my website. how can i design the email to make sure that the signature is always on the bottom of the mail, but before the quoted text, adjusting its position with the size of the new mail window, in stead of sticking somewhere in the middle like this? https://dl.dropboxusercontent.com/u/51308960/Screen%20Shot%202013-07-24%20at%2012.25.42%20AM.png
    i tried adding or at the end of the html, but it seems not to work… anyway, here’s the code i’m using, could it be something wrong in the syntax, since i’m not very experienced?

    thank you very much again
    charlie

  103. July 23rd, 2013

    charlie says:

    sorry, i noticed that the html i pasted isn’t working… i told you i’m not very experienced :) here’s a sceenshot of it https://dl.dropboxusercontent.com/u/51308960/Screen%20Shot%202013-07-24%20at%2012.45.35%20AM.png

  104. July 25th, 2013

    Chase says:

    FOR MOBILE DEVICES… I had posted a week or so ago about formatting issues with mobile devices, sometimes it would cut off a line and move it to the next, making my signature look terrible.

    Easy fix… I was using two columns, a logo in the left, and words in the right. I set the width to what I wanted on the left, then, this is important, make sure the column on the right has some extra space to the right for any iPhone text modification. My issues was that on mobile devices, the phone switched the text, making it slightly bigger I guess, so it no longer fit in my table. So, make the table bigger.

    Hope that helps someone.

  105. August 8th, 2013

    Dean Smith says:

    Hi,

    Thanks for the tutorial, helpful but unfortunately I need further help & hoping you’re able to? I had a HTML sig that I used on a PC, then bought a Macbook Pro, and the guy that looks after my company’s e-mail said it the same sig should work on the mac as long as I change the file paths, which I have done, and then followed your steps, but the images still don’t load. So I know it’s a file path problem, but being new to a mac I’m not sure what the errors are. Maybe I could send you the file to look at? Thanks, Dean

  106. August 13th, 2013

    Worked Perfectly – Small trap in not locking file!!

  107. August 21st, 2013

    Peri says:

    Legend – thanks for taking the time to write this tutorial and for doing so succinctly for those of us that aren’t quite so clever! Very much appreciated! Peri

  108. August 23rd, 2013

    selim says:

    everything worked perfect except pics in the signature do not show up also when I send a test message to me. Further were the pics are it is written missing plugin and the small social icons do show with Pdes Pdes…the signature is however correct in html here: http://www.selimtolga.ch/email-signature.html
    THANKS!

  109. August 23rd, 2013

    Tim Cai says:

    Hi Selim, you need to write the full directory link to your images for it to work.

  110. August 23rd, 2013

    selim says:

    you made my day, THANK YOU!

  111. August 28th, 2013

    gabriel says:

    Thank you! Excellent tutorial.

  112. August 29th, 2013

    Dennis says:

    Hello in the version 10.9 Mavericks it doesen´t work :-( Some News ?

  113. August 29th, 2013

    Tim Cai says:

    Dennis, the consumer version of 10.9 is not out yet.

  114. August 30th, 2013

    JHH says:

    Incredibly helpful tutorial. Works like a charm so far.

    Any info on how to add any of the various social media links (mostly concerned with facebook & linked-in) logos so that they link to the right places at each of those sites?

  115. September 4th, 2013

    Luke says:

    So cool! Thank you so much!

  116. September 11th, 2013

    Margo says:

    YES :D

  117. September 11th, 2013

    JP in DC says:

    The entire experience of dealing with Tim Cai was very efficient and quick. The entire process took less than 48 hours. I am very, very satisfied with the work produced by Mr. Cai.

    As our company expands, I plan to solicit this business in the future for other projects and I will enthusiastically recommend this service to others.

    This is a great business-to-business resource.

    Mr. Cai, thank you for your excellent service.

  118. September 21st, 2013

    Rich says:

    Thanks Tim, worked a treat!

  119. September 22nd, 2013

    steven says:

    Works really perfect, thank you very much. It really save my mail client.

  120. September 23rd, 2013

    I am using Mail 6.6
    All it takes to create an HTML email signature is to:
    1. Create signature in OpenOffice or any other HTML editing tools
    2. Save as .html
    3. Open the html file in Chrome
    4. Copy the content to clipboard
    5. Go to ‘Add signature’ screen of Mail and paste the contents there
    It worked for me without any complications.
    All I had to do was to add a few empty lines above the first line of the signature, just to get the spacing look nice.

  121. September 23rd, 2013

    Tim Cai says:

    Dear Joshy, Thanks for the tip. Your directions doesn’t always work as your computer will place in a lot of additional codes that isn’t needed and the layout may look messed up at your recipients’ inbox. If you have a complex layout, it will not stick. Please correct me as I am wrong. =)

  122. September 25th, 2013

    Ros says:

    Great advice – worked really well and was easy to follow. Thanks Tim!

  123. September 25th, 2013

    Claudio says:

    WOrks great, but when I sent myslef an email to Yahoo it did not display as it did in Mac Mail. Any ideas why? Please help!!

  124. September 26th, 2013

    Simona says:

    Very good advice! it worked just perfect ;-) Thank you!

  125. September 27th, 2013

    Tim Cai says:

    The html email signature should display fine in Yahoo mail. Have you check your Yahoo mail settings to ensure that you are allowing remote images to display?

  126. October 17th, 2013

    Nicola says:

    Thank you so much! This is an awesome tutorial and I love how you let view your signature html to get us started. I have shared with all my networks :)

  127. October 18th, 2013

    Lou says:

    Directions work just as expected. Unfortunately Mail 6.6 seems to treat the HTML signature oddly on replies. The quoted text begins directly next to my signature, almost as if it’s a table.

  128. October 23rd, 2013

    Yukio says:

    I’d like to add my voice to the numerous others in thanking you for this awesome tutorial! This has worked perfectly for me and looks a lot better than the image-attached signature I previously used.

    My only problem is that the signature displays a little differently in Hotmail/Outlook’s web client. The spacing is much more dramatic than how it looks in my web editor. It looks fine in GMail, Yahoo and Network Solution’s web clients.

  129. October 28th, 2013

    Thank you very much mate, was having trouble with this and you have saved me. Many thanks : )

  130. October 28th, 2013

    Lastat says:

    Used this for a very long time (awesome) – but… OS X Mavericks (Mail 7.0) is acting oddly and is showing my last style type tags in the body of the email instead of using this in the signature. Same exact signature on non-maverics does not do this; never has. Odd.

  131. October 29th, 2013

    Shote says:

    Confirmed – doesn’t work on Maverick (Mail 7.0)
    Did it step by step, but nothing is displayed as signature

  132. October 30th, 2013

    Tim Cai says:

    On Maverick (Mail 7.0), did you update your .mailsignature file with your own html codes and locked it afterwards with textedit? It worked for me. Please give me more details so I can help look into this.

  133. October 31st, 2013

    Mikhail says:

    I can confirm, this recipe working on maverick. mail client 7.0

  134. November 3rd, 2013

    Randy says:

    Best service like this out there! Working on Maverick’s like a charm. Thanks Tim!

  135. November 14th, 2013

    Arielle says:

    worked wonderfully. I do have a question though (may be wrong place for it) I have an image map as part of the html for my signature. it works great when viewing it on a computer, but from my iPhone it just shows up as the image, no map. still okay but not ideal.Any insight as to how to get around this?

  136. November 15th, 2013

    […] verlinken. Wie Sie diese Aufgabe in OS X Mavericks technisch umsetzen können, erklärt die Seite DesignPad von Timmy […]

  137. November 17th, 2013

    Tim Cai says:

    Arielle, image maps doesn’t work for email signatures.

  138. November 28th, 2013

    James says:

    Hi there.

    Fantastic tutorial thanks! However I am having trouble with something. When I go to test my signature, the padding to the left has completely dissappeared? I am importing a responsive html email with table widths of 100%, could this have something to do with it?

  139. November 28th, 2013

    Tim Cai says:

    James, if you would email me your html file, I will have a look at it for you.

  140. December 3rd, 2013

    Dd says:

    This is great for Apple Mail, and I use it now. Thanks. However, I am absolutely frustrated by MS Entourage and trying to get HTML sigs to work.

  141. December 15th, 2013

    Steve says:

    Hi Tim,

    Thank you for the great tutorial. I am having one small issue with the signatures… In Mail 7.0 on Mavericks the “See more from [contact name]” text appears inside my signature and not on it’s own line. I’ve added an extra at the end of the HTML but this hasn’t helped. Any ideas?

    Cheers.

  142. December 15th, 2013

    Tim Cai says:

    Steve, did you try adding a line break (
    )?. Refer to the instructions for Mac OS X Mavericks 10.9 if that is what you are on. Hope this helps.

  143. December 15th, 2013

    Steve says:

    I’ve tried adding a HTML line break (br tag) but no success.

  144. December 16th, 2013

    Amanda says:

    I seem to get to Step 3 and cannot find a “Mail” folder in my library finder. This seems bazaar as I use mail.app plenty. Any ideas where I can find it to complete the signature upload process? Thanks!

  145. December 16th, 2013

    Tim Cai says:

    Amanda, there are 2 library folders in your computer. Did you go to the one that is requested by first going to Finder>Go>Library (Library folder will become visible after holding down the option key when the “Go” drop menu appears on screen)

  146. January 13th, 2014

    Rick says:

    Hi Tim, I have a html signature and it works well when I send a new message. But when I reply a message, the signature got double spaces on some sentences. Do you have ideas why that happens? Thanks.

  147. January 23rd, 2014

    Sab says:

    Yes I can confirm what Morten said on Dec 19th 2012: use RTF (Rich Text Format) guys! I was using Plain Text and couldn’t get the signature to show with all the proper formatting, but then switched over the RTF and everything was good!

    Preferences (Cmd + “,”) > Composing > Message Format: > Switch from Plain Text to Rich Text.

    Tim please mention this in your tutorial because it’s the best tutorial ever :))

  148. February 5th, 2014

    Beth says:

    I don’t know why this isn’t working for me. I followed your instructions but the webarchive signature in safari doesn’t replace my placeholder signature. I pasted the html code from Safari (webarchive ) into the mailsignature in textedit (it locks automatically). Not sure what’s wrong. Sorry.

  149. February 5th, 2014

    Beth says:

    Ok I now can see the new html signature (I was not checking the correct locked box!) However, my co. logo, fb and twit logos which are all .png do not show up, only the straight text. Any solutions?
    Thanks so much!

  150. February 12th, 2014

    […] Edit HTML signature on apple mail osx […]

  151. March 5th, 2014

    It worked. Thank you!

  152. March 25th, 2014

    […] könnt, muss diese natürlich erst erstellt werden. Weniger Kreative finden im Netz, etwa hier und hier, zahlreiche Vorlagen; gerne könnt ihr auch unsere oben abgebildete Beispiel-Signatur benutzen, auf […]

  153. April 4th, 2014

    Carly says:

    Hi,
    Can some one help me. I’m stuck on: Once the Library folder is open, go to: ~/Library/Mail/V2/MailData/Signatures/. I’ve tried to find to map through the search balk but there is no folder called Signatures or MailData. I only find de app, mail.app. Does anyone know what I’m doing wrong?

  154. April 4th, 2014

    Carly says:

    I’ve found the solution. My library map was hidden. I’ve used the terminal to get back the library folder.

  155. May 3rd, 2014

    Pablo says:

    It works for me. Thank so much for your help!

  156. May 9th, 2014

    Humberto says:

    great tutorial! thank you for the help!

  157. June 10th, 2014

    […] another set of instructions here. Although I prefer […]

  158. July 27th, 2014

    jocco says:

    As dropbox has removed their “Public Folder” is it correct that I can’t use dropbox anymore? I tried using dropbox but when i use the link in my PHP code the images never show up.

    Is there another “free” options to use instead of dropbox?

  159. July 28th, 2014

    Dan Smith says:

    Amazing, I was about to give up completely but you’ve pulled me back from the brink! Great tutorial.

    I don’t suppose you have a tutorial for Entourage too?
    That’s my last hurdle…

  160. September 1st, 2014

    […] Portfolio site of Timmy Cai » Creator of meaningful web and print designs […]

  161. October 3rd, 2014

    […] Create a HTML Email Signature for Mac OS X Mountain Lion 10.8 – Follow this tutorial to create a HTML email signature file and to get it installed into the new version of Mail on Mountain Lion OS X 10.8. For Mac OS X 10.7 users, please follow my previous tutorial: … If you are using Outlook on a Mac, … […]

  162. October 21st, 2014

    luisa says:

    it worked perfect! Thanks!!

  163. October 24th, 2014

    bogdan says:

    Thanks a lot for help. Very good tutorial.

  164. November 4th, 2014

    Leanne says:

    Brilliant tutorial, thanks a lot!

  165. November 10th, 2014

    Wow, very useful and time saver! Thanks!

  166. November 18th, 2014

    Sarah says:

    This update was so helpful. It’s rare that I can get an online tutorial to work, but this one did. Thank you so much!!

Leave a comment * Required fields.


About

  • "Sure someone else could have created a greater logo redesign for EME Lighting but I was sold on Tim’s diligence & reliability plus I love our new logo! It is fresh, symbolic of who we are while staying in line with our brand intention."

    - Bill Lee
    CEO of EME Lighting
  • "Tim is a trustworthy and effective designer. He redesigned the entire visual identity system for my company & I am extremely pleased with it. As the CEO of a company with over 3000 employees, I would recommend Timmy to anyone looking to have some serious design work done."

    - Tony Ou
    CEO of Senqiu Lighting
  • "Tim effectively designed my website and newsletter. What impressed me the most was his ability to create the images, style and design I was looking for. I highly recommend him if you are looking for someone reliable, flexible and talented."

    - Christine M.
    Owner of Acupuncturebody
  • "Tim has a great personality that makes him a pleasure to work with. He is focused, hard working & always has an attention to details. He has great curiosity and constantly strives to learn & develop himself taking his work to the next level"

    - Slava S.
    Director of Creative Services at STV
  • "Tim conceptualized original ideas & executed the design brilliantly. He always made sure the highest technical & design standards were met. I could always count on him to translate the client vision into reality."

    - Linda G.
    VP Biz Dev. at Real Estate Arts
  • "Tim is a highly talented designer. He has excellent technology skills, amazing dedication & terrific interpersonal abilities."

    - Michael S.
    AD at Real Estate Arts
  • "Timmy is a very talented designer, he is passionate and reliable, his work is always creative & on time. He’s a good person with lots of energy, which makes him a pleasure to work with."

    - Jess L.
    AD at Sudler & Hennessey
  • "Timmy got a great system for helping you figure out what you want, need & putting those ideas down into a tangible product. He has done 3 sites for me already & anyone I have recommended him to has called me back to thank me."

    - Vahram S.
    Owner of Brooklyn Body