Skip to content

Commit ff76e51

Browse files
eladnavaeladnava
authored
Merge pull request #34 from charlie-s/master
Use v:roundrect for actionItems in Outlook.
2 parents 59f7305 + dc5c2ed commit ff76e51

File tree

2 files changed

+79
-37
lines changed

2 files changed

+79
-37
lines changed

‎themes/cerberus/index.html

+62-31
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
<!-- Web Font / @font-face : BEGIN -->
2020
<!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->
21-
21+
2222
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
2323
<!--[if mso]>
2424
<style>
@@ -27,14 +27,14 @@
2727
}
2828
</style>
2929
<![endif]-->
30-
30+
3131
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
3232
<!--[if !mso]><!-->
3333
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
3434
<!--<![endif]-->
3535

3636
<!-- Web Font / @font-face : END -->
37-
37+
3838
<!-- CSS Reset -->
3939
<style type="text/css">
4040

@@ -47,25 +47,26 @@
4747
height: 100% !important;
4848
width: 100% !important;
4949
}
50-
50+
5151
/* What it does: Stops email clients resizing small text. */
5252
* {
5353
-ms-text-size-adjust: 100%;
5454
-webkit-text-size-adjust: 100%;
55+
font-family: sans-serif;
5556
}
56-
57+
5758
/* What is does: Centers email on Android 4.4 */
5859
div[style*="margin: 16px 0"] {
5960
margin:0 !important;
6061
}
61-
62+
6263
/* What it does: Stops Outlook from adding extra spacing to tables. */
6364
table,
6465
td {
6566
mso-table-lspace: 0pt !important;
6667
mso-table-rspace: 0pt !important;
6768
}
68-
69+
6970
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
7071
table {
7172
border-spacing: 0 !important;
@@ -74,9 +75,9 @@
7475
Margin: 0 auto !important;
7576
}
7677
table table table {
77-
table-layout: auto;
78+
table-layout: auto;
7879
}
79-
80+
8081
/* What it does: Uses a better rendering method when resizing images in IE. */
8182
img {
8283
-ms-interpolation-mode:bicubic;
@@ -89,24 +90,24 @@
8990
}
9091

9192
.branding a {
92-
color: inherit;
93+
color: #fff;
9394
text-decoration:none;
9495
}
9596

9697
.copyright a {
97-
color:#888888;
98+
color:#888888;
9899
text-decoration:underline;
99100
}
100101

101102
.email-logo {
102103
max-height: 50px;
103104
}
104-
105+
105106
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
106107
.yshortcuts a {
107108
border-bottom: none !important;
108109
}
109-
110+
110111
/* What it does: A work-around for iOS meddling in triggered links. */
111112
.mobile-link--footer a,
112113
a[x-apple-data-detectors] {
@@ -157,12 +158,30 @@
157158
font-size: 15px;
158159
line-height: 18px;
159160
}
160-
161+
162+
/* Button */
163+
.button-td {
164+
border-radius: 3px;
165+
text-align: center;
166+
}
167+
168+
.button-a {
169+
border-radius: 3px;
170+
display: block;
171+
font-family: sans-serif;
172+
font-size: 13px;
173+
font-weight: bold;
174+
line-height: 1.1;
175+
padding: 15px;
176+
text-align: center;
177+
text-decoration: none;
178+
}
179+
161180
</style>
162-
181+
163182
<!-- Progressive Enhancements -->
164183
<style>
165-
184+
166185
/* What it does: Hover styles for buttons */
167186
.button-td,
168187
.button-a {
@@ -180,7 +199,7 @@
180199
<body width="100%" bgcolor="#222222" style="Margin: 0;" dir="<%- textDirection %>">
181200
<center style="width: 100%; background: #222222;">
182201

183-
<!--
202+
<!--
184203
Set the email width. Defined in two places:
185204
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
186205
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
@@ -207,10 +226,10 @@
207226
</tr>
208227
</table>
209228
<!-- Email Header : END -->
210-
229+
211230
<!-- Email Body : BEGIN -->
212231
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="100%" style="max-width: 600px;">
213-
232+
214233
<!-- Hero Image, Flush : BEGIN -->
215234
<tr>
216235
<td>
@@ -294,16 +313,28 @@ <h3 style="font-family: sans-serif; font-size: 26px; padding: 40px 10px 0; text-
294313
<% action.forEach(function (actionItem) { -%>
295314
<p><%- actionItem.instructions %></p>
296315
<br />
297-
<!-- Button : Begin -->
298-
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
299-
<tr>
300-
<td style="border-radius: 3px; background: <%- actionItem.button.color %>; text-align: center;" class="button-td">
301-
<a href="<%- actionItem.button.link %>" target="_blank" style="background: <%- actionItem.button.color %>; border: 15px solid <%- actionItem.button.color %>; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
302-
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff"><%- actionItem.button.text %></span>&nbsp;&nbsp;&nbsp;&nbsp;
303-
</a>
304-
</td>
305-
</tr>
306-
</table>
316+
<!-- Button : Begin -->
317+
<!--[if mso]>
318+
<center>
319+
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="<%- actionItem.button.link %>" style="height: 45px; v-text-anchor: middle; width: 200px;" arcsize="10%" stroke="f" fillcolor="<%- actionItem.button.color %>">
320+
<w:anchorlock/>
321+
<center style="color: #ffffff; font-family: sans-serif; font-size: 13px; font-weight: bold;">
322+
<%- actionItem.button.text %>
323+
</center>
324+
</v:roundrect>
325+
</center>
326+
<![endif]-->
327+
<![if !mso]>
328+
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
329+
<tr>
330+
<td style="background-color: <%- actionItem.button.color %>;" class="button-td">
331+
<a href="<%- actionItem.button.link %>" target="_blank" style="background-color: <%- actionItem.button.color %>; border-color: <%- actionItem.button.color %>;" class="button-a">
332+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff"><%- actionItem.button.text %></span>&nbsp;&nbsp;&nbsp;&nbsp;
333+
</a>
334+
</td>
335+
</tr>
336+
</table>
337+
<![endif]>
307338
<br />
308339
<!-- Button : END -->
309340
<% }) -%>
@@ -314,7 +345,7 @@ <h3 style="font-family: sans-serif; font-size: 26px; padding: 40px 10px 0; text-
314345
</td>
315346
</tr>
316347
<!-- 1 Column Text + Button : BEGIN -->
317-
348+
318349
<!-- 2 Even Columns : BEGIN -->
319350
<tr>
320351
<td>
@@ -342,7 +373,7 @@ <h3 style="font-family: sans-serif; font-size: 26px; padding: 40px 10px 0; text-
342373

343374
</table>
344375
<!-- Email Body : END -->
345-
376+
346377
<!-- Email Footer : BEGIN -->
347378
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
348379
<tr>

‎themes/default/index.html

+17-6
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,6 @@
203203
.button {
204204
display: inline-block;
205205
width: 200px;
206-
background-color: #3869D4;
207206
border-radius: 3px;
208207
color: #ffffff;
209208
font-size: 15px;
@@ -311,16 +310,28 @@ <h1><%- title %></h1>
311310
<!-- Action -->
312311
<% if (locals.action) { %>
313312
<% action.forEach(function (actionItem) { -%>
314-
<p><%- actionItem.instructions %></p>
315-
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
313+
<p><%- actionItem.instructions %></p>
314+
<!--[if mso]>
315+
<center>
316+
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="<%- actionItem.button.link %>" style="height: 45px; v-text-anchor: middle; width: 200px;" arcsize="10%" stroke="f" fillcolor="<%- actionItem.button.color %>">
317+
<w:anchorlock/>
318+
<center style="color: #ffffff; font-family: sans-serif; font-size: 15px;">
319+
<%- actionItem.button.text %>
320+
</center>
321+
</v:roundrect>
322+
</center>
323+
<![endif]-->
324+
<![if !mso]>
325+
<table class="body-action" align="center" cellpadding="0" cellspacing="0">
316326
<tr>
317327
<td align="center">
318-
<div>
319-
<a href="<%- actionItem.button.link %>" class="button" style="background-color: <%- actionItem.button.color %>" target="_blank"><%- actionItem.button.text %></a>
320-
</div>
328+
<a href="<%- actionItem.button.link %>" class="button" target="_blank" style="background-color: <%- actionItem.button.color %>;">
329+
<%- actionItem.button.text %>
330+
</a>
321331
</td>
322332
</tr>
323333
</table>
334+
<![endif]>
324335
<% }) -%>
325336
<% } %>
326337

0 commit comments

Comments
 (0)