Custom CSS Signatures in Mail

Mail Signature

The default interface for Mail signatures allows you to do rich text signatures using the fonts and colors palette. You can even drag an image into the compose signature window and it will be included in every email as an attachment. This is fine for most people, but attachments should be just that, an attachment of a file I am sending, not an image in my signature. So here’s an easy guide on how to do CSS signatures referencing images on an outside server and not as an attachment.

This tutorial covers Apple Mail in Mac OS X Tiger v.10.4

STEP 1: Create a new Mail signature

Mail: Create Signature

Launch Mail, located in the Applications folder. From Mail’s top menu, select ‘ Mail > Preferences ‘ and go to the Signature pane. From the Signatures pane, click the plus icon underneath the middle column to create a new Signature. In this example I cleared all my previous signatures for the purpose of clarity but this is not required. Once your signature is created, quit Mail by selecting ‘ Mail > Quit Mail ‘ from the top menu.

Step 2: Create your new signature in a text editor

CSS Signature

Using a text editor application, create your signature using html and css.

TextEdit can be used for this, just make sure save as HTML and not rich text. If you want to use my signature style, just download my html sample file and use it as a starting point.

UPDATE: After publishing this, some of you have discovered that GMail will not display any of the CSS unless it’s inline. So here’s a new revised sample file that has all the CSS inline including the image as an img file instead of a a background css attribute. When using this method, GMail will show a link giving the user the option of showing the embedded images.

If you are starting one from scratch check out A List Apart’s article on CSS in emails. In summary, do not use html, head or body tags, use divs instead. Use embedded CSS not extarnal. Do not use classes that start with a dot, but u can do #div .class instead. The same goes to the a: tag.

Step 3: Create Web Archive from signature

Signature in Safari

Open the signature html file you just created in Safari. You can do this by dragging the actual file icon into the Safari icon in your dock. This should look exactly as you want your signature to look like.

Safari Archive

To save this as a web archive, from Safari’s top menu select ‘ File > Save As… ‘ and save the signature as a Web Archive by selecting ‘Web Archive’ on the Format pulldown menu. Saving to the Desktop makes it easy to find for the next step.

Step 4: Replace old signature with the new one

Signatures location in Finder

From the finder, navigate to ‘ your home folder > Library > Mail > Signatures ‘. Since I only have one signature in Mail, there’s only one ‘.webarchive’ file in this folder. If you have more than one signature, you need to find the one we created on step 1. Open the web archives in Safari to find the one we created in step one. Copy the file name of the archive file and paste the name in the new archive file on the desktop to rename it. Now drag the new signature archive from the desktop into the Signatures folder. It should prompt you asking if you want to replace the file, which you do.

Step 5: Activating the new signature

Rename Signature

Launch Mail and select ‘ Mail > Preferences ‘ from the top menu then go to the Signatures tab. You can rename the signature name here by double clicking it’s name and renaming it. Notice that Mail will not properly render the html in this Signature window but it will render it properly in the compose window.

Assign signatures to accounts

Now drag the signature to the mail accounts you want it available for.

Default Signature

Then select the account from the left column and select the new signature from the ‘Choose Signature’ pulldown menu. This will make it the default signature for that account.

Step 6: Testing our new CSS signature

Compose with new signature

To test our new signature, compose a new email and send it to yourself. You should be able to see the signature in the compose window.

CSS mail signature works!

Click the send and receive button to receive you new email. You should get a new email with your spanking new fancy signature that contains no image attachments. What a concept!

UPDATE: Guide to CSS Signatures on jail broken iPhone by Jiradett

449 thoughts on “Custom CSS Signatures in Mail

  1. Stephen Price

    Great tutorial, very helpful. I am having difficulties with images. Is there any advise about how to include a JPEG, mine always comes up unorganised. Thanks

  2. Pingback: ทำ signature สวย ๆ ใน iMail - Macintosh - - Dclub Photo

  3. BGW

    Created the Signature fine, however when I compose a new message it compresses it all in a narrow column. How do I extend the limits of this column to display correctly? Anyone??

  4. Pingback: How to make a CSS signature for Apple Mail | Creating An Email

  5. Pingback: Nice Apple Mail photos | Blog Apple

  6. Pingback: links for 2011-01-10 « KARLENDER

  7. Pingback: The Mac ReviewCast » The MacReviewCast Episode #52