Create a flashy HTML signature in Apple Mail

by Milind Alvares

Create a flashy HTML signature in Apple Mail

by Milind Alvares on January 1, 2009

Apple Mail can be a very simple application to get you started, but once you get comfortable using it, you need to bring in the power. I’ve discussed a lot of Mail related tips and plugins here on SA (take a look at the related posts in the post footer), and here’s my latest addition to Mail tips. Add a spiffy HTML/CSS signature to your outgoing emails that will definitely cause some sort of unrest on the receiving end. 

siggy

Before I go further, I would like to give full credit to All Forces.com, from where this is based off.

Prepping Mail

Mail supports multiple signatures. These can be assigned to any number of email accounts you have set up. You can automatically assign a particular signature to an account, or choose them from a drop down list while composing your email. To create a signature, which you must do to make this work, go to Preferences » Signatures » and click the + button.

mail-signatures

You can now type in your plaintext signature, and even drag and drop a picture in it (a handwritten signature perhaps). Of course, if you want to go the HTML way, leave that default signature alone, and quit Mail. 

Getting your hands dirty

The next part is composing your signature in your favourite HTML editor. If you don’t know how to code in HTML, you can download this sample code (right click » save link as), and edit your details in between the tags. I’ve added helpful comments in the sample so you can understand what bits you need to edit to get your signature to your liking.

coda-editing

The rules for composing all of this are simple:

  1. All the CSS has to be inline. You cannot attach a stylesheet, nor can you define styles and call them in your tags.
  2. The image has to be an externally hosted image. You cannot attach an image every time you send an email. 
  3. No using <body> <head> and other such tags. Use only tags like <div>, <br> and <a>. 

Once you are done editing, save the file as a ‘something.html’ file on your desktop. Then open the file in Safari (drag it to the Safari icon) and then save it as a ‘.webarchive’ file. 

Navigate to YourHomeFolder » Library » Mail » Signatures, and replace the existing ‘.webarchive’ file with the ‘.webarchive’ file you’ve just created. Make sure you copy over the exact name over to ‘.webarchive’, or Mail will not recognise the file.

saving-siggy

Now, launch Mail, go over to the signature preferences again. Drag that signature from the middle pane to any of your accounts which you want to use this signature with. You can also set the default signature for each account from the settings. Once done, you can compose a new mail, and the signature will be there all pretty!

compose-mail

It didn’t work?

  1. You didn’t assign the signature to any email account. Open Prefs » Signatures and drag the signature from the middle pane to any of the email accounts in the left pane. 
  2. You didn’t copy over the webarchive file properly. The resulting file name in your signatures folder should have the same cryptic filename as the one that was there before. Not ‘something.webarchive’
  3. If you try to use TextEdit to edit an existing HTML file, it automatically renders the page. You need to check ‘Ignore rich text in HTML’ in the TextEdit preferences before trying to open HTML files. 
  4. Hit me up in the comments and we’ll take a look at it!

If you have any problems implementing this, or have something to add to it, let us know all about it.

Leave a Comment

We'd love it if you would add your opinion to the article or discussion, whether positive or negative. We reserve the right to moderate comments at our discretion.

Previous post:

Next post: