Custom CSS Signatures in Mail

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.

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.
Using a text editor application, create your signature using html and css।

Step 2: Create your new signature in a text editor
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!