How to Create Complex HTML Email Signatures for Mozilla Thunderbird (Mac & PC)

Create HTML Email Signature for Mozilla Thunderbird

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

MYDESIGNPAD Signature design 2012

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

Placing HTMl file into a folder

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

Get into Thunderbird Setting

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.

Thunderbird Setting 1

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.

Thunderbird Setting 2

Step 2.4: Testing New Signature

Testing New HTML 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.

Follow responses through the RSS 2.0 feed | October 19th, 2012 | 45,884 views

7 comments »

  1. May 10th, 2013

    LaFong says:

    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.

  2. November 27th, 2013

    tom says:

    Maybe the above comment has a valid method, but i prefer the one in the article. Almost every recipient these days accepts external images!

  3. November 27th, 2013

    Tim Cai says:

    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.

  4. December 14th, 2013

    How can the double dash be deleted from Thunderbird default settings?

  5. February 27th, 2014

    Guy says:

    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…

  6. April 17th, 2014

    Alan says:

    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!

  7. August 25th, 2014

    Arun says:

    The link to your design is missing. Could you email me the design? I like the design :)

Leave a comment * Required fields.


About

  • "Sure someone else could have created a greater logo redesign for EME Lighting but I was sold on Tim’s diligence & reliability plus I love our new logo! It is fresh, symbolic of who we are while staying in line with our brand intention."

    - Bill Lee
    CEO of EME Lighting
  • "Tim is a trustworthy and effective designer. He redesigned the entire visual identity system for my company & I am extremely pleased with it. As the CEO of a company with over 3000 employees, I would recommend Timmy to anyone looking to have some serious design work done."

    - Tony Ou
    CEO of Senqiu Lighting
  • "Tim effectively designed my website and newsletter. What impressed me the most was his ability to create the images, style and design I was looking for. I highly recommend him if you are looking for someone reliable, flexible and talented."

    - Christine M.
    Owner of Acupuncturebody
  • "Tim has a great personality that makes him a pleasure to work with. He is focused, hard working & always has an attention to details. He has great curiosity and constantly strives to learn & develop himself taking his work to the next level"

    - Slava S.
    Director of Creative Services at STV
  • "Tim conceptualized original ideas & executed the design brilliantly. He always made sure the highest technical & design standards were met. I could always count on him to translate the client vision into reality."

    - Linda G.
    VP Biz Dev. at Real Estate Arts
  • "Tim is a highly talented designer. He has excellent technology skills, amazing dedication & terrific interpersonal abilities."

    - Michael S.
    AD at Real Estate Arts
  • "Timmy is a very talented designer, he is passionate and reliable, his work is always creative & on time. He’s a good person with lots of energy, which makes him a pleasure to work with."

    - Jess L.
    AD at Sudler & Hennessey
  • "Timmy got a great system for helping you figure out what you want, need & putting those ideas down into a tangible product. He has done 3 sites for me already & anyone I have recommended him to has called me back to thank me."

    - Vahram S.
    Owner of Brooklyn Body