Create a HTML signature for Mac OS X Mavericks

Adding an email layout to your Mac Mail.

This article describes the method for adding an email signature to your mail client under Mac OS X Mavericks (may be backward compatible with Lion too, untested).

Create your page in HTML as you want it seen inside your email being careful to note that not all tags can be used.

##First - Create a standard signature##

In Mail.app, open Preferences and click on the Signatures tab. There you will see 3 columns, the 1st one is a list of your mail box accounts, the 2nd one is your custom signatures set and the 3rd column is the signature detail preview. Create a new placeholder/standard signature by clicking on the plus icon at the bottom of the 2nd column and give it a descriptive name. Drag your new signature from column 2 into your preferred mail box in column 1. Select your preferred mail box in the first column and go down to Choose Signature at the bottom. In the drop down menu, find and select your new signature. Note: At this point you will not see your HTML signature design on the 3rd column yet. Leave the 3rd column as is for now. Close window and quit Mail.app.

##Second - Update signature##

On Finder’s top nav, drop down the Go menu and then hold down the Option key to see the hidden Library folder. Once the Library folder is open, go to: ~/Library/Mail/V2/MailData/Signatures/.

Find the signature that you just added (a file ending with a .mailsignature extension). If there are multiple files in the folder, switch to list view. The signature that you just added in Mail.app should be the file that with the most recent modified date (bottom of list if sorting by date). When you have located the .mailsignature file, open it with your preferred text/code editor. You may see some metadata info on top and some HTML code below it. Delete all the original HTML code and leave the metadata info untouched.

Under the metadata info, paste the HTML code of your desired email signature. Hit Save and quit your editor, or not, you won’t be able to save edits after the next step, you will have to revert (unlock file) the next step if you want to update your signature file.

##Third - Lock the file, very important!##

This step must be followed correctly in order for this signature to work or else Mail.app will use the original version of the signature instead of the new one. Locate the .mailsignature file that you just updated in Finder again. Press Command+I or right click on file to Get Info. In the Get Info window, mark the Locked check box. If you want to make changes, then you will need to ‘unlock’ this file again, make your edits, then lock it again. Make sure to restart the mail client after each new edit.

***Another way to lock the file is by clicking on the gray text to the right of the file name on the header of TextEdit. A drop-down menu will pop up giving you the option to lock file.

##Fourth - Check it worked##

Restart Mail.app. Your new custom signature should appear automatically when you click on Compose Mail. Links may not work (Lion) and the images if any may not show (Lion) when composing an email. But the links will work and the images will show on the receiving end if the source locations are correct. Compose and send yourself a test email with your new signature selected. If the images show, the links working and everything looks as it should, then you have done the whole process correctly.

##Example HTML to get you started##

<style>
.ExternalClass * {line-height: 100%}
</style>
<br/>
Joe Bloe
<br/><br/>
<table cellspacing="0" cellpadding="0" border="0" style="-webkit-text-size-adjust:70%; -ms-text-size-adjust:none;">
	<tr>
		<td bgcolor="#ffffff" style="border:1px solid #ecdece">
		<a href="http://www.example.com" target="_blank" ><img src="http://www.example.com/emaillogo.png" title="Example" alt="Example" width="116px" height="43px" border="0"></a></td>

		<td width="8"></td>

		<td width="310px" bgcolor="#f9eee1" style="padding-right:8px; border:1px solid #ecdece;font-size:10px; font-weight:normal; padding-left:8px; line-height:18px; font-family:Helvetica,Arial,Trebuchet MS,Sans Serif; color:#ec1863">
		<span style="color:#1c7bc3; font-weight: bold;">0408 353 290</span> |
		<span style="color:#ec1863;"> Solutions developer</span> |
		<span style="color:#3e2105; font-weight:bold;">E</span>
		<a style="color: #1c7bc3;text-decoration:none;" href="mailto:youremail">youremail</a><br/>
		<a style="color: #3e2105;text-decoration:none;" href="http://www.example.com/contact-us" target="_blank" > postal</a> |
		<a style="color: #3e2105;text-decoration:none;" href="http://www.example.com/projects/" target="_blank" > projects</a> |
		<a style="color: #3e2105;text-decoration:none;" href="https://twitter.com/example" target="_blank" > twitter</a>
	</tr>
</table>
<p style="font-size:small;">NOTICE This e-mail and any attachments are intended for the addressee(s) only and may be confidential. They may contain legally privileged or copyright material. You should not read, copy, use or disclose them without authorisation. If you are not the intended recipient please contact the sender as soon as possible by return e-mail and then please delete both messages. This notice should not be removed.</p>

##Example##

Capture timeline

##Conclusion##

Hope this helps someone. Please note that your signature may be not what you want if the recipient has HTML email function turned off.

Ref: http://mydesignpad.com/create-a-html-email-signature-for-mac-os-x-mountain-lion-10-8/