Add your html signature to Thunderbird

email signature lost web designs
Open thunderbird, go to the account you want to add the signature to, then just choose “View settings for this account”

Below is what you should see now, you then just have to check the “Attach the signature from a file instead (text, Html, or image):”, then just choose your html signature file.
That’s it, you are all set, now you just have to write a new message, and you should see you signature appearing sat the end of your message! You will see a red dashed border around your signature, but don’t worry, none of your clients will see it on your sent emails.

Add your html signature to Microsoft Outlook

For outlook, the process will be similar to the thunderbird one, at least as simple. Just go to tools, and choose “Options”

add html signature to microsoft outlook
Choose the signature tab, there, first click the “New” to add a new signature, check the “Add signatures to all outgoing messages”, choose the html signature, and click “Apply”
Now just create a new email, and you can see your signature at the end of the message, that’s it

Add your html signature to Apple Mail

Now the trickiest one for all of you Apple lovers, mail is just my preferred email client, but i have to admit that it’s a bit complicated to add your html signature, so will try to make it as easy as it can be.

First, open mail, and go to the preferences (command+,). Go to the signatures tab, add a new signature by clicking the “+” and rename it with the name you want. Add some random text to that newly created signature.
Ok, now you just created a new signature, open the finder and go to your User/YourUserName/Library/Mail/signatures/ . You can now see a file with .webarchive extension. Don’t take too much attention to that now, but remember that we will save our html signature to that specific place just after.
Next, open your signature.html with safari, and save it (command+s), just choose the same folder you have your mail signature (User/YourUserName/Library/Mail/signatures/) and just click on the existing signature so the file you are saving will have the exact same name. Verify you can see the webarchive extension at the end and click save.
That’s it, just quit mail, and restart it. Try to type a new message and you should have your beautiful html signature at the end.
Hope this will be helpful, thanks for reading.

The post Add your html signature to your preferred email client appeared first on Lost Webdesigns - Front-end and WordPress Developer studio.

First Step : Create your signature in gimp/photoshop

email signature lost web designs
This will be very fast and easy to do, first create a new document, for this example, i will create a 310px wide and 85px height document. Then just add your logo and type some usefull informations as :

•  Name
• Position or your Title
• Phone number
• And also your website url

Step Two : Coding your chosen email signature design

<table border="0" cellpadding="0" width="300" style="table-layout:fixed">
    <tbody>
      <tr>
        <td class="logo-td" align="left" valign="middle" width="90">
          <p style="margin-right: 10px; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 14px; margin-bottom: 10px;">
            <a style="text-decoration:none" href="http://lostwebdesigns.com" class="clink logo-container">
                <img src="https://htmlsigs.s3.amazonaws.com/logos/files/000/228/393/landscape/Lostwebdesigns-120.png" alt="" border="0" class="sig-logo" height="80" width="80" style="
    margin-top: 12px;
">
            </a>
          </p>
        </td>
        <td align="left" class="content-td" nowrap="nowrap" width="210">
          <p style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 14px; color: rgb(33, 33, 33); margin-bottom: 4px; margin-top:0;"><span style="font-weight: bold; color: rgb(33, 33, 33); display: inline;" class="txt signature_name-target sig-hide">Guillaume Kanoufi</span>
          <span class="title-sep sep" style="display: inline;">/</span> <span style="color: rgb(33, 33, 33); display: inline;" class="txt signature_jobtitle-target sig-hide">Web developer</span>
          <span class="email-sep break" style="display: inline;"><br></span>
          <a class="link email signature_email-target sig-hide" href="mailto:guillaume@lostwebdesigns.com" style="color: rgb(1, 159, 210); text-decoration: none; display: inline;">guillaume@lostwebdesigns.com</a><span style="color: #212121;" class="txt signature_mobilephone-target sig-hide"></span></p>
          <p style="font-family: Georgia, Times New Roman, Courier; font-size: 12px; line-height: 14px; margin-bottom: 6px; margin-top:0;">

            <a class="link signature_website-target sig-hide" href="http://lostwebdesigns.com" style="color: rgb(1, 159, 210); text-decoration: none; display: inline;">http://lostwebdesigns.com</a>
          </p>
          <p class="social-list" style="font-size: 0px; line-height: 0; font-family: Georgia, Times New Roman, Courier;">
    <a style="text-decoration: none; display: inline;" class="social signature_twitter-target sig-hide" href="https://twitter.com/lostwebdesign"><img width="16" style="margin-bottom:2px; border:none; display:inline;" height="16" data-filename="twitter.png" src="https://s3.amazonaws.com/htmlsig-assets/round/twitter.png" alt="Twitter"></a><span style="white-space:nowrap;" class="signature_twitter-sep"><img src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="6"></span>
    <a style="text-decoration: none; display: inline;" class="social signature_linkedin-target sig-hide" href="https://fr.linkedin.com/in/kanoufiguillaume"><img width="16" style="margin-bottom:2px; border:none; display:inline;" height="16" data-filename="linkedin.png" src="https://s3.amazonaws.com/htmlsig-assets/round/linkedin.png" alt="LinkedIn"></a><span style="white-space:nowrap;" class="signature_linkedin-sep"><img src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="6"></span>
    <a style="display: inline; text-decoration: none;" class="social signature_github-target sig-hide" href="https://github.com/g-kanoufi"><img width="16" style="margin-bottom:2px; border:none; display:inline;" height="16" data-filename="github.png" src="https://s3.amazonaws.com/htmlsig-assets/round/github.png" alt="Github"></a><span style="white-space:nowrap;" class="signature_github-sep"><img src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="6"></span>
    <a style="display: inline; text-decoration: none;" class="social signature_wordpress-target sig-hide" href="https://profiles.wordpress.org/guillaume-lostweb/"><img width="16" style="margin-bottom:2px; border:none; display:inline;" height="16" data-filename="wordpress.png" src="https://s3.amazonaws.com/htmlsig-assets/round/wordpress.png" alt="Wordpress"></a><span style="white-space:nowrap;" class="signature_wordpress-sep"><img src="https://s3.amazonaws.com/htmlsig-assets/spacer.gif" width="2"></span>
</p>
</td></tr>
    </tbody>
  </table>

And the result:

So basically, this is it for the signature creation, on the next post, i will show you how to add those to your email client (thunderbird and Apple Mail)

Hope you enjoyed it and find this first tutorial interresting

The post Create an html signature for your emails appeared first on Lost Webdesigns - Front-end and WordPress Developer studio.