Create a Complex HTML Email Signature For Mail on Mac OS X 10.9 Mavericks

mac-mail-mavricks

Apple’s new operating system, OS X Mavericks 10.9 is now available and best of all, upgrade is available for free! There are many small changes made to the new Mail.app but nothing significant. Follow this tutorial to install a complex HTML email signature for Mail 7.0.

To set up a HTML email signature on Mail 7.0, you need the following:

  • A Mac computer with Mail 7.0 running on Mac OS X Mavericks 10.9. (obviously)
  • A HTML file coded with your desired email signature design. For help creating the HTML email signature design, please click here.
  • A web server for hosting images.
  • Know how to upload images to your web server and get image links.

STEP 1: Create Placeholder Signature

  1. Open Mail
  2. Go to Preferences/Signatures
  3. Click on the + icon located on the bottom of the 2nd column
  4. Name the new placeholder signature

Mac Mail Preferences

Mac Mail Signatures settings

STEP 2: Assign Signature to Desired Email Account

  1. Drag the placeholder signature into the desired email account on the left
  2. Select/highlight desired email account on the 1st column
  3. Select your placeholder signature from the Choose Signature drop-down menu

Mac Mail assign signature

Mac Mail apply signature

STEP 3: Check Composing Settings

  1. Go to Composing tab
  2. Select Rich Text in the drop-down menu for “Message Format”

Mac Mail Composing Setting

STEP 4: Check Viewing Settings

  1. Go to Viewing tab
  2. Check Display remote images for HTML messages
  3. Close window and quit Mail

Mac Mail Viewing Setting

STEP 5: Set TextEdit to Display HTML Files as HTML Code

By default, TextEdit will display HTML files as formatted text. We need to display HTML files as HTML code so we can copy the code instead of the formatted design in STEP 7. HTML file will be emailed to you if you are using MYDESIGNPAD’s Email Signature Service.

  1. Open TextEdit.app
  2. Click “Open and Save” in TextEdit’s Preferences
  3. Check Display HTML files as HTML code instead of formatted text
  4. Quit TextEdit

TextEdit app

TextEdit setting

STEP 6: Locate Placeholder Signature

  1. Click on “Go” on your Finder menu; hold down the Option key to reveal Library on the drop-down menu
  2. Click on Library to open folder window
  3. If not using iCloud:
    Go to ~/Library/Mail/V2/MailData/Signatures/
    If you are using iCloud:
    Go to ~/Library/Mobile Documents/com~apple~mail/Data/MailData/Signatures/
  4. Turn on List view to see Date Modified
  5. Your placeholder signature is the file ending with .mailsignature with the most recent modified date

Open Library folder

Open Signature folder

STEP 7: Update Placeholder Signature

  1. Open placeholder signature file with TextEdit
  2. Delete everything under the Mime Version line
  3. Open the HTML file containing your email signature design with TextEdit
    (Your HTML file is emailed to you if you are using our Email Signature Service)
  4. Copy HTML code of your email signature design
  5. Paste HTML code into the placeholder signature file under the Mime Version line

Replace signature info

STEP 8: Lock File

Very important step to follow in order for signature to work.
Skip this step if you are using iCloud.

  1. Click on the downward triangle located on the top right of the opened file
  2. On the drop-down menu, check Locked
  3. Quit TextEdit

Lock signature file

STEP 9: Restart Mail

  1. Open Mail
  2. Click on the Compose new message button
  3. Your new HTML email signature should appear automatically
  4. If your HTML email signature doesn’t show up, make sure the correct email account is selected on the From drop-down menu below the Subject line
  5. Make sure your HTML email signature is selected in the Signature drop-down menu as well

Check email signature

Installation Completed

That Is It! Go on with Mail as usual. Happy email writing.

If creating your own HTML signature seems a bit too much work or you just don’t have the time for it, we can help. We have created over 8000 attractive email signature with clickable images and text links for clients across the globe. Visit our HTML email signature design service website: www.htmlsignature.com to get started.

August 8th, 2013 | Tutorial | 205592 Views | 72 Comments ›

72 comments »

  1. October 22nd, 2013

    Hello,

    Have used the instructions you posted in the past, but I am testing Mail 7.0 now and simply cutting and pasting an html signature from a browser into Mail 7.0 seems to be sticking. I remember that there was a good reason for having to do this the long way around but I cannot remember what it was. Maybe it doesn’t apply anymore?

    Thanks
    Morgs

  2. October 25th, 2013

    Tim Cai says:

    Dear Morgan, thanks for the input. I will also try and test to see if that is the case now. During me previous testing, it seems to work with copy and paste if the layout is simple and strictly vertical. If it is more complex layout like a side by side design, it wouldn’t work. I will test again and let everyone one.

  3. October 30th, 2013

    Gaby says:

    It’s true, it doesn’t work…I have users using Thunderbird and Mail® 7.0…the code with Mail signature doesn’t stay if you restart Mail the sign goes back to the default. If you find a solution I really want to know it…

  4. January 7th, 2014

    Thomas says:

    works like a charm….

  5. January 7th, 2014

    Jennifer says:

    Brilliant! Thank you! Every update to Apple Mail makes it more and more difficult to add html signatures .

  6. January 8th, 2014

    Stuart says:

    Works a treat, other than the fact that I get a ? where my image should be, any advice?

  7. January 8th, 2014

    Tim Cai says:

    Stuart, you need to be hosting your image on a web server and put in the correct image link in your html file. Hope this helps. Cheers!

  8. January 15th, 2014

    Claudio says:

    Works great, but when I email it to my Yahoo email it does keep format. I’m worried outside networks won’t see it my signature correctly.

  9. January 27th, 2014

    Marcella says:

    It works! Thanks!!!

  10. February 3rd, 2014

    Dianne says:

    Thank you! You helped me in my older system software with the same thing and you’ve helped me again with the new one! Excellent instructions!

  11. February 10th, 2014

    Shannon says:

    Excellent- Thank you Tim!

  12. February 12th, 2014

    Tim Cai says:

    Shannon, you are very welcome. Thank you for using my service: http://mydesignpad.com/htmlsignature/

  13. February 28th, 2014

    Thank you so much it works a dream. I was pulling my hair out before i came across you. Thanks again

  14. March 3rd, 2014

    Charlotte says:

    Hello, I am stuck because I don’t have a ail folder in my Library… And I don’t use iCloud. I really don’t get how this is possible, do you have any idea? I’ve tried searching for a Signatures folder, or .mailsignature files but I don’t have any.

  15. March 8th, 2014

    Eitan says:

    I have done everything that you suggested and the name and title show up BUT the image of the signature only shows up as a frame with question marks inside the boxes (links). Please help.

  16. March 12th, 2014

    Cathy says:

    HI I’ve a HTML email sig using Mac Mail. How do i switch it off for reply emails as it’s adding in each reply and looks very messy.

  17. March 13th, 2014

    Markus says:

    One small issue. I have just images in the HTML – that works fine. However when I add text above in the signature editor, it works fine to begin with [when saved and closed] but when Mail itself closes and re-opens, only the images are visible [the HTML element] is visible, not the text added above…

    Any ideas?

  18. March 16th, 2014

    Tim Cai says:

    There isn’t a option to switch it on and off in Mac Mail but you can turn it off manually by selecting “none” on the Signature’s drop down menu below the subject line when you reply to a message.

  19. March 24th, 2014

    Hy,

    good idea thanks, but my pictures are unvisible. There are borders only, but not the pictures.

    Thanks Peter

  20. April 14th, 2014

    Matt says:

    It worked perfectly! Thanks for the huge help!

  21. April 17th, 2014

    Thanks for your manuals! Only thing is I am struggling with IMAP accounts within the Mail.app. I make them, but they disapear. Do you have any information about this, how to do this? I seems to need different steps than the POP-accounts.

    Thanks so much, Vincent

  22. April 28th, 2014

    ricobomb says:

    thanks for this precious tutorial.

    just a little adding : in case of, like me, you get a full blank signature after the update : just verify that there is a blank line between the line beginning with “Mime-Version: 1.0…” and the first line of your html code

  23. May 2nd, 2014

    Fernando says:

    This works like a charm! My only problem is that my signature is way up high in the text box and I can’t type. The html signature is covering my initial 10-20 lines of text. How can I change this? Thanks

  24. May 3rd, 2014

    Tim Cai says:

    You can add spacing with break tags.

  25. May 3rd, 2014

    Tim Cai says:

    ricobomb, thank you so much for the small but important point!

  26. May 6th, 2014

    This worked a dream for me. Thanks ;)

  27. May 20th, 2014

    KAJAL SHAH says:

    AFTER FOLLOWING THE INSTRUCTIONS, IMAGES IN THE SIGNATURE STILL COME AS BLUE BOXES WITH QUESTION MARKS?

  28. May 20th, 2014

    Tim Cai says:

    Kajal, are your images hosted on a web server and linked correctly? Have you check images after you mail out the email? It is possible that the images may not sure or click-able in the compose window.

  29. May 20th, 2014

    Kajal Shah says:

    I have a ready made HTML file with the images and yes the links are working. I tried to send a test mail with the signature. Mail is received in the same way as the composed one. text is alright, images appear as blue boxes.

  30. May 20th, 2014

    Damien says:

    I’ve had the same problem as Kajal. Tried a few different methods.

    BUT when I try to extract a code for the images hosted on the public folder of Dropbox using “Show Source Code” via Safari, I get a ton of lines, for which the entire script cannot be copied.

    Where am I supposed to extract the html code of my image from if hosted on Dropbox?

    Thanks in advance.

  31. May 20th, 2014

    Tim Cai says:

    Damien, what you need is the share link of the image hosted on Dropbox. When you use show source code via Safari, it will show you the codes of the Dropbox web page that you are on instead. I also use Dropbox but in my previous attempts to use Dropbox to host images for my email signatures, the images didn’t load.

  32. May 24th, 2014

    Chris says:

    Hi Tim,
    Have done everything you explained and works a charm if you view on a pc or laptop using any mail app, however when viewing on an iphone/ipad of mine which is logged in to my Facebook account instead of opening on my business page it automatically opens on my personal news feed (yes links are correct), when viewing on iphone/ipad thats not mine and not logged in clicking facebook logo link opens up a post office app on said device? I am totally baffled why this is happening. Any ideas??
    Many thanks in advance and great tutorial.

  33. May 24th, 2014

    Tim Cai says:

    Chris, yes that does sound unusual. I will look into this. Hope another fellow readers may post a fix for this here.

  34. May 24th, 2014

    Tim Cai says:

    Ricobomb, great tip about making sure that there is a blank line beginning with “Mime-Version: 1.0” and the first line of your html code.

  35. June 18th, 2014

    Shannon2 says:

    Hi Tim,
    Thanks for the great tutorial.
    Everything’s set up right, the signature shows up on the email but even though I manage to send out the mail, it never gets through when it has the html signature. When i use a “normal” signature, it gets through. Any ideas?
    Thanks!

  36. June 24th, 2014

    Tim Cai says:

    Shannon, what do you mean that it doesn’t get through? I will see what I can do to help after I understand what you mean.

  37. July 22nd, 2014

    jocco says:

    Hi Tim

    Since Dropbox has removed the public folder for new users after the 4.October 2012 is it still possible to have the public files stored on dropbox? I have tried but my embedded pictures in my html signature do not show up.
    I have followed your exact instructions but the images are always a blue box with a question mark. The links work though.
    If it is not possible with dropbox anymore what other fee otions do I have?

  38. July 29th, 2014

    COLIN says:

    Fantastic. I have been trying for days to do this but all other video and website tutorials didn’t work. This worked spot on for me. Easy to follow and worked first time. Thank you very much.

  39. July 29th, 2014

    Hi,

    I had achieved and was using, but suddenly I changed my hosting server and no longer appears on the mac, but via webmail and mobiles appear. I tried everything from scratch again more than once, but the mac there is no picture, but when you send the receiver sees. Any idea? Thanks!

  40. August 1st, 2014

    I had been using a variation of this method for years. That signature has continued to work. Recently I needed another signature to go with a new email address. When I used the old method, the signature would appear for a short period of time. But no matter what, a default signature would take it’s place. I found this site along with a couple others detailing this same method which was a bit different than what I had done before. That method involved creating a .webarchive.

    At first I half-followed the instructions. I kept having the same problem of the new signature working for a very short period of time and then Mail replacing it with a default signature. I then followed every single step exactly as laid out. It looked like I had figured out why it hadn’t worked before. I needed to “Check Display HTML files as HTML code instead of formatted text.”

    But then I still had the same issue. I searched some more and I saw a few posts stating that Mail 7.3 broke HTML signatures for a lot of people. Well I had 7.3 and my long-running signature was working just fine.

    I decided to look closer at the signature file. I had noticed that the header was basically the same as a new one except for the Mime-Version. My old one had “Mime-Version: 1.0 (Mac OS X Mail 6.5 \(1508\))”. I also had another signature that wasn’t HTML that was working fine too. It’s Mime-Version was “Mime-Version: 1.0 (Mac OS X Mail 7.2 \(1874\))”. So I created this new signature yet again and used the 6.5 version. And what do you know, it worked. It has stayed for the past couple of days. On my MBP I created the same signature but used the 7.2 version and the same result.

    I’ve now created 2 more signatures with the same modification on both of my computers and they are stable. So it appears that 7.3 looks at the .mailsignature file periodically and if it sees 7.3 it verifies that it complies with the format of a standard signature. If it doesn’t, then it actually creates a NEW .mailsignature file with a default signature.

    If the Mail.app sees 7.2 or older, then it leaves it alone. I’m not entirely sure if just changing the 7.3 to 7.2 or earlier will work. I used the entire line after “Mime-Version: 1.0 ” just in case that code at the end was important to the actual Mime-Version.

    On a side note, it’s a lot easier to do this in iOS. First you need to email yourself with the signature. Then you do a copy all of the HTML signature. Next go to the Signature part (Settings/Mail, Contacts, Calendars/Signature) of iOS settings for Mail and then copy it to the desired signature. Full on HTML signature including a copy of the picture file instead of a blue question mark.

    Hope others will see this as it drove me crazy for a solid week!

  41. August 5th, 2014

    John Fitz says:

    Great instructions. Worked perfectly. Thanks!

  42. August 5th, 2014

    Tim Cai says:

    Thank you for your thorough input. I am sure your input will be very helpful to some!

  43. August 25th, 2014

    teresa says:

    Thanks for this! I got it to work, but have found that it doesn’t move with the text of the email – but stays constant and the boy of my email exists beneath the logo. Could it be retaining attributes from the HTML file? I used an apDiv in creating the signature…

    Thanks for any help!

  44. August 25th, 2014

    teresa says:

    Ok, never mind…. it’s just me. I tweaked the HTML file and all is well. Thanks so much for the tutorial!

  45. August 27th, 2014

    This is the best instruction for inserting an HTML sig into Mail – thank you!

  46. September 5th, 2014

    Brilliant Instructions – worked first time!

  47. October 31st, 2014

    Thank you SO much for this tutorial ! :-)

  48. November 12th, 2014

    Ingridi says:

    Does this work for Yosemite??? Someone pls email me at ingerv1141@hotmail.com

  49. November 14th, 2014

    Sofia says:

    Hi Tim, I’ve just completed this tutorial and I can successfully send and receive email with an image in my signature on my mac but on a pc the image is missing. Is there something I can tweak in the html code to solve this?

    thank you.

  50. November 17th, 2014

    Guytoon says:

    Well done! There are so many titorials out there but there is always some tiny snippet of information that someone omits and the you can never complete the jigsaw! This one worked a treat and saved me many hours of searching! Many thanks

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