In an earlier episode of the Gmail Podcast I described how to do HTML signatures using Google documents to copy and paste the content. Thanks to listener Bob, there is an easier way using Greasemonkey.
Step 1 involves installing Greasemonkey. Greasemonkey is a Firefox extension that lets you manage other scripts. You can find it at www.greasespot.net. This is a pretty straight forward download and install to Firefox so I won’t get in to the details here.
Step 2 involves downloading and installing the actual HTML script for Greasemonkey which I have included in the text of this show available on the web site.
http://gootch2.googlepages.com/htmlsig.user.js
Once Greasemonkey and the script are installed, you are ready for step 3 – Editing the signature. Right click on the monkey icon on the bottom of your Firefox screen and select “manage user scripts”. You should see a selection on the left that reads “HTML Signatures for GMail”. Highlight that by clicking on it and then click on the “Edit” button.
Here is where things get a little technical. Stick with me and we’ll get through this together… The first time you click Edit, you may be asked to locate a text editor. On Windows you can navigate to C:\Windows\Notepad.exe. On a Mac I suggest using TextEdit in the Applications folder.
Once you have chosen your text editor, you will see the actual script that does all the hard work. You don’t need to be a fluent JavaScript programmer to modify this. Just find the line about half way down that says “var htmlsignature =. Change the text between the quotes. By default it reads Edit the script to change this signature, with some HTML tags. If you are comfortable with HTML, be creative and have fun. If you aren’t, start by just modifying the text and see what happens. When you are done, save your file and close the dialog box in Firefox for the Greasemonkey script.
Remember, good email etiquette suggests you keep your signatures short. Four to six lines of text is a good rule of thumb.
To test your creation, compose a new email in Gmail. You should see your signature pop in the message body automatically. If you want to change your signature at any time, go back and repeat step 3 of this process.
That’s it for using Greasemonkey to create HTML signatures in Gmail. I’ve installed it, confgured it, use it, and love it. Although, I have to admit that I did spend most of my time tweaking the HTML to get the styles just right.
Podcast: Play in new window | Download
Comments
15 responses to “More HTML Signatures”
More work for me;-) Great this looks perfect. Is Gmail good for PDA’s
I have used Gmail on portable browsers such as PDAs and cell phones. It knows how to format. There is also a Java applet for several cell phones that works well too.
I was going to send you an email but this might work as well. i couldn’t got the grease monkey to work. I DL, got script, made simple edit to JOE JOe and it didn’t show up in Gmail. I’m going to try it again. After I finish this little project. How’s England or is it Britain?
http://members.dslextreme.com/users/zzi/gmail.png
I listened again to your pocast and noticed (see link) I put your name in the area and hit Ok. Did I put it in the right area?
-joe
If anyone is interested in adding HTML signatures to Gmail replies, I’ve modified the script. It can be found here:
http://www.opensourceopportunities.com/htmlreplysignaturesforgm.user.js
I’ll try it and let you know.
I sent James an email. I couldn’t get it to work, but I might be leaving some of the code in
Chuck – James (sounds like a game show host) I did figure it out but when I try to add a font color as I would for a web page it doesn’t show. The reply picture works good. I might have to create something. Thanks
Glad to hear you got it working.
not so fast kemosabe. It’s not working and I been checking the script and it hasn’t change from when It was working.
not working here either, but the page references for when I compose an email do not match the references that activate the greasemonkey script.
jame’s script works for me BUT you need to ensure that the html is enclosed with apostrophe’s like ‘ and not speech marks like “
Andy – Thanks for the ‘ tip. It solved my problem! Yea!
Ah. I think I understand why some of you are/were having trouble.
The variable ‘htmlsignature’ is essentially a string. The apostrophe s are used as the wrapper to indicate the start and end of the string. What makes this tricky is that the string represents HTML. Since HTML anchor and image tags often have a ‘src’ attribute that require string assignments of their own, we end up seeing quotes within quotes.
In JavaScript, if you begin a variable assignment with an apostrophe yet you need to quote a quote, then you must use a quote inside the string. Likewise, if you begin your assignment with a quote, you must use apostrophes.
Thus, the following entries are both valid:
//quote repesents the htmlsig assignment
var htmlsig=””;
//apostrophe represents the htmlsig assignment
bar htmlsig=”;
Inserting quotes inside of quotes can get quite complex. As an exercise, can anyone think of a clever way to assign a quote of a quote of a quote to a variable? Keep in mind we only have apostrophes and quotes to work with, yet this scenario is indeed possible.
and remember to click the red monkey head at the bottom of the Firefox page. also sometimes in Gmail it doesn’t load. I find by going to another link and then going back to Gmail solves the problem.