I have created an email signature in HTML and would like to use it in Outlook 2010. However, there are few things I am getting stumped on.
Some preface info:
(I included my logo, and four social media icons with links in my signature. I just uploaded the images to dropbox and linked to them in my code)
My code opened fine and looked as it should it my browser, so I saved the code to the signatures folder. I went to compose a new message and tried inserting my signature, but no dice. Outlook recognizes that the signature exists in the signature folder, but when I click on it, it isn't included in the message.
I read here that Outlook needs 3 different files (in .htm, .txt and .rtf formats). in order for a signature to work. But I'm not convinced that this is the case. To test this theory, I went to htmlsig.com and created a signature. It was just a simple html document. I downloaded the signature and saved it to the signature folder. I then opened Outlook, created a new message, and was able to insert that signature just fine.
I opened up the signature folder to see what kinds of files were in there, and the only file in there was a single Chrome HTML document.
My question:
How can I add my html file to be used as an email signature?
In case you were curious, here is my source code: (Its a work in progress)
<!DOCTYPE html>
<html>
<body>
<p style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; margin-bottom: 10px;">
<img src="https://dl.dropboxusercontent.com/s/ccjrncxekbz4k1p/Transparent%20logo.jpg?dl=0" alt="MidWest Quality Gloves" border="0" class="sig-logo" height="115" width="133">
</p>
<p class="social-list" style="font-size: 0px; line-height: 0; font-family: Helvetica, Arial, sans-serif;">
##facebook##
<a style="text-decoration: none; display: inline;" class="social signature_facebook-target sig-hide" href="https://www.facebook.com/MidwestGlove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="facebook.jpg" src="https://dl.dropboxusercontent.com/s/42pre6zyk40xa98/Facebook.jpg?dl=0" alt="Facebook">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_facebook-sep social-sep">
</span>
##instagram##
<a style="text-decoration: none; display: inline;" class="social signature_instagram-target sig-hide" href="https://www.instagram.com/midwestglove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="instagram.jpg" src="https://dl.dropboxusercontent.com/s/dmrbysqop83moq8/instagram.jpg?dl=0" alt="Instagram">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_instagram-sep social-sep">
</span>
##pinterest##
<a style="display: inline; text-decoration: none;" class="social signature_pinterest-target sig-hide" href="https://www.pinterest.com/mwglove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="pinterest.jpg" src="https://dl.dropboxusercontent.com/s/9ejjex9wzksbvy3/pinterest.jpg?dl=0" alt="Pinterest">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_pinterest-sep social-sep">
</span>
##LinkedIn##
<a style="text-decoration: none; display: inline;" class="social signature_linkedin-target sig-hide" href="https://www.linkedin.com/company/midwest-quality-gloves-inc">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="linkedin.jpg" src="https://dl.dropboxusercontent.com/s/b6ceobojyt3zjle/linkedin.jpg?dl=0" alt="linkedin">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_linkedin-sep social-sep">
</span>
</body>
</html>
Back in the time when i used outlook 2010 i remember that i had to go to the Signatures panel and create a new one with some text. Then went to:
C:\Users\MYNAME\AppData\Roaming\Microsoft\Signatures
Edited the .htm signature file that was created and replaced the content with my html code, saved and restarted outlook. Can't really explain for certain why and how.
Related
I tried to use image inside anchor tag and make it style text-decoration: none; it's reflecting on my browser but when i used it on my email signature this property (text-decoration: none;) is not working there.
<a href="#" style=" text-decoration: none; text-decoration-color: transparent;">
<img src="./" alt="img" height="60">
</a>
I implemented Add to Calendar dropdown button in a web page
<div class="dropdown" style="display: inline;">
<button target="_blank" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border: 1px;border-radius: 2px;padding: 5px 10px;max-height: 30px; background-color: #004FBF;"><i class="material-icons" style="color: #FFFFFF">event</i> <span style="font-size: 12px;font-family: RobotoMedium;color:#FFFFFF;line-height:14px;letter-spacing:0px;border:1px;position: relative;top: -8px;">Add to Calendar</span></button>
<ul class="dropdown-menu" style="margin-top: 12px;">
<li style="padding: 5px;"><a target="_blank" href="http://www.google.com/calendar/event?action=TEMPLATE&text={{encode title}}&dates={{calendarFormat sessionStartTime}}/{{calendarFormat sessionEndTime}}&details={{calendarDetail _id}}&location={{location _id}}&trp=false&output=xml" ><i class="fa fa-google" style="color: #000000;padding: 5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px; line-height: 16px;">Google</span></a></li>
<li class="addToIcalendar" style="padding: 5px;" ><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" download><i class="fa fa-apple" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px; line-height: 16px;">Apple</span></a></li>
<li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" ><img src="/images/outlook.png" height="19" width="19"><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
height: 16px;width: 45px; line-height: 16px;padding: 5px;">Outlook</span></a></li>
<li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}"><i class="fa fa-yahoo" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
height: 16px;width: 45px; line-height: 16px;">Yahoo</span></a></li>
</ul>
</div>
In a similar way, I want to create in Welcome email but it is not working as expected.
The output of the Add to Calendar in the email is
The dropdown items are by default displayed not after clicking the button. The icons are not displayed as expected
The same code in the email body is not working. Please help and thank you!
Dropdowns and really anything with a click event are very tricky to code in an email because you can't use JS, plus it may not work in all clients. My suggestion is to use something like AddEvent in particular their Direct URL method as the regular button will only work on a webpage not an email. Using the direct url method you can make a CTA in your email that will link out to a webpage created by AddEvent with info on the event and add to calendar links.
Dropdowns won't work in most emails, but there are several things you can do to explore.
First, you should attach the .ics file. Gmail for example pulls that out and makes it super easy to add to a person's calendar.
Second, you have a default button that goes to the .ics download. This will be so that people don't miss the attached .ics file, and make it clear what it is for.
Third, you may want to include direct calendar links for Gmail and Yahoo. These are specific URLs that will take a user to the webmail versions of their email. This may not be suitable from mobiles - you'll need to test the experience. But seeing as Gmail makes it really easy and visible when you attach the ics file, there's no real reason to muck around with that.
Litmus have a write up on the specific code for that (it's complicated), and some URL generation tools. https://litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails, Gmail: http://kalinka.tardate.com/, ICS generation: https://apps.marudot.com/ical/.
I'm creating an html email. On Outlook and GMail, the email format is correct. But with Google Inbox the formatting gets messed up. When I inspect the email in Inbox it shows that google adding extra code for google maps. Ive done the research on possible solutions but none seems to work. Here are two samples of what I've done from the research. I replace #ADDRESS1 with the users address before sending out the email.
<td style="width: 45%;">
<span class="" style="color: #000; font-size: 12px; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;">
<a rel="nofollow" href="#" style="text-decoration:none; color: #000; border: none;"> #ADDRESS1</a>
</span>
</td>
<td style="width: 45%;">
<span rel="nofollow" class="" style="color: #000; font-size: 12px; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; text-decoration:none;">
#ADDRESS1
</span>
</td>
When I inspect the email. This is what is added to the code:
<td style="width:45%">
<span style="color:#000;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif">
<a rel="nofollow" href="#m_-3542100051568633109_" style="text-decoration:none;color:#000;border:none"> 43478 GOLDEN MEADOW CIRCLE</a><a href="https://maps.google.com/?q=43478+GOLDEN+MEADOW+CIRCLE+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09+%0D%0A%0D%0A%0D%0A%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09+ASHBURN+VA+20147&entry=gmail&source=g" data-saferedirecturl="https://www.google.com/url?q=https://maps.google.com/?q%3D43478%2BGOLDEN%2BMEADOW%2BCIRCLE%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2509%2BASHBURN%2BVA%2B20147%26entry%3Dgmail%26source%3Dg&source=gmail&ust=1523385602990000&usg=AFQjCNHtFzuxkGzIBkMPomWrrIXWB_iz_w">
</a></span><a href="https://maps.google.com/?q=43478+GOLDEN+MEADOW+CIRCLE+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09+%0D%0A%0D%0A%0D%0A%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09+%0D%0A%0D%0A%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09+%0D%0A%09%09%09%09%09%09%09%09%09+ASHBURN+VA+20147&entry=gmail&source=g" data-saferedirecturl="https://www.google.com/url?q=https://maps.google.com/?q%3D43478%2BGOLDEN%2BMEADOW%2BCIRCLE%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%250D%250A%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2B%250D%250A%2509%2509%2509%2509%2509%2509%2509%2509%2509%2BASHBURN%2BVA%2B20147%26entry%3Dgmail%26source%3Dg&source=gmail&ust=1523385602990000&usg=AFQjCNHtFzuxkGzIBkMPomWrrIXWB_iz_w">
</a></td>
Any suggestions would be appreciated
Update
Just to clear it up. I don't want Google to add map links to my addresses. Because Google is adding the maps, its messing up my formatting in Google Inbox. In fact I don't want any map information at all
When working on an HTML email signature, I wrote basic HTML for four linked images.
<a href="http://www.dwightfund1.com">
<img src="https://dwight.app.box.com/representation/file_version_28131628265/image_2048/1.png?shared_name=x116s7oza2gydr9tmlqgv7oad349y885" width="40" height="40" alt="capture"/>
</a>
<a href="http://www.dwightfund2.com">
<img src="https://dwight.app.box.com/representation/file_version_28131627701/image_2048/1.png?shared_name=97bbaqds6wg6up5ip12a5t55lts7mnd4" width="40" height="40" alt="capture" border="0">
</a>
<a href="http://www.dwightfund3.com">
<img src="https://dwight.app.box.com/representation/file_version_28131629073/image_2048/1.png?shared_name=w9ucedcax4fmcw3lelwl9rhgdbhyqvo4" width="40" height="40" alt="capture"/>
</a>
<a href="http://www.dwightfund4.com">
<img src="https://dwight.app.box.com/representation/file_version_28131628619/image_2048/1.png?shared_name=a3t36efnz0cs3kmcza2an0wehrnczu48" width="40" height="40" alt="capture"/>
</a>
When I view the code in my browser these weird lines appear next to the images like below:
Why are these lines there any how can I remove them?
They could be the link's default text-decoration: underline in the spaces between the images.
If this is for an E-Mail client (that don't support CSS style sheets), you'll probably have to do something like
<a style="text-decoration: none" href="http://www.dwightfund4.com">
This border is meant to inform users that the image is a link.
a{
text-decoration: none;
}
img{
border-style: none;
}
You can remove it with color of a element:
http://codepen.io/fedojo/pen/NqGKNX
for example :<a href="http://www.dwightfund1.com" style="color: #fff">
My code is:
<span style="text-align:center; width:80px; display:inline-block;">
<a href="#" target="_blank" style="text-decoration:none;">
img here
<span style="font-size: 13px; color: #301985; display:block; top:5px; position:relative;">content</span>
</a>
</span>
<span style="text-align:center; width:80px; display:inline-block;">
<a href="#" target="_blank" style="text-decoration:none;">
img here
<span style="font-size: 13px; color: #301985; display:block; top:5px; position:relative;">content</span>
</a>
</span>
Problem is:
It is working good in all mail. In outlook 2007 it displayed like this image.
I want content is displayed the below the image. But it is not working in outlook 2007.
I found this url https://www.campaignmonitor.com/css/
Display, float property are not working on outlook 2007. Any other solution to acheive my design?
use <div> in place of <span> I hope it will help...