sim.plified.com

Chris Pollock

Chris Pollock - web developer & ecommerce entrepreneur
undivided… my thoughts on world, family, church, business, technology and Jesus Christ (all in all)

Feb 2, 2008

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
cwpollock@gmail.com

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.

  • http://web.simplifiedbuilding.com 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".

  • http://edgecrafting.blogspot.com Kim Hjortholm

    Great post, together with this add-on Gmail HTML signatures (http://userscripts.org/scripts/show/20887) I'm in sig-heaven soon

  • http://www.dianabocco.net 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

  • Alan
  • http://www.melindaschwakhofer.com Melinda

    Hey,
    Thanks for this Chris.
    Melinda

  • http://www.melindaschwakhofer.com 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.

  • Nishant

    Its not working on Reply/ Forward…

  • http://themediasoldier.com/blog Brian

    Great stuff, finally got it up and running with google apps. Thanks for the article.

  • http://www.netgiz.net netgiz

    Great idea..!!!!
    I made it in my gmail..

    Thanks again

  • CactusTriathlete

    Thanks for this page! I used it as a start to get just the sig I was looking for!

  • http://geekfg.blogspot.com 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

  • http://blankcanvasweb.com/pages/detail/id_9/n_gmail_signatures/ 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/

  • gareth

    thanks, it worked great!

  • fornetti

    I do not believe this

  • http://www.projex.com/ 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

  • http://www.jazlabs.co.uk/blog 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

  • http://link 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. ,

  • Pingback: Mailplane: signatures HTML, glissez déposez vos images dans un message et mode hors ligne, [Mac] | Descary.com

  • http://www.nzmovietimes.co.nz 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/

  • http://blankcanvasweb.com 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/

  • http://www.wisestamp.com 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 :)

  • Pingback: Gmail : comment créer une signature HTML | Descary.com

  • vulgarbulgar

    assuming you use several computers, and are possibly restricted from installing plugins and add-ons, there is another way.

    ALTERNATE SOLUTION (this works great for me)
    Essentially, this SIMPLE method adds a 'Gadget' in your GMail sidebar which displays your HTML signature through an iFrame. To embed the signature in your message, you just drag and drop it from the gadget, and into the message.

    That's it… almost as basic as using the Canned Response method, except it currently works.

    INSTRUCTIONS
    1. Save your HTML signature in a file, and upload it to a web server along with any images, etc.
    2. Edit the HTML signature URL in the xml file located here: http://vulgarbulgar.com/temp/gmail/gmail_html_signature.xml so it reflects where you uploaded your HTML file (otherwise you'll be staring at MY signature in your Gmail!).
    3. Upload the edited XML file to your web server (such as where you placed your HTML signature file).
    4. Log-in to GMail and enable 'Gadgets' in through Labs. Then, (still in GMail) go to 'Settings', 'Gadgets' tab and paste in the URL of your XML file, including the XML file extension.
    5. You should now see your signature displayed in the GMail sidebar. Whenever you want to include your signature, simply select it, and drag and drop it into your message!

    It's a sloppy workaround, but it definitely works!

    SCREENSHOTS
    http://i45.tinypic.com/4j2eci.jpg
    http://i45.tinypic.com/25txemx.jpg
    http://i50.tinypic.com/iondw6.jpg

    DISCUSSION HERE: http://www.google.com/support/forum/p/gmail/thread?tid=6a3bf8141986fa96&hl=en&fid=6a3bf8141986fa96000489a78f52844d

  • http:..blog.scorpydesign.com sumit

    now you can include html or rich text signature directly inside gmail, no need for hacks or third-party scripts. you can visit http://knol.google.com/k/sumit-roy/how-to-create-gmail-html-signature/1n8io3wwlct86/10 for some customizations tips and tricks.

  • Nilu

    Want to my Signature…. that b used my mail id

  • Pingback: Une signature d’e-mail pro | apimixweb

  • http://magicfish.net frenky
  • http://www.facebook.com/join.muzicaholick sanndy

    Thnx a ton main…gr8..:)

  • http://jilyqesod.forum24.se Ojgkihdx

Things I'm Saying

No public Twitter messages.

Follow me on Twitter

Questions I'm Asking/Answering

Stack Overflow profile for Chris at Stack Overflow, Q&A for professional and enthusiast programmers

Blogs I visit

Check out some of these blogs.

Sites I've Developed

I have been the primary developer for the sites listed below.

How to contact me

LinkedIn Profile

c.w.pollock {at} gmail . com

Follow me on Twitter

Tips

Have you found something helpful? Consider a small donation.

Things I see

Chris & AmyGenesee Valley Field LocationsLittle LeagueLittle LeagueLittle LeagueLittle LeagueLittle LeagueLittle LeagueMeridenMeridenTrip to England 2013Trip to England 2013Trip to England 2013Trip to England 2013Trip to England 2013

Subscribe

Stay updated on my meandering thoughts & activities via RSS (Syndicate).

Chris Pollock

Web Developer - proficient in both PHP and ASP.NET.
Rochester, New York

View my web developement site.

View Chris Pollock's LinkedIn profile

My Pictures

Chris & AmyGenesee Valley Field LocationsLittle LeagueLittle LeagueLittle LeagueLittle LeagueLittle LeagueLittle LeagueMeridenMeridenTrip to England 2013Trip to England 2013Trip to England 2013Trip to England 2013Trip to England 2013