Slick Looking Gmail HTML Signature
This post has been updated. Read the newest version here.
With a little bit of HTML and a couple of Mozilla Firefox Plugins you can make a pretty slick looking HTML signature for Gmail.
Here is what mine looks like
 |
Chris Pollock my blog | LinkedIn | flickr | del.icio.us |
|
1. Firefox is Required. If you haven't made the switch.. go for it.
2. Download Greasemonkey - it's a firefox plugin.
3. Download a Grease Monkey Script called: Gmail HTML Signature. The script should install automatically when you click on "Install this script" button in the upper right hand corner. Here are some additional setup instructions from the script creator.
4. Prepare the HTML. It helps to know a bit about HTML, but if you don't feel free to use my snippet below, inserting your own information where appropriate.
<table><tbody><tr><td> <img src="http://farm3.static.flickr.com/2363/2237613114_5ff587490a_o.jpg" /> </td><td></td><td> <div style="padding-right: 5px; padding-left: 5px; font-size: 11px; padding-bottom: 5px; color: #666666; padding-top: 5px"><strong>Chris Pollock</strong> <br />
<a href="mailto:cwpollock@gmail.com">cwpollock@gmail.com</a> <div style="font-size: 10px"> <a href="http://sim.plified.com">my blog</a> | <a href="http://www.linkedin.com/in/chrispollock">LinkedIn</a> | <a href="http://www.flickr.com/photos/pollocks">flickr</a> | <a href="http://del.icio.us/cwpollock">del.icio.us</a> </div></div></td></tr><tr></tr></tbody></table>
I created a thumbnail avatar (50 by 50 pixels) and uploaded it to Flickr. You'll want to replace the image with your own image. To get the picture URL, click on "All Sizes" on your photo page and get the URL in the text box at the bottom of the page. You can also replace your own list of links below your name and email.
When creating this code you might want to assemble it in a text editor. Notepad will do.
5. After you've installed the Greasemonkey script, you'll see a "create signature" link next to your email address when you go to compose a message. The first time you compose, click that link and add the HTML code that you prepared. Click "Save Signature" and you should be set to go.
22 Comments, Comment or Ping
cwpollock
I have had a couple of people contact me about having problems with their HTML. The primary issue seems to be the double quotes in the HTML. If you have a problem getting your links to work, check to make sure that your double quotes are formed correctly. They should be the standard straight quotes, not "smart quotes".
Feb 12th, 2008
Kim Hjortholm
Great post, together with this add-on Gmail HTML signatures (http://userscripts.org/scripts/show/20887) I'm in sig-heaven soon
Feb 16th, 2008
Diana
Thanks so much for the code! My signature looks great! One question, though –Is there any way to add the signature to Reply emails? Right now it only shows if I go to compose a new email. Diana
Mar 12th, 2008
Alan
Mar 21st, 2008
Melinda
Hey,
Thanks for this Chris.
Melinda
Apr 12th, 2008
Melinda
I'm back. My signature doesn't always show up when I compose a new message. I ticked 'no signature' in the Settings page.
Apr 12th, 2008
Nishant
Its not working on Reply/ Forward…
Apr 16th, 2008
Brian
Great stuff, finally got it up and running with google apps. Thanks for the article.
May 8th, 2008
netgiz
Great idea..!!!!
I made it in my gmail..
Thanks again
May 14th, 2008
CactusTriathlete
Thanks for this page! I used it as a start to get just the sig I was looking for!
May 22nd, 2008
GeekFG
There is a bookmarklet HTML creator in order to add HTML signature to Gmail : http://projets.geekfg.net/?/1-how+to+insert+html+signature+in+gmail.htm
Jun 10th, 2008
Jerome Dane
This Firefox add-on allows you to easily maintain up to four separate rich HTML signatures for each email address you have set up in your Gmail account: http://blankcanvasweb.com/pages/detail/id_9/n_gmail_signatures/
Jul 17th, 2008
gareth
thanks, it worked great!
Jul 27th, 2008
fornetti
I do not believe this
Aug 30th, 2008
Finkpad
you should believe it because Jeromes BLANK CANVAS addon works great and is easier to setup than the greasemonkey script - imho of course
http://www.projex.com/blog/how-to-use-html-images-with-google-gmail-signature
Mar 24th, 2009
JazLabs
There is a much better solution, that works on all browsers and on any computer (even if its not your own). No plug-ins/hacks required:
http://twurl.nl/88g2pq
Jul 8th, 2009
Pol47
But in order to make this point, one need not deny that language is for communication, or claim that it could just as easily be thought of as being for inner speech. ,
Oct 22nd, 2009
Jordan Clist
Or you could just make a "Canned Response"…
It's MUCH easier than doing all these hacks.
instructions here:
http://jazlabs.co.uk/blog/2009/07/08/easy-gmail-html-rich-text-signature-solution/
Feb 2nd, 2010
Jerome Dane
If anyone wants it, the updated version of Blank Canvas Gmail Signatures is available at:
http://blankcanvasweb.com/pages/id_9/n_gmail_signatures/
Feb 15th, 2010
Josh @WiseStamp
Hi Chris,
Cool post! You might be interested to ease the process you described even more with WiseStamp.
WiseStamp enables you to easily include your Social Profiles as well as an updating RSS feed or any Html you desire in your signature. It will automatically inserts your signatures to Gmail, Google Apps, Yahoo etc..Check it out! there is both a Firefox and Chrome version you can test drive:
http://www.wisestamp.com
Josh and the WiseStamp Team
Mar 22nd, 2010
Reply to “Slick Looking Gmail HTML Signature”