Installing a HTML email signature in Mozilla Thunderbird is easy but creating a complex signature with remote images and links is hard. In Section 1, we will go over how to write up the HTML codes for the signature with remote images and links. If you already have the HTML codes written up for your email signature, go straight to Section 2 for instructions on how to get it installed. If you don’t know anything about HTML coding or just don’t have the time to deal with it, you may consider hiring MYDESIGNPAD to create the HTML signature for you. Please visit www.mydesignpad.com/htmlsignature/ for more info.
List of things you need before we start:
- A PC or MAC Computer
- Mozilla Thunderbird 16 and above
- A web hosting provider to host your images. I use A Small Orange: Homegrown Hosting. If you don’t have one, try using Dropbox to host your images for free.
- A HTML editor (Coda, Adobe Dreamweaver CS6 for Mac, BBEdit) to write up your codes. I use personally use Coda.
â€¢â€¢â€¢ SECTION 1: HTML SIGNATURE CREATION â€¢â€¢â€¢
Step 1.1: Design Consideration
In today’s world, we often send and receive emails across a number of different platforms: desktop computers, laptops, tablets and smart phones. So it is important to consider how and where the recipients view their emails. If most of your recipients view emails on a computer, there is more flexibility on how big or small you decide to make your signature block. If your recipients view emails on their mobile phones often than you should keep the width of your HTML signature under 320 pixels wide to be safe. Today, most modern mobile devices have a default width of 640 pixels. Rule of thumb, better to limit the width of your signature design so that it would look great on the computer as well as on mobile phones. View Sample Signatures that I have created for my clients.
Step 1.2: Signature Information
Decide what sort of information you want to display on your signature. For this demonstration, we’ll use first/last name, title, email, company name and logo and some links. Here is my signature design. You may use it as a starting point. To see the HTML codes, find “View Source” in your browser menu.
NOTE: For Outlook 2011, keep your design width under 320 pixels to prevent having to manually adjust the width of your signature each time you compose new email.
Step 1.3: Writing the HTML Codes
Before we begin, here are some basic but important notes to keep in mind as you design your signature. One major obstacle in designing HTML e-mail templates is that there are literally dozens of different e-mail clients out there (most if not all canâ€™t handle CSS and HTML like our internet browsers can) so you have to keep your design and codes as simple and straight forward as possible.
- Use tables for basic layout. The CSS float property is not supported in Gmail or Outlook, making CSS layouts impractical.
- Use inline CSS. The style tag is not supported in Gmail, and support for CSS selectors is spotty.
- Use only basic CSS properties. E-mail clients tend to be very picky about which CSS properties they support. Campaign Monitor has a great summary of CSS support in e-mail to use for reference.
- Use absolute URLs. Relative paths wonâ€™t work for an e-mail signature. So all your links need to be absolute URLs.
- Link to images. I personally dislike e-mail signature images as attachments (it makes it easy to mistaken that image as a legitimate attachment). Because of this, I recommend linking to your images by placing them on a web server rather than including them as attachments. See Step 4 for more info.
- Exclude HTML, HEAD, and BODY tags. When we get ready to save your HTML signature into Mail, make sure that only the relevant HTML is included in your document.
Step 1.4: Upload and Link Your Image
Since we want the email signature to load quickly, make sure to optimize your image with Adobe Photoshop by doing a “Save for Web.” Upload your image to the web server taking note of the public path. The public path (absolute URL) should look something like this: http://www.yourdomain.com/images/logo.gif. Copy and insert it into your HTML codes. If you don’t know how to work with a web server or don’t have one, try Dropbox. It is a great alternative and it is free. Once you have your Dropbox account set up, you can create public links to your image file.
Step 1.5: Save File and Preview
Once you have your email signature designed and laid out just as you like, save the file to your Desktop and call it “signature.html.” In my case, I named my file timcai.html. Open the “signature.html” file that you’ve just created in Safari or Firefox (not tested with other browsers).
â€¢â€¢â€¢ SECTION 2: HTML SIGNATURE INSTALLATION â€¢â€¢â€¢
Step 2.1: Put the HTML File In a Permanent Place
Save the HTML file in a folder that you will not delete or forget about on your hard drive. For example: I put my HTML file inside my Documents folder.
Step 2.2: Open Thunderbird Account Settings
Open Thunderbird. Select Tools and Account Settings from the program’s menu.
Step 2.3: Edit Settings And Add HTML Signature
Click on your account’s email address on the top left if not already.
On the first panel that opens up on the right, check the “Attach the signature from a file instead (text, HTML, or image)” To the right, click Choose, browse your hard drive for your signature file and attach it by pressing Open. Click OK in the Account Settings panel to save your changes.
Step 2.4: Testing New Signature
Test your signature by sending an email to another email address. Checking that your signature works before using it with your contacts is a sensible safeguard.
15 comments »
May 10th, 2013
I use a different method for including my signature graphic, inline base64.
1) Change default graphic paste format from png to jpg. A few clients may not display png. In Config Editor, change the value of clipboard.paste_image_type to “0”. Restart TB.
2) Paste your graphic into a new mail message, then view the HTML. There are a few TB extensions which allow HTML viewing/editing. You should see your graphic HTML look like this:
. Add that to your signature file.
Alternately, there are several image->base64 converter web apps. They may only generate the base64 code, so add the HTML tags.
This technique is perhaps best suited to small images, or your signature file will be full mostly of base64 encoding. The advantage of this method is that the image is not an attachment and should show up in modern clients. And, linking to external images often requires recipient approval for them to appear.
November 27th, 2013
Maybe the above comment has a valid method, but i prefer the one in the article. Almost every recipient these days accepts external images!
November 27th, 2013
Tom. As I may also agree with you, it is unfortunate to say that there is still a significant about of people who use email programs that cannot handle/accept external remote images or at least not very well. One of them being Outlook. Security being their reasoning.
December 14th, 2013
How can the double dash be deleted from Thunderbird default settings?
February 27th, 2014
For removing the separator use the config editor to change mail.identity.default.suppress_signature_separator from false to true. ( from http://kb.mozillazine.org/Thunderbird_:_FAQs_:_Signatures ).
On adding images to your signature :
Working with Thunderbird v24.3 in Windows 7, the only way I found to get the image truly imbedded (i.e. base64) was to drag and drop from the file manager(Explorer) into a newly composed HTML email. What I found online instructed me to use “Insert->Image”, however all of my attempts to insert images via the menu option resulted in a reference to the image file on the hard drive (when the reference entry was properly formatted). Although Thunderbird embedded the image when sending, I wanted it entirely embedded within the HTML with base64. This resulted in no image files required on the hard drive, just the resulting HTML file. Your results may vary…
April 17th, 2014
I followed your guide here and I am having one problem. When I shrink the browser down (any browser) or email client (in this case, apple mail) the text doesn’t stay aligned. The words move with the shrinking of the browser. How can I fix this?
Thanks for the tutorial!
August 25th, 2014
The link to your design is missing. Could you email me the design? I like the design :)
December 30th, 2014
When i am trying to enter the Html signature it always say Sending of message failed.
There was an error attaching view. Please check if you have access to the file.
Please assist me on this ASAP.
my no is 8376817450.
January 17th, 2015
Great tutorial. But it would be awesome if you give some email signature templates for free
July 20th, 2015
Somebody knows why base64 converted images does not shown in emails on Mac+Outlook?
August 22nd, 2015
Thank you for sharing the post but can you provide html code (i don’t know coding). I tried many things but its not coming good.
November 10th, 2015
Outlook 2007 and 2013 have a rendering engine different and NOT show any image that is not added as attachment and insert with cid. But those embedded images can be created only by a webserver and and email service sender.
November 13th, 2016
I use Thunderbird as a text editor.
Appearances (choice) are not perfect but TB do the job.
Clear, simple, compliant.
Mail client are filtering content, and it’s diffcult to know if the mail will be read in the good way.
Always use alternative … such as alt text for img.
I use “signature switch” for different purpose …
November 12th, 2018
STOP said “PC” for windows. A Mac is a PC (since “intel inside”).
November 12th, 2018
Yes, you are right. It should be referred as Windows instead of PC nowadays unlike in the past where Mac computers didn’t use intel chips. Thank you for your comment.