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
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
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
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.
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
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
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.
Now drag the signature to the mail accounts you want it available for.
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
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.
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
Hello, I am Melvin Rivera; creator of 
Follow me @
Hi there
I tried this method but there seems to be a problem with Mail.app (Tiger). The html-code contains
.
The image is not on a http-server, as this means spam to many e-mail providers/clients. It is stored directly in the same folder as the html-file. Safari has no problem with it and perfectly packs it in the webarchive. But Mail.app sends the mail w/o the image.
Now this works perfectly with all Outlook Versions up to 2003 and with Outlook Express (PC). It even works with the horrible Outlook 2007 after applying one minor registry change. I’m aware there is a mozilla-specific tag (moz-do-not-send=”false”) for Thunderbird – but how do I get it to work with Mail.app?
Thanks for any advice
What was the change you had to make for Outlook 07? The image is showing up to the left of the first line (like it should) and on top of the second line when viewed within Outlook ’07.
I love this! I am a sig. freak and i love how simple and clean this looks. THanks for creating it.
Now this works perfectly with all Outlook Versions up to 2003 and with Outlook Express (PC). It even works with the horrible Outlook 2007 after applying one minor registry
http://www.iii2.host.0lx.net/ph/
change. I’m aware there is a mozilla-specific tag (moz-do-not-send=”false”) for Thunderbird – but how do I get it to work with Mail.app?
Thanks for any advice
woo! Great tutorial. Works great.
Awesome!
Emails with embedded images as part of a signature really piss me off. It makes it hard to locate emails with “genuine” attachments. I’d been trying to work out how to embed the image inline but without success as it always showed up as an attachment when in the inbox.
Cheers to Melvin for a creative and very effective solution.
A question: when I send a link from Firefox through my email (not gmail-see above), my signature does not show up. It is a straightforward words only signature. Any helpful thoughts much appreciated.
V
I was able to make it it work.
1. Create a new Signature from Mail
2. Close the Mail
3. Go to Library | Mail | Signatures
4. Open the new signature.webarchive in Safari.
5. Re-save it using the same filename. It will ask to replace the file – Just accept it.
6. Open the same webarchive file in Text Edit
7. Do required Text Editing/Formatting (Do not insert the pictures yet)
8. Open Mail | Preferences | Signature – Select your signature
9. If you want to add an image just drag and drop the image from Finder to the Signature.
10. Voila!!!! It should work
Works GREAT, good tutorial.
It also works in Thunderbird and Gmail.
Tanks
thanks, melvin!
the link of the picture is working but unfortunately the picture is not showing up. i wonder if it has something to do with “… signatures referencing images on an outside server …”? – server?! on the other hand it was working before when i had no links w/t a picture.
I am working with Leopard. Any idea?
Hi
Please help, I have created the Signature I want through Mail, I then quit mail but I don’t know how to create the html?
Thanks
hello, i know that im just mentioning the same problem as a lot of other people, but I can’t work it out and need some help! Anyone??? I’ve followed all the above instructions and my signature looks excellent except for the fact that my image will appear in the email i’m about to send but wont appear once it arrives at the other end! I’m using mac Mail, I’ve used TextEdit and I’ve tried the image as a jpg and as a gif and dragged it into the textedit window… where am i going wrong????