Create a HTML Signature in Apple Mail on Lion OS X 10.7

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.

Mail Signature Preferences

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.

Summing Up

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.

Follow responses through the RSS 2.0 feed | February 11th, 2012 | 416,255 views

113 comments »

  1. March 10th, 2015

    Please contact me, I need help making the transition from Outlook 2011 to Apple mail. Multi-variations of the procedure above and no joy. Simple in Outlook 2011 you just “select all” on the webpage with the jpg on it and paste into signatures. Apple not straightforward. Will happily pay you to fix for me plus show me how to do it as I will invariably mess it up at some point. Thank you.

  2. March 25th, 2015

    MELISSA says:

    Thank you so much!! worked perfectly!!

  3. October 22nd, 2015

    Per Tore says:

    Actually, in OSX El Capitan, you CAN even include Google Fonts API into your HTML!

    1. Locate your newly created signature file as described above.
    2. Right click it and open it in a web editor of your choice.
    3. Delete everything except this snippet:

    Content-Transfer-Encoding: quoted-printable
    Content-Type: text/html;
    charset=utf-8
    Message-Id:
    Mime-Version: 1.0 (Mac OS X Mail 9.0 \(3094\))

    4. Create a tag with the google font you want to load, like this, and close it:

    5. Put the style and font into your tag i.e.:

    6. Add the text and images as you like! And remember to close all tags!

    7. Save the signature file, locate it in Finder, click get info, and LOCK it. Open Mail and select your customised signature!

    For more different google fonts:
    https://www.google.com/fonts

  4. October 22nd, 2015

    Per Tore says:

    The missing text from point nr 4 and 5:

    4. head>
    </head

    Remember the on the start and end:

    5. div style=”font-family: ‘Lato’, sans-serif; font-weight:300;font-size:20px; color:#333;”

    Remember the on the start and end:

  5. October 22nd, 2015

    Per Tore says:

    Apparently this site does not like html in its comments, I’ll try again, please delete my 2 previous posts:

    Actually, in OSX El Capitan, you CAN even include Google Fonts API into your HTML!

    1. Locate your newly created signature file as described above.
    2. Right click it and open it in a web editor of your choice.
    3. Delete everything except this snippet:

    Content-Transfer-Encoding: quoted-printable
    Content-Type: text/html;
    charset=utf-8
    Message-Id:
    Mime-Version: 1.0 (Mac OS X Mail 9.0 \(3094\))

    4. Create a head tag with the google font you want to load, like this,:

    link href=’https://fonts.googleapis.com/css?family=Lato:400,300,200,100′ rel=’stylesheet’ type=’text/css’

    Remember the angle brackets on each end.
    Close the head tag.

    5. Put the style and font into your tag i.e.:

    div style=”font-family: ‘Lato’, sans-serif; font-weight:300;font-size:20px; color:#333;”

    Again remember the angle brackets.

    Put in your text as you’d like. If you want different styles on different sentences, use the span function to individually apply styles such as text-size and color. And remember to close all tags!

    7. Save the signature file, locate it in Finder, click get info, and LOCK it. Open Mail and select your customised signature!

    For more different google fonts:
    https://www.google.com/fonts

  6. December 13th, 2015

    Catherine says:

    HI It seems Im on the correct page for 10.7.1 now. However, my default browser is Chrome not Safari. When I open my 3rd party created signature, the Safari page is blank. There is nothing to save. I take it that I cannot follow these instructions if I use Chrome? When I ‘save as’ in Chrome, I do not have ‘web archive’ but ‘html website’. Ideas on how to proceed at this point? Could the code send to me be incorrect?

    Thanks

  7. January 5th, 2016

    Tim Cai says:

    Hello there, thank you so much for contributing this valuable piece of info. It is very much appreciated.

  8. April 14th, 2016

    Desiree says:

    I was SOOOOO frustrated yesterday I wanted to throw my laptop out the window and then this morning I found your tutorial. Aaaaahhhhhh. Thank you!

  9. May 29th, 2016

    Tim Cai says:

    Desiree, happy that I saved your laptop. happy that you found my tutorial useful!

  10. June 15th, 2016

    Roy Negri says:

    I am using gmail company account on OSX El Capitan with mac mail 9.3.
    I did everything ok and I see my signature well placed when composing a new email. Great tutorial by the way…
    I also see that my recipients in iPhone and Mac Mail gets the signature great with all the images coming from the server.

    When I go to recipients gmail account or android email apps everything look in place but pictures looks like broken links.
    Please help! Why the hell it doesn’t pull it from the link if they are just ok when I check them.

    Thanks a lot

  11. July 5th, 2016

    Erika says:

    When I go into the Library Mail folder, the extension on the newly created signatures is .mailsignature, and not .webarchive…. thus when replacing the file, it just shows blank.
    Any solution around this?

  12. July 5th, 2016

    Erika says:

    figured it out – sorry i was reading under the wrong OS tutorial! Thanks – this was great!

  13. July 21st, 2016

    Tim Cai says:

    That is because email programs are set up by default to block remote images until the recipient manually confirm that it is safe. Usually the email program would have a setting that will allow you to turn this setting off to allow remote image to load automatically.

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