Attractive HTML/CSS Gmail Signatures

By default, Gmail doesn’t give you a lot of control over your signatures. Perhaps your signature looks something like mine did:

--
Thomas Hunter

Not pretty at all. Gmail only allows you to put in a text based signature. Here’s what my current Gmail signature looks like:

Gmail Signature

Would you like a signature as pretty as this one? The first thing you need to do is install the Blank Canvas Gmail Signatures Firefox plugin (yes, sorry, but this only works with Firefox). Once you have that done, you reboot your firefox and open up Gmail and compose a new message.

You will now have a dropdown at the top of your email where you can select a signature layout. You’ll want to edit the first one and paste in the following HTML:

<table background="http://www.thomashunter.name/emailbackground.gif" style="-moz-border-radius: 6px;" cellspacing="0">
<tr>
<td rowspan="3"><div style="padding: 3px;"><img src="http://www.thomashunter.name/tom.jpg" /></div></td>
<td height="21" valign="middle" style="border-bottom: 1px solid #bbb; text-shadow: 0px 1px 0px #fff; color: #333;"><font face="arial" size="3"><b>Renowned Media, LLC</b></font></td>
</tr>
<tr>
<td height="21" valign="middle" style="border-top: 1px solid #e3e3e3; border-bottom: 1px solid #aaa; padding-right: 8px; text-shadow: 0px 1px 0px #eee; color: #111;"><font face="arial" size="2"><em>Thomas Hunter</em>, Owner / Developer</font></td>
</tr>
<tr>
<td height="22" valign="middle" align="center"  style="border-top: 1px solid #c4c4c4;"><font face="verdana" size="1"><a href="http://www.thomashunter.name" style="color: #fff;">Website</a> | <a href="http://www.thomashunter.name/blog" style="color: #fff;">Blog</a> | <a href="http://www.twitter.com/tlhunter" style="color: #fff;">Twitter</a> | <a href="http://www.facebook.com/pages/Midland-MI/Renowned-Media/126719228403" style="color: #fff;">Facebook</a></font></td>
</tr>
</table>

You will want to upload an image of yourself at roughly the same dimensions as mine (64px x 64px). If you want the rounded edges, do it in photoshop and save it as a PNG so that you don’t get the white corners like in my example. You’ll also want to download the background image and host it on your own server, because if I find a lot of people hotlinking my image I’ll change it to the girliest pink I can find!

Make sure you also change all of your links and text, we don’t want anyone thinking you are me on accident. The rounded edges used on the table don’t seem to work in the Gmail inbox, but should work in other web based email clients.