There are plenty of Gmail signature setup guides available online. But when you are creating finished, HTML-coded email signatures with all of the styles, hacks, and tweaks which make it look the same in most email-clients, a simple Gmail setup tutorial is not going to cut it.
What happens in Gmail (and many other email clients) when you paste the signature into the signature box, is that things are changed at the code level. While Gmail is awesome in that it keeps a good visual representation of the signature you created, some of the details and extra features are lost.
Here at Texas Creative, we go the extra mile to create custom email signatures, fully-coded with tweaks and adjustments so that the signature retains its intended design in all popular email clients. For example, to force links in the designed signature to not be displayed as highlighted in blue with underline in mobile or Outlook email clients, we add specific code in each link to prevent the default, thus retaining the nicer styling despite the fact that they are links. But when pasting directly into the Gmail editor, all that extra code gets filtered out, so without an option in the editor to enter the raw code, it's very difficult to implement those tweaks. Not being willing to settle for what’s given by Gmail, I discovered a way to work around the editor and load raw code into the signature box.
Formal warning - this is not for the faint of heart… as we are basically hacking the way Gmail loads the signature to the system. It may require a few tries to get it to load right. Also, some basic knowledge of HTML code will be really helpful.
Setup:
STEP 1
Go to your Gmail Settings. Top-right gear icon button, then select “settings” from the drop-down.
Settings should take you directly to your “General” tab.
STEP 2
Now just scroll all the way down to the “Signature:” section.
~ Now, for those who aren’t concerned with keeping the perfection of your code, all you would have to do is copy your signature from an HTML page or word editor as it looks and paste it on the signature editor box. But if you want to go the extra mile, continue to step 3 ~
STEP 3
Here is the extra mile: Now, instead of just copying the email signature design directly into that editor, we are going inject the custom designed signature raw HTML code into the editor’s backend HTML markup so it doesn’t get processed in the pasting process.
In the signature editor window, right+click the edit empty box area and select “Inspect” from the drop-down window.
STEP 4
Your inspector will open, and if you are lucky it will take you directly to the html tags that you will need to edit. If not, life will be hard, but not impossible. Search in the code for the <div aria-label="Signature" > tag. It will have other attributes in it, but don’t worry about that.
In Chrome, Firefox, Safari and IE10+ Browsers: right-click the tag in the inspector window and select “Edit as HTML” from the popup box.
Next, you will edit the HTML code inside the tag like so:
<div aria-label="Signature" … > ← Leave the original parent div intact <br> ← Note: notice the new line tag, it will come in useful later. -- PASTE YOUR CUSTOM SIGNATURE RAW HTML CODE HERE -- </div>
STEP 5
Almost done...Follow this exactly step by step:
- Click away from the inspector and go back to the editor window. You should see your signature on the window.
- Click at the top of your signature where your first “<br>” (empty line) should be.
- Press “Enter” on your keyboard to create another line (now there are two lines before your signature).
- Next press “Back” or “Delete” on your keyboard so there is only one line before your signature again. (This is just to trigger the save button to turn on.)
- Scroll down to the bottom click on the “Save Changes” button.
STEP 6
Test your new signature by creating a new message. That’s all.
Still reading? Check out some of our other blogs for more tips, tricks, and professional insights.
Happy Coding! ;)