When I switched to Thunderbird as my primary e-mail client, I was immediately intrigued by it's support for CSS-enabled signatures. I decided to create my own. A genericized version of it is shown here:
(Ignore the red underlines here and there. Those are Thunderbird's spell checker at work!)
Here's the signature source file for your convenience:
<div style="font-size: 7pt; background-color: #ddeeff; color: #003399; border-style: solid; border-color: #99ccff; border-width: 1px; padding: 0.5em">
<div style="font-family: Trebuchet, Trebuchet MS, Verdana, Arial, Sans; font-size: 11pt; float: left"><img src="file:///Users/jbloggs/sample%20signature/photo.gif" width=46 height=47 border=0 style="padding: 0 4 0 0;" align=middle>
<span style="white-space: nowrap; font-weight: 900">Joe J. Bloggs</span></br>
<span style="white-space: nowrap; font-size: 8pt; font-style: italic">Chairman & Executive Officer</span></br>
<img src="file:///Users/jbloggs/sample signature/company-logo.gif" width="142" height="27" border="0" alt="Company Incorporated" style="padding: 4 0 4 0">
</div>
<div style="color: #ffffff; font-family: arial, sans; font-style: italic; font-weight: 900; font-size: 20; text-align: right; float: right; max-width: 350px; padding: 10 10 0 0"><span style="display:none">“</span>Company tagline displayed right here!<span style="display:none">”</span></div>
<div style="clear: left"; font-family: Trebuchet, Trebuchet MS, Verdana, Arial, Sans; font-size: 8pt;">
</br>
<span style="white-space: nowrap"><img src="file:///Users/jbloggs/sample signature/mobile.gif" width="16" height="16" border="0" style="vertical-align: middle"> <span style="font-weight: 900">(123) 456-7890</span> <span style="color: #7497C6">mobile</span></span></br>
<span style="white-space: nowrap"><img src="file:///Users/jbloggs/sample signature/telephone.gif" width="16" height="16" border="0" style="vertical-align: middle"> <span style="font-weight: 900">(456) 789 0123</span> <span style="color: #7497C6">office</span></span></br>
<span style="white-space: nowrap"><img src="file:///Users/jbloggs/sample signature/mail.gif" width="16" height="16" border="0" style="vertical-align: middle"> 123 Main Street, Springfield, USA</span></br>
<span style="white-space: nowrap"><img src="file:///Users/jbloggs/sample signature/email.gif" width="16" height="16" border="0" style="vertical-align: middle"> <a href="mailto:jbloggs@company.tld">jbloggs@company.tld</a></span>
<span style="white-space: nowrap"><img src="file:///Users/jbloggs/sample signature/link.gif" width="16" height="16" border="0" style="vertical-align: middle"> <a href="http://www.company.tdl/">www.company.tdl</a></span>
<span style="white-space: nowrap"><img src="file:///Users/jbloggs/sample signature/vcard.gif" width="16" height="16" border="0" style="vertical-align: middle"> <a href="http://www.company.tld/jbloggs.vcf">vCard</a></span>
</div>
<div style="font-size: 6pt; line-height: 6pt; color: #7497C6; text-align: justify;">
</br>
<span style="font-weight: 900; font-style: italic">NOTICE:</span> <span style="letter-spacing: -0.035em">This email and any attachments are confidential and intended solely for the use of those to which this email is addressed. If you have received this email in error please notify <span style="white-space: nowrap">Joe J. Bloggs</span> immediately and destroy it. You may not copy this message or disclose its contents to anyone. E-mail transmission cannot be guaranteed to be secure or error-free as information could be intercepted, corrupted, lost, destroyed, arrive late or incomplete, or contain viruses. Although the sender endeavours to ensure this e-mail and its attachments are virus-free, Company Inc. accepts no liability for any damage caused by the transmission of this email. <span style="font-style: italic; white-space: nowrap"> - Company In., Springfield, US</span></span>
</div>
</div>
There's a couple of tips here.
1. Always use inline styles, as many e-mail clients disregard normal STYLE-blocks.
2. Do not try to use background images defined as url() attributes to styles, they won't work with Thunderbird today, it's already registered as a bug on Bugzilla. Also, certain clients have trouble rendering background images and respecting background colors at the same time.
3. If you're going to use images, as I have here, be SURE to optimize them. Before I rean these through Adobe Image Ready and reduced them down to the essentials, this signature was more than 90 kilobytes in "weight". After Image Ready, each of the icons are 400-700 bytes and the company logo and photograph are about 2K each. Total size about 7K. Massive difference and one that will make your recipients a lot happier -- especially those on handheld e-mail clients!
4. Always contruct your signature file so that it renders well as text only for clients that haven't a clue about CSS or images in signatures. In the example above, I've carefully crafted the signature so that it renders well in text-only too. See this version as shown in a plain-text mail client:
This was done with careful use of DIV-blocks with certain FLOAT attributes. For example, in the CSS-rendered version of the signature, the tagline is nicely layed-out in the top right, but in the plain-text version, we want it beneath the company name/logo. This was done by inserting the DIV-block for the tagline after the company name/logo DIV-block, so that it renders in the proper place in plain text, but assigned with a FLOAT: right attribute which allows the tagline to float in the upper-right of the css-rendered version of the signature. To get the remaining elements to get back into the normal sequence of things, I used a "CLEAR: left" attribute to the next DIV-block.
You may also notice in the plain-text version of the signature above, that the company image is now rendered as a simple text-line. To do this, use "ALT" attributes in your image tags that contain appropriate plain-text content in place of the images where they are disabled.
Also, if you look closely, you'll noticed quotes around the tagline which is now placed beneath the company name. These are in the signature file, but were told not to appear in the CSS-rendered version by wrapping them in DIV-tags with the style: "display: none", which effectively makes them disappear when CSS is enabled.
If you're really into your signature, you might wish to randomly change the tagline for each message. See how I did this with my SignatureRandomizer.