[Tutorial] How to add a custom CSS/HTML Signature in Apple Mail

Discussion in 'Mac & OS X' started by therealduckie, Apr 17, 2008.

  1. therealduckie

    therealduckie Member

    Joined:
    Apr 9, 2008
    Messages:
    318
    Likes Received:
    6
    Device:
    4G iPod touch
    How to add a custom CSS/HTML Signature in Apple Mail

    I made this tutorial for the iPod Touch/iPhone >> HERE << and someone asked how to do this in Apple Mail, so here's the tutorial I did for my Blog.

    ---------

    Whenever I send an email, the recipient sees this at the bottom:

    Please Register or Log in to view images



    So how do you do this? Well, it's not easily done in Apple Mail. So, I am going to (attempt to) teach you how to make your own using a text editor, Mail, and Safari.

    Creating an HTML Signature in Apple Mail

    Please Register or Log in to view images

    Step 1 - Create it:

    Create your HTML signature. For this, I use TextMate because it shows me the correct formatting while I type.

    Please Register or Log in to view images


    Format it most any way you want. (*NOTE: I used inline formatting. This is a must since most emails will remove any <style> tags) Just remember not to make it too obtrusive.

    Your icon shouldn't be any larger than 50x50 pixels. I kept mine at about 20x20. To host your icon, you can either use your own site or Photobucket.

    For those of you who don't know how to 'code' I created a template for you to download >> HERE <<.

    Now, save the file to your desktop.

    Please Register or Log in to view images

    Step 2 - Fake it:

    Open Apple Mail and go to Preferences.

    Please Register or Log in to view images


    Next click on the Signatures tab.

    Now, click the + sign to add a new Signature. Name it anything you want.

    By default it will add your Info. don't worry about that. We'll get to that later when we edit that file.

    Drag it to 'All Signatures' so that it loads for all emails. Otherwise, just drag it into the account you are going to use.

    CLOSE MAIL AFTER THIS STEP!

    Please Register or Log in to view images

    Step 3 - Safari-tize it:

    Open the HTML signature you created in your text editor (the one you saved to your desktop) with Safari. Either drag the file onto Safari's icon on the Dock or choose 'Open' from Safari's File menu.

    Next, choose File then Save As and choose the Format: 'Web Archive' .

    Please Register or Log in to view images

    Step 4 - Save it:

    Browse to the following folder: YOURUSERNAME/Library/Mail/Signatures

    Look for the most recent file by separating everything by 'Date Modified'. You should see the signature you just created in Mail. Copy the name of that file, which will be something like this:

    Please Register or Log in to view images

    B34739D3-5A67-4119-98A2-9D2CC5C0B337.webarchive

    Now, paste that name onto the Web Archive file that you saved on your desktop. Then, drag the new file from your desktop into that folder and overwrite the existing one.

    DONE!
    ----

    Now, the next time you launch ´ú┐Mail and prepare a new email, you should see your signature on the bottom, like this:

    Please Register or Log in to view images


    I know it seems like a giant pain, but I have only had to do this once. Now all my emails have an attractive and professional looking signature.

    It displays in Hotmail, Yahoo, Gmail, and most POP3 servers...and, of course - Apple Mail.

    Feel free to share your own finished signatures (and questions) in the comments.

    Duckie
  2. Apple Guy

    Apple Guy Well-Known Member

    Joined:
    Dec 24, 2007
    Messages:
    1,992
    Likes Received:
    41
    Device:
    iPhone 4S (Black)
    Sweet this worked great for me!

Share This Page