Categories Mac OS X

Create an HTML signature on Apple Mail


Capture d'écran - Signature HTML sous Apple Mail

Any professional e-mail that respects itself is noticeable by the quality of its signature. Links to its website or social profiles, contact information or company logo, signing an email is essential to ensure your credibility. Apple Mail allows HTML support via a misappropriated technique that I'm detailing you in this tutorial.

Step 1 — Creating the HTML signature

Using an HTML editor like Coda or TextEdit, create an HTML signature according to the classic schema of any web page.

You can rely on the example code below that I use personally:

<html>
<head>

 <style>
 .right { float: right; }
 .left { float: left; }
 #sig a:link{color: #D44F23;}
 #sig a:visited{color: #D44F23;}
 #sig a:hover{color: #D44F23;}
 </style>

 </head>

 <body>

 <div id="sig" style="-webkit-text-size-adjust:none;line-height: 12px; margin: 6px 0; padding: 8px; border-top: 1px #999 dotted; border-bottom: 1px #999 dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 11px; color: #555;">
 <img class="left" src="http://wpchannel.com/images/podcast-60.png" alt="logo-mail" width="60" height="60" style="margin-right:10px;">

 <strong style="color: #D44F23;font-size:14px;">Aurélien Denis</strong><br><br>WordPress Specialist, Blogger &amp; Geek <br><br>

 URL: <a href="http://wchannel.com/" style="color: #D44F23; text-decoration: none; border-bottom: 1px #999999 dotted;">wpchannel.com</a> | e-mail: <a href="mailto:wpchannel@gmail.com" style="color: #D44F23; text-decoration: none; border-bottom: 1px #999 dotted;">mail@gmail.com</a> | mobile: 01 23 45 67 89

 </div>

 </body>

</html>

Here is the visual result in Apple Mail:

Capture d'écran - Signature HTML sous Apple Mail
Screenshot — HTML Signature in Apple Mail

Once you have modified the HTML file to suit your needs, save the file and then open it in Safari — the graphics engine being the same as the email client on Mac OS X.

Check that you are satisfied with the result and then do File and Enregistrer sous…

Here, in the drop-down list, choose the format Web Archive then click on the button Save.

Capture d'écran - Enregistrement de l'archive web sous Safari
Screenshot of screen — Recording the web archive under Safari

You now have a signature-compatible file format in Apple Mail. We need to include it in the software.

This is where we're going to divert the software a little.

Step 2 — Adding a new signature in Apple Mail

Launch the email client and then open the module Preferences...

Capture d'écran - Préférences du client Apple Mail
Screenshot — Apple Mail Client Preferences

In the tab Signatures, create a new signature using the button in the shape of +

Capture d'écran - Signatures sous Apple Mail
Screenshot — Signatures in Apple Mail

Don't worry about the signature text. Exit the software via the keyboard shortcut CMD + Q.

Step 3 — Replacement of a Web archive with the new signature

Using the Finder, locate the folder /Volumes/NOM_DU_COMPTE/Library/Mail/V2/MailData/Signatures

To access the directory Library or Library, just press the key Alt in the menu Go from Finder. For more information, read our tutorial describing the manipulation to follow in image.

Notice the presence of file in format Web Archive with unique numbers... I think you see where I want to come now. Click on one and then do Space to get a quick overview. Alternate between different files until you get the newly created signature under Mail.

Once the file in question has been identified, select it and press the key Entry. Copy the file name via CMD + C then rename the web archive containing the HTML signature by pressing Entry then CMD + v.

Drag and drop the renamed file to the signature directory and replace the file.

Step 4 — Testing HTML signature

Restart Apple Mail, then go back to Preferences then Signatures. Note the replacement of your test signature with the HTML signature.

All you have to do is compose a new message to use it without further delay.

Another example for my business Neticpro :

Capture d'écran - Exemple de signature sous Apple Mail
Screenshot of screen — Example of signature in Apple Mail

By reading this tutorial, you should be able to create customised signatures in HTML format for a most professional result. Remember not to overload your signatures, especially in images.

21 comments

Leave a Reply to Aurélien Denis Cancel reply

  • benadallah

    thank you but it is a can difficult to understand thank you when it comes to the background 120 best ever ever thank you

  • I've tested it working. Thank you for that tutorial. On the other hand, yes, it is amazing that having an HTML signature on Apple Mail is no easier...

  • Philippe

    Hello and thank you for the tuto. It’s very clear.
    However, I feel that some things have changed since MOUNTAIN LION because in the library I find files “xxx.mailsignature” and not “xxx.webarchive”.
    But obviously, the 2 contents are not compatible (I copied the HTML of my signature into the.mailsignature file — it doesn't give anything).
    Thanks for the tip.
    Thank you very much.

    • Makoy05

      Hi, I have the same problem on Mountain lion, there’s no more “xxx.webarchive” file instead it’s “xxx.plist”, I tried to replace the files like a bundle, but nothing does it, do you have a solution?

      Thank you in advance.

  • Hello, congratulations for your tuto, everything works very well, except for the latest version of Mail, whose signature format is no longer.webarchive but.mailsignature
    I tried to simply replace the suffix, but it doesn't work, any idea?

    thank you very much

  • Patrick Lucke

    Good morning,

    I've read your HTML signature tutorial and it’s interesting.
    Is it possible to create an HTML signature which includes both a leader (genre at the head of the letter) and a footer (signature itself?

    thank you in advance for your valuable advice

  • Grégory

    Good morning,

    I've watched several tuto and all give the same explanations...
    My problem: I have no web archive file in the folder/Volumes/NOM_DU_COMPTE/Library/Mail/V2/MailData/Signatures
    When I create a signature in mail, it adds to this folder a.mailsignature file but no.webarchive file
    Thank you for your help.
    CDT.
    Grégory

  • Marc Le Gouellec

    Good morning

    I followed everything well but the signature ci-kointe is always visualised with a rectangle and? instead of the photo.
    Where’s the mistake?
    Thank you
    Marc
    ——————–

    Now = new date;
    TempNow = Now.getTime;
    Future = new Date(2013, 0, 01);
    TempFuture = Future.getTime;
    DiffSec = Math.floor((TempFuture-TempNow)/1000);
    DiffMin = Math.floor(DiffSec/60);
    Diffhour = Math.floor(DiffMin/60);
    DiffDay = Math.floor(Difftime/24);
    while (DiffMin>=60)
    {
    DiffMin = DiffMin-60;
    }
    while (Diffheure>=24)
    {
    Diffhour = Diffhour-24;
    }
    while (DiffSec>=60)
    {
    DiffSec = DiffSec-60;
    }

    element {
    background-color: #ffdde9;
    color: #4731ff;
    }

    Writing {
    margin-left: car;
    margin-bottom: car;
    margin-right: car;
    margin-top: car;
    border-spacing: 5 mm 5 mm;
    border-collapse: Collapse;
    Z-index: 3;
    clear: both;
    float: None;
    position: Static;
    bottom: car;
    top: car;
    text-align: center;
    text-overflow: clip;
    word-break: break-all;
    word-spacing: normal;
    font-style: normal;
    font-weight: normal;
    height: 5 cm;
    width: 20 cm;
    text-shadow: 0px 0px;
    line-height: normal;
    variable font: normal;
    font-size: 12pt;
    font-family: Fantasy;

    Long live holidays in
    document.write(+ DiffDay + ‘days’);

  • Chuf

    Hello, I did the manip under Lion.
    It works very well between Macs, on the other hand PCs under ThunderBird do not visualise the images.
    Any idea?

  • Hello everyone, For those who would not have found the solution for the new version of mail, you will find the answer here: http://mydesignpad.com/create-a-html-email-signature-for-mac-os-x-mountain-lion-10-8/ But in English. Basically, 1- You have to open the.mailsignature file with a text editor. 2- Replace the basic text of the signature with the desired Html code 3- Save file 4- close file 5- cmd+i to modified file 6- Lock the file to prevent mail from changing it when it opens as a basic signature 7- reopen mail 8- sent an email with your new signature Good courage, Olivier

  • Philhec

    Good morning,

    I have looked at all the comments and user who like me use Lion
    You didn't answer it, does it seem to me, is there a solution?
    I'm tearing my hair off!
    Thank you in advance

  • Ducale

    Good morning
    Thanks for this tutorial but it doesn't work on Yosemite. I did everything as I said when I put the.webarchive signature file in V2/Maildata/signatures I see it but as soon as I replace the name of the newly created signature file in.mailsignature pulsed.
    how to do this?
    Cordially