Easily Create and Edit your Gmail Signature

Gmail allows you to have an HTML markup e-mail signature.  That means you can get pretty fancy with how you sign your e-mails.  The only problem is that the area where you edit that signature does not have HTML edit tools and you can’t cut/paste HTML directly into that box.  You CAN, however, cut/paste from a Web page into the e-mail signature box and all of your HTML markup (tables, bold, links, etc) all come through.

After a little work, here’s what worked for me to create/edit my own e-mail signature for Gmail.

Take the code below and cut/paste into your favorite text editor.  I recommend TextWrangler.  Edit the information to fit your own needs and then save the file as something like emailsig.html.

Next, open your browser and do a File Open and open emailsig.html to see how it looks in your browser.  Go back and forth making changes in TextWrangler and reloading in your browser until your signature looks the way you want it to.  Highlight the page and hit “Copy”.

Once you have the perfect signature, open Gmail.

There are a couple places on the Internet to help create an e-mail signature.  I recommend Hubspot.  You can cut/paste directly from their interface into your G-mail signature using the steps above.  However, if you want to make changes, first cut/paste into a Web editor (I actually used a Google Sites page and then viewed what I pasted as HTML) and then paste the HTML source into your text editor like TextWrangler and proceed as above.

Here’s the HTML code behind my e-mail signature.  I’ve put in some comments to make it easier to read:

<br class="Apple-interchange-newline">
<br style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
</head>
<table style="font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; color: rgb(68, 68, 68); font-family: sans-serif; font-size: 15px; line-height: 22.5px; border-color: rgb(255, 255, 255); height: 128px; border-collapse: collapse !important;" width="100%" bgcolor="#ffffff" height="128">
<!-- Make 2 Columns - Left column 25% and Right 75% -->
<colgroup> 
<col width="25%">
<col width="75%">
</colgroup>
<tbody>
<!-- First Row -->
<tr>
<!-- Left Column -->
<td rowspan="3" style="font-family: arial, sans-serif; margin: 0px;">
<center>
<!-- Headshot -->
<img src="https://ci6.googleusercontent.com/proxy/dcrtGRPWgXphkJ2lkVCNydwN83HjP4yqyCKIwaw8cIp57Oh3pyeMaWVGxLVdRkawE9-1WEWaDJF0ZSmveRUqV5MyYyxHogwgjXNnkSJcSNyxiMYo35WfsukCELovoEADAvZybWxpIHtvXg=s0-d-e1-ft#https://info.onsip.com/hs-fs/hubfs/images/about-us-mike.jpg?t=1456253491612&amp;width=70" alt="Mike Oeth" title="Mike Oeth" class="CToWUd" style="vertical-align: bottom; max-width: 70px; width: 70px;" width="70" vspace="0" align="middle">
</center>
</td>
<!-- Right Column -->
<!-- Name -->
<td style="font-family: arial, sans-serif; margin: 0px;">Mike Oeth</td>
</tr>
<tr>
<!-- Title -->
<td style="font-family: arial, sans-serif; margin: 0px;"><span style="font-size: 12px;">CEO &amp; Co-Founder</span></td>
</tr>
<tr>
<!-- Phone Number -->
<td style="font-family: arial, sans-serif; margin: 0px;">
<span style="font-size: 12px;">O:<span>&nbsp;</span>
<a href="tel:(215)%20701-3051" value="+12157013051" target="_blank" style="color: rgb(17, 85, 204);">215 701 3051</a><span>&nbsp;</span>| C:<span>&nbsp;</span>
<a href="tel:(215)%20630-3498" value="+12156303498" target="_blank" style="color: rgb(17, 85, 204);">215 630 3498</a><span>&nbsp;</span>|&nbsp;
<a href="https://insta.onsip.com/phone/call/?n=Mike%20Oeth&amp;a=mike%40junctionnetworks.com" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://insta.onsip.com/phone/call/?n%3DMike%2520Oeth%26a%3Dmike%2540junctionnetworks.com&amp;source=gmail&amp;ust=1502460788895000&amp;usg=AFQjCNEL1XU3miFqFSH0YlxonTcPOTx0BQ" style="color: rgb(17, 85, 204); border-bottom-style: none;">1-800-801-3381, ext 7001
</a>
</span>
</td>
</tr>
<tr>
<td style="font-family: arial, sans-serif; margin: 0px;">
<!-- Company Logo -->
<center>
<a href="http://www.onsip.com/" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=http://www.onsip.com/&amp;source=gmail&amp;ust=1502460788895000&amp;usg=AFQjCNElngCok7d6nThJ5gJV5kqDk-_4UQ" style="color: rgb(17, 85, 204); border-bottom-style: none;">
<img src="https://ci5.googleusercontent.com/proxy/S6o9XSUvUAUbgu6H-MsRXIm1tKI_QcynqW80S-TxjhvvKfZ8_9oJaHPWZTwXK0nVnTbaqzo1bVzIC6NMy1v235kwZqie1LYbcdUkdfRAsv-CqEjZg9cGwz17QU7sGhozXjJd2qkDBUIA=s0-d-e1-ft#https://info.onsip.com/hs-fs/hubfs/template/logo-onsip.png?t=1456253491612&amp;width=75" alt="onsip" title="onsip" class="CToWUd" style="vertical-align: bottom; max-width: 75px; width: 75px; margin: 10px auto 0px; display: block; height: 24px;" width="75" align="middle" height="24">
</a>
</center>
</td>
<td style="font-family: arial, sans-serif; margin: 0px;">
<!-- Social Links -->
<!-- Facebook -->
<a href="https://www.facebook.com/onsip" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://www.facebook.com/onsip&amp;source=gmail&amp;ust=1502460788895000&amp;usg=AFQjCNFG99Gibmx1Kx6VMTzlkw4bVykmww" style="color: rgb(17, 85, 204); border-bottom-style: none;">
<img src="https://ci6.googleusercontent.com/proxy/s9RTBjBVVZghZqDVkQV5iGVvblHmZQYaISYu1rlJn1VmqaCLwjNz2fSuKay3LStxTGSPkUnPjKsRZUtQgoPFyCxXDoI_NbAVy-eY52b1LmszDAAKSmqhYSfDDTx59YpV3iwNBhX4a9lNOvzWCvClwQ=s0-d-e1-ft#https://info.onsip.com/hs-fs/hubfs/images/facebook_socialicon.png?t=1456253491612&amp;width=25" alt="facebook" title="facebook" class="CToWUd" style="vertical-align: bottom; max-width: 25px; width: 25px; margin: 5px 5px 0px 0px;" width="25">
</a>
<!-- Twitter -->
<a href="https://twitter.com/onsip" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://twitter.com/onsip&amp;source=gmail&amp;ust=1502460788895000&amp;usg=AFQjCNFldwhMn-sbScvpxknWi3u-0BCA0A" style="color: rgb(17, 85, 204); border-bottom-style: none;">
<img src="https://ci6.googleusercontent.com/proxy/y6lQ51d7SmUfS20cqH8Ubgmgi3YDJj_vCYH7r6fWGE8M1IQ5nuS2ulLio-GuYBeoC5V9oAnIrlZcM9bc3ASXgWW-YOwoeuyi6LYMV-tWiVc2U_dKFs9d8aX6NJ1GJOgJeOI2iw0Rz4I=s0-d-e1-ft#https://info.onsip.com/hs-fs/hubfs/images/twittericon.png?t=1456253491612&amp;width=25" alt="twitter" title="twitter" class="CToWUd" style="vertical-align: bottom; margin: 5px 5px 0px; max-width: 25px; width: 25px;" width="25" hspace="5">
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/in/mikeoeth" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://www.linkedin.com/in/mikeoeth&amp;source=gmail&amp;ust=1502460788895000&amp;usg=AFQjCNGTqHrexYJ_kovJ4sXYQ2kOW_735Q" style="color: rgb(17, 85, 204); border-bottom-style: none;">
<img src="https://ci5.googleusercontent.com/proxy/CX1yu3na5GTSrDImXz06-oeh5Q6U05MRis3MhyLrZ4Iyj9tEGzK0SC9GbnUyCg16URxQzpS589Ujtly9ETFNMKd3PUbdiMCmo888_Ce-QcMCNKJw6j69DChVjNGBaFcRZGqKQizRv7cvOG6AZef3CQ=s0-d-e1-ft#https://info.onsip.com/hs-fs/hubfs/images/linkedin_socialicon.png?t=1456253491612&amp;width=25" alt="linkedin_socialicon.png" title="linkedin_socialicon.png" class="CToWUd" style="vertical-align: bottom; margin: 5px 5px 0px; max-width: 25px; width: 25px;" width="25" hspace="5">
</a>
<!-- OnSIP Blog -->
<a href="http://www.onsip.com/blog" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=http://www.onsip.com/blog&amp;source=gmail&amp;ust=1502460788895000&amp;usg=AFQjCNEZogQZAnQxxN1TsA1nMiSoKiUPmw" style="color: rgb(17, 85, 204); border-bottom-style: none;">
<img src="https://ci4.googleusercontent.com/proxy/pHUntOAAwOpRN6S-GBU6l1rfhXoURkZODDUj62K82EhygGhjBTDhnN1JJ4lEkElG6Z9qIGX12cSxUj3rvyuUmKsskkW4O8S5Qj7_FpIt8mC6N-6eOsU7qGOFAMpShANyENUZi4e2u8V7eIl7jDGrsQ=s0-d-e1-ft#https://info.onsip.com/hs-fs/hubfs/images/blogfeed_socialicon.png?t=1456253491612&amp;width=25" alt="blog" title="blog" class="CToWUd" style="vertical-align: bottom; margin: 5px 5px 0px; max-width: 25px; width: 25px;" width="25" hspace="5">
</a>
</td>
</tr>
</tbody>
</table>
<hr>
OnSIP Direct Call Links:<a href="https://app.onsip.com/app/call?a=acdsalesqueuebhr%40junctionnetworks.com&amp;n=OnSIP+Sales" target="_blank" style="color: rgb(17, 85, 204);">Sales</a>,<a href="https://app.onsip.com/app/call?a=acdsupportqueuebhr%40junctionnetworks.com&amp;n=OnSIP+Support" target="_blank" style="color: rgb(17, 85, 204);">Support</a>, <a href="https://app.onsip.com/app/call?a=billing.bhr%40junctionnetworks.com&amp;n=OnSIP+Billing" target="_blank" style="color: rgb(17, 85, 204);">Billing</a>
<P>
Have you tried the new<span>&nbsp;</span><a href="https://support.onsip.com/hc/en-us/articles/217065557-The-OnSIP-App" target="_blank" style="color: rgb(17, 85, 204);">OnSIP Desktop app</a>?

Image Source: The Met Open Access.  Tughra (Official Signature) of Sultan Süleiman the Magnificent (r. 1520–66).