I have created a button in HTML for outlook with CSS styling:
<!--Join Meeting Button-->
<tr>
<td colspan="2" align="center">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${meetingUrl}" style="height:50px;v-text-anchor:middle;width:250px;" arcsize="50%" stroke="f" fillcolor="#ad122a">
<w:anchorlock/>
<center>
<![endif]-->
Join Meeting
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</td>
</tr>
And it looks fine in the draft email, but when I send the email, the Join Meeting Button is displayed as an image, as if converted, and the link does not work. The link works fine in the draft email using CTRL + Click.
Is there a way to prevent this?
Outlook desktop apps convert buttons into image.
please your following code for perfect style of button on every email client.
<!--[if mso]><a href="${meetingUrl}" target="_blank">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" stripoVmlButton href="${meetingUrl}"
style="height:41px;v-text-anchor:middle;width:131px;" arcsize="61%" stroke="f" fillcolor="#ad122a">
<w:anchorlock></w:anchorlock>
<center style='color:#ffffff;font-family:arial, "helvetica neue", helvetica, sans-serif;font-size:14px;font-weight:700;'>Join Meeting</center>
</v:roundrect></a>
<![endif]-->
<!--[if !mso]><!-- --><span class="msohide es-button-border" style="border-radius: 0px; border-width: 0px; background:#ad122a; border-color: #ad122a;"><a class="es-button" href="${meetingUrl}" style="font-size: 17px; font-weight: bold; border-radius: 25px;" target="_blank">Join Meeting</a></span>
<!--<![endif]-->
Or you can use this site to create buttons https://buttons.cm/
Related
I have an template email, it actually working with Outlook from Office 2013, 2019 and 365 but i have an issue with Outlook Exchange 2016 : The <!--[if mso]> condition is not apply.
This the the code that is not apply :
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: 'Montserrat', sans-serif;
color: black !important;
}
</style>
<![endif]-->
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
<v:fill type="tile" size="100%,100%" src="cid:{{ myBackground }}" color="#fff"/>
</v:background>
<![endif]-->
I don't understand why this doesn't work on this specific version of outlook :(
Does anyone has the answer ?
I built an HTML block with a personalized code in the email and I would like to know why the text is displayed twice when opening the email in Outlook from a desktop device, only when using Windows OS.
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:42px;v-text-anchor:middle;width:218px;" arcsize="5%" strokecolor="#ffffff" fillcolor="#ffffff">
<w:anchorlock/>
<center style="color:#1672b9;font-family:'Noto Sans', sans-serif;font-size:12px; letter-spacing:1.5px; font-weight:bold;border-radius: 15px;">Personalized code</center>
</v:rect>
<![endif]-->
<a style="background-color:#ffffff;border-radius: 15px;color:#1672b9 !important;display:inline-block;font-family:'Noto Sans', sans-serif;font-size:12px;line-height:44px;text-align:center;text-decoration:none;width:100%;-webkit-text-size-adjust:none;mso-hide:all; font-weight:bold; letter-spacing:3px;">Personalized code</a>
Use this:
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:42px;v-text-anchor:middle;width:218px;" arcsize="5%" strokecolor="#ffffff" fillcolor="#ffffff">
<w:anchorlock/>
<center style="color:#1672b9;font-family:'Noto Sans', sans-serif;font-size:12px; letter-spacing:1.5px; font-weight:bold;border-radius: 15px;">Personalized code</center>
</v:rect>
<![endif]-->
<![if !mso]>
<a style="background-color:#ffffff;border-radius: 15px;color:#1672b9 !important;display:inline-block;font-family:'Noto Sans', sans-serif;font-size:12px;line-height:44px;text-align:center;text-decoration:none;width:100%;-webkit-text-size-adjust:none;mso-hide:all; font-weight:bold; letter-spacing:3px;">Personalized code</a>
<![endif]>
See also: "How do I make an “else” in an IE HTML conditional?".
Using html code along with VML(for background images) to send newsletters to the customers. Before using VML inline CSS worked fine, but when VML is added to the code, it stopped working in OUTLOOK.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8" name="viewport" content="width:50" />
<title> Transaction Alert from KVB </title>
</head>
<body>
<div>
<table style="border:1px solid black" width="600" height="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<!-- Backup background color is #DDDDDD -->
<td style="background-image: url('http://www.kvbsmart.com/mail_img/bg.jpg');" background="http://www.kvbsmart.com/mail_img/bg.jpg" valign="top" align="left">
<!--[if gte mso 9]>
<v:rect style="width:600px;height:600px;" strokecolor="none">
<v:fill type="tile" src="http://www.kvbsmart.com/mail_img/bg.jpg" color="#7bceeb"/></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:600px;height:600px;">
<![endif]-->
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/1111.png" width="600" height="300"></center>
</a>
<div STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;">
<center>
<font face="Verdana">A.MESSAGE</center>
</font>
</div>
<p>
<font face="Verdana" size="1">
<center>Note: If the transaction is not done by you, please contact our Helpline at the earliest.</font>
</center>
</p>
<br><br><br><br>
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/mpay_new.png" width="600" height="130"></center>
</a>
<br>
<br>
<p>
<font face="Verdana">With Regards,</font>
</p>
<p>
<font face="Verdana">Karur Vysya Bank.</font>
</p>
<hr width=1 00%>
<br>
<div style="max-width:auto; word-wrap:break-word;">
<font face="Verdana">This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable).</font>
</div>
<p>
<font face="Verdana"> This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable)</font>
</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
</div>
<body>
</html>
I am especially getting issue at this block
<div STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;">
<center>
<font face="Verdana">A.MESSAGE</center>
</font>
</div>
Please help me out, I am adding the screenshot for your reference
I have solved the problem by removing the div tag and replacing it with a table
I am providing the complete code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8" name="viewport" content="width:50"/>
<title> Transaction Alert from KVB </title>
</head>
<body>
<div>
<table style="border:1px solid black" width="600" height="800" align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<!-- Backup background color is #DDDDDD -->
<td style="background-image: url('http://www.kvbsmart.com/mail_img/bg.jpg');" background="http://www.kvbsmart.com/mail_img/bg.jpg" valign="top" align="left" >
<!--[if gte mso 9]>
<v:rect style="width:600px;height:900px;" strokecolor="none">
<v:fill type="tile" src="http://www.kvbsmart.com/mail_img/bg.jpg" color="#7bceeb"/></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:600px;height:900px;z-index:3;">
<v:textbox inset="0,0,0,0">
<![endif]-->
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/1111.png" width="600" height="300"></center>
</a>
<!------THIS IS THE PART WHERE I HAVE DONE THE MODIFICATION-->
<table width = "100%" border-collapse: separate; border-spacing: 0;>
<td STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;">
<center><font face="Verdana">A.MESSAGE</center></font></td>
</table>
<p><font face="Verdana" size ="1"><center>Note: If the transaction is not done by you, please contact our Helpline at the earliest.</font></center></p>
<br><br><br><br>
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/mpay_new.png" width="600" height="130"></center>
</a>
<br>
<br>
<p><font face="Verdana">With Regards,</font></p>
<p><font face="Verdana">Karur Vysya Bank.</font></p>
<hr width = 100%>
<br>
<div style="max-width:auto; word-wrap:break-word;"><font face="Verdana">This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable).</font></div>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td></tr>
</table></div>
<body></html>
I'm coding up HTML emails and am trying to get a background banner image to render somewhat correctly across Outlook 2010, 11, 13, 16. Using this currently - http://backgrounds.cm/.
My issue is that Outlook 2010 and 2013 seem to zoom in on the background image.
My code:
<td background="https://someKitten.jpg" width="600" height="185" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:185px;">
<v:fill type="tile" src="https://someKitten.jpg" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
this seems to be a known issue but I'm not coming across any fixes. https://www.campaignmonitor.com/forums/topic/7953/bulletproof-background-images-enlarging-in-outlook/
and...fixed.
for anyone else struggling with this issue, set fill type to "frame"
<v:fill type="frame" src="https://someKitten.jpg" />
I used to help design the emails at my old company but the digital marketer I used to use a website called 'backgrounds' to make one cell have a background that we could put text over.
What would happen is, i would slice the cell up in photoshop/illustrator that needed to have the text on the background and he would upload it to this website and it would give him the html for the link and then he would paste it into the email. I have an example of the code below but have no under idea what the website is that he previously used
<!--Cell 4--><td background="cell_04.jpg" style="display:block; font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px" bgcolor="#000000" width="214" height="181" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:214px;height:181px;">
<v:fill type="tile" src="cell_04.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">
<div style="font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px">
<![endif]-->
<div class="auto-style1" style="font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px">
<br>
Give someone you love the perfect Valentine’s Day gift with a beautiful and contemporary Spaceform piece engraved with your own words.
<br>
<br>
The stunning quality of our pieces means they can be treasured forever and will always be a special reminder of how much you love someone.<br>
<br>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
Does anyone know of the website he used or how this could be done better, remember we were not coders at the time of creating this code.
use background inside the style
background=url("path to image");
<td style="background=url("cell_04.jpg");display:block; font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px" bgcolor="#000000" width="214" height="181" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:214px;height:181px;">
<v:fill type="tile" src="cell_04.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">
<div style="font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px">
<![endif]-->
<div class="auto-style1" style="font-family:Tahoma, Verdana, Segoe, sans-serif; font-size:12px; color:#000000; line-height:14px">
<br>
Give someone you love the perfect Valentine’s Day gift with a beautiful and contemporary Spaceform piece engraved with your own words.
<br>
<br>
The stunning quality of our pieces means they can be treasured forever and will always be a special reminder of how much you love someone.<br>
<br>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>