Open oliverands opened 8 years ago
Reedyseth
commented
8 years ago @oliverands As far as I know by editing the source code in the source code view your HTML should be render. If you could post your template code here I could help you to figure out what is missing.
Remember that you can paste code and sorround it with triple backquotes, see the section Syntax Highlighting here
oliverands
commented
8 years ago @Reedyseth Thanks for the offer to look into this. Here is code for my notification message. Code for my management message is similar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<head style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<meta name="viewport" content="width=device-width" style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<title style="margin: 0;padding: 0;font-family: georgia, times, serif;">A New Comment on the Oliver + S Blog</title>
<style type="text/css" style="margin: 0;padding: 0;font-family: georgia, times, serif;">
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family: georgia, times, serif; }
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased !important;
-webkit-text-size-adjust:none !important;
width: 100%!important;
height: 100%;
color: #7B4338;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a { color: #3e6d69;}
.btn {
text-decoration:none;
color: #FFF;
background-color: #666;
padding:10px 16px;
font-weight:bold;
margin-right:10px;
text-align:center;
cursor:pointer;
display: inline-block;
}
p.callout {
padding:15px;
background-color:#e3f2f1;
margin-bottom: 15px;
}
.callout a {
font-weight:bold;
color: #3e6d69;
}
/* -------------------------------------
HEADER
------------------------------------- */
table.head-wrap { width: 100%;}
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
.header.container p{ text-align: center; padding-top: 20px; line-height: 1.3;}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
width: 600px;
margin: auto;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
width: 600px;
margin: auto;
clear:both!important;
}
table.footer-wrap .blurb{
padding: 15px;
}
/* -------------------------------------
BODY
------------------------------------- */
td.image img{
border: 0px solid #999999;
}
.blurb{
border-top: 1px dashed #9b9;
clear: both;
}
.content.blurb{ padding-top: 20px;}
.blurb-head{
padding: 20px 15px 0 15px;
text-align: center;
}
.blurb-head h3{
text-align: center;
}
img.zing{ width: 100% !important; height: auto !important; max-width: 600px;}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: 'Trebuchet MS', sans-serif; line-height: 1.1; margin-bottom:15px; color: #7B4338;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-weight:900; font-size: 22px; margin-top: 20px; margin-bottom: 10px;}
h2 { font-weight:900; font-size: 18px;}
h3 { font-weight:900; font-size: 22px;}
h4 { font-weight:900; font-size: 20px;}
h5 { font-weight:900; font-size: 14px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}
.collapse { margin:0!important;}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
font-size:14px;
line-height:1.6;
text-align: left;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}
ul li, ol li {
margin-left:5px;
list-style-position: inside;
}
/*-------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display:block!important;
max-width:600px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:15px;
max-width:600px;
margin:0 auto;
display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }
img.image-left{
float: left;
width: 40%;
max-width: 300px;
min-width: 100px;
border: 0px solid #999999;
margin: 0 15px 15px 0;
}
img.image-right{
float: right;
width: 40%;
max-width: 300px;
min-width: 100px;
border: 0px solid #999999;
margin: 0 0 15px 15px;
}
/* Odds and ends */
.column-wrap {
padding:0!important;
margin:0 auto;
max-width:600px!important;
}
.standard-right{
width: 60%;
float:right;
}
.standard-left{
width: 60%;
float:left;
}
.standard-left img,
.standard-right img{
border: 0px solid #999999;
}
h3.standard-right,
h3.standard-left{
padding: 0 15px;
/*width: 270px;
margin-bottom: 0;*/
float: left;
}
.leftImage{
float: left;
margin: 0 20px 20px 0;
border: 0px solid #999999;
max-width: 280px;
}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
/* -------------------------------------------
PHONE
For clients that support media queries.
Nothing fancy.
-------------------------------------------- */
@media only screen and (max-width: 610px) {
a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
div[class="standard-right"],
div[class="standard-left"],
h3[class="standard-right"],
h3[class="standard-left"] {
width: auto!important;
float:none!important;
}
div[class="standard-left"] img,
div[class="standard-right"] img {
margin: 0px auto;
display: block;
}
img[class="image-right"],
img[class="image-left"]{
width: auto !important;
margin: 0 auto 10px !important;
float: none !important;
display: block !important;
}
table {width: 100% !important;}
h1, h3{ font-size: 20px;}
h2{ font-size: 16px;}
img.zing{ width: 100%; height: auto !important; }
}
</style>
</head>
<body style="background-color: rgb(255, 255, 255);margin: 0;padding: 0;font-family: georgia, times, serif;height: 100%;color: #7B4338;-webkit-font-smoothing: antialiased !important;-webkit-text-size-adjust: none !important;width: 100%!important;" marginheight="0" marginwidth="0">
<div style="background-color: rgb(181, 219, 215);margin: 0;padding: 0;font-family: georgia, times, serif;">
<!--[if !mso 9]><!-->
<table background="http://osimg.net/mlist/responsive_assets/serrated_top.gif" border="0" cellpadding="0" cellspacing="0" height="65" width="100%" style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<tbody style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<tr style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<td valign="top" align="left" class="header container" height="65" style="margin: 0 auto!important;padding: 0;font-family: georgia, times, serif;display: block!important;max-width: 600px!important;clear: both!important;">
</td>
</tr>
</tbody>
</table>
<!--<![endif]-->
</div>
<!-- BODY -->
<table class="body-wrap" style="margin: auto;padding: 0;font-family: georgia, times, serif;width: 600px;">
<tbody style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<tr style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<td class="container" bgcolor="#ffffff" style="margin: 0 auto!important;padding: 0;font-family: georgia, times, serif;display: block!important;max-width: 600px!important;clear: both!important;">
<div class="content" style="margin: 0 auto;padding: 15px;font-family: georgia, times, serif;max-width: 600px;display: block;">
<table style="margin: 0;padding: 0;font-family: georgia, times, serif;width: 100%;">
<tbody style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<tr style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<td align="center" style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<img src="http://osimg.net/mlist/responsive_assets/CommentHead.jpg" alt="There's a new comment on an Oliver + S blog post you are following." class="zing" ;max-width: 100%;width: 100% !important;height: auto !important; max-width: 600px; style="margin: 0;padding: 0;font-family: georgia, times, serif;max-width: 600px;width: 100% !important;height: auto !important;">
</td>
</tr>
</tbody>
</table>
</div>
<div class="blurb" style="margin: 0;padding: 0;font-family: georgia, times, serif;border-top: 1px dashed #9b9;clear: both;">
<div class="blurb-head" style="margin: 0;padding: 20px 15px 0 15px;font-family: georgia, times, serif;text-align: center;">
</div>
<!--[if gte mso 9]>
<br /> <br />
<![endif]-->
<div class="clear" style="margin: 0;padding: 0;font-family: georgia, times, serif;display: block;clear: both;">
</div>
<div class="content" style="margin: 0 auto;padding: 15px;font-family: georgia, times, serif;max-width: 600px;display: block;">
<h3 style="text-transform: capitalize;margin: 0;padding: 0;font-family: 'Trebuchet MS', sans-serif;line-height: 1.1;margin-bottom: 15px;color: #7B4338;font-weight: 900;font-size: 22px;">New Comment on "[post_title]"</h3>
<p class="lead" style="margin: 0;padding: 0;font-family: georgia, times, serif;margin-bottom: 10px;font-weight: normal;font-size: 17px;line-height: 1.6;text-align: left;"><span style="text-transform: capitalize;margin: 0;padding: 0;font-family: georgia, times, serif;">[comment_author]</span> has just left this comment:</p>
<p style="margin: 0;padding: 0;font-family: georgia, times, serif;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;text-align: left;">[comment_content]</p>
<!--[if gte mso 9]>
<br /> <br />
<![endif]-->
<p class="callout" style="margin: 0;padding: 15px;font-family: georgia, times, serif;margin-bottom: 15px;font-weight: normal;font-size: 14px;line-height: 1.6;text-align: left;background-color: #e3f2f1;">
<!--[if gte mso 9]>
<br />
<![endif]-->
<strong style="margin: 0;padding: 0;font-family: georgia, times, serif;">Things you can do:</strong>
<br style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<a href="[post_permalink]" style="margin: 0;padding: 0;font-family: georgia, times, serif;color: #3e6d69;font-weight: bold;">View the original blog post →</a>
<br style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<a href="[comment_permalink]" style="margin: 0;padding: 0;font-family: georgia, times, serif;color: #3e6d69;font-weight: bold;">View this comment and reply to it →</a>
<!--[if gte mso 9]>
<br />
<![endif]-->
</p>
<!--[if gte mso 9]>
<br /> <br />
<![endif]-->
</div>
</div>
</td>
<td style="margin: 0;padding: 0;font-family: georgia, times, serif;"></td>
</tr>
</tbody>
</table>
<!-- /BODY -->
<table class="footer-wrap" bgcolor="" style="margin: auto;padding: 0;font-family: georgia, times, serif;width: 600px;clear: both!important;">
<tbody style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<tr style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<td class="container" bgcolor="#ffffff" style="margin: 0 auto!important;padding: 0;font-family: georgia, times, serif;display: block!important;max-width: 600px!important;clear: both!important;">
<div class="blurb" style="margin: 0;padding: 15px;font-family: georgia, times, serif;border-top: 1px dashed #9b9;clear: both;">
<h5 style="margin: 0;padding: 0;font-family: 'Trebuchet MS', sans-serif;line-height: 1.1;margin-bottom: 15px;color: #7B4338;font-weight: 900;font-size: 14px;">We're social. Are you?</h5>
<p style="margin: 0;padding: 0;font-family: georgia, times, serif;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;text-align: left;">
<a href="http://pinterest.com/liesl/" style="margin: 0;padding: 0;font-family: georgia, times, serif;color: #3e6d69;"><img src="http://osimg.net/mlist/responsive_assets/pinterest.png" style="margin: 0;padding: 0;font-family: georgia, times, serif;max-width: 100%;"></a>
<a href="http://www.flickr.com/groups/oliverands/" style="margin: 0;padding: 0;font-family: georgia, times, serif;color: #3e6d69;"><img src="http://osimg.net/mlist/responsive_assets/flickr.png" style="margin: 0;padding: 0;font-family: georgia, times, serif;max-width: 100%;"></a>
<a href="http://www.facebook.com/oliverands" style="margin: 0;padding: 0;font-family: georgia, times, serif;color: #3e6d69;"><img src="http://osimg.net/mlist/responsive_assets/facebook.png" style="margin: 0;padding: 0;font-family: georgia, times, serif;max-width: 100%;"></a>
<a href="http://twitter.com/oliverands" style="margin: 0;padding: 0;font-family: georgia, times, serif;color: #3e6d69;"><img src="http://osimg.net/mlist/responsive_assets/twitter.png" style="margin: 0;padding: 0;font-family: georgia, times, serif;max-width: 100%;"></a>
<a href="http://instagram.com/oliverands" style="margin: 0;padding: 0;font-family: georgia, times, serif;color: #3e6d69;"><img src="http://osimg.net/mlist/responsive_assets/instagram.png" style="margin: 0;padding: 0;font-family: georgia, times, serif;max-width: 100%;"></a>
</p>
</div>
<div class="blurb" style="margin: 0;padding: 15px;font-family: georgia, times, serif;border-top: 1px dashed #9b9;clear: both;">
</div>
</td>
</tr>
<!--[if gte mso 9]>
<tr>
<p> </p>
<div class="content" style="padding: 15px;max-width: 600px;margin: 0 auto;display: block;">
<div class="blurb" style="border-top: 1px dashed #9b9;clear: both;">
<p> </p>
</div>
</div>
</tr>
<![endif]-->
<tr style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<td class="container" bgcolor="#ffffff" style="text-align: center;margin: 0 auto!important;padding: 0;font-family: georgia, times, serif;display: block!important;max-width: 600px!important;clear: both!important;">
<span style="font-size: 12px;margin: 0;padding: 0;font-family: georgia, times, serif;">This email was sent because you subscribed to comments on "<span style="text-transform: capitalize;margin: 0;padding: 0;font-family: georgia, times, serif;"><a href="[post_permalink]" style="color: #404040 !important;margin: 0;padding: 0;font-family: georgia, times, serif;">[post_title]</a></span>"<br style="margin: 0;padding: 0;font-family: georgia, times, serif;">
<a href="[manager_link]" style="color: #404040 !important;margin: 0;padding: 0;font-family: georgia, times, serif;">manage your comment subscriptions</a><br style="margin: 0;padding: 0;font-family: georgia, times, serif;">
Oliver + S · 35 Meadow St. · Studio 316 · Brooklyn, NY 11206 · USA</span>
<p style="margin: 0;padding: 0;font-family: georgia, times, serif;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;text-align: left;"> </p>
</td>
</tr>
</tbody>
</table>
</body>
</html> Actually by looking at your template a great idea came to my mind to create custom template for the users and release them, anyways I will check your code and make sure that it works with the current structure.
oliverands
commented
8 years ago I think that's a great idea. I would be happy to help if I can.
Reedyseth
commented
8 years ago Awesome,
By just sharing your template is a great help, but I could ask you to confirm some behavior about, later I will open a new issue/feature for this. In the mean time for now I will focus to get yours working.
[Cross-posted from the WordPress support forum. Just saw the message there about posting here instead. Sorry.]
I started using the module with version 150820. In that version I created some very nice (and complex) html email templates based on other email templates I have used. I have the module configured to send html emails but not to html-ify links because I do that myself in the template code.
When I updated from that version to version 160106, the new WYSIWYG editor for notification and management messages breaks my code. There is the ability to view the source code, but there doesn't seem to be the ability to work directly with the source code and bypass the WYSIWYG editor. When I paste in the code I need, the editor seems to overwrite some of my header information and causes the emails to not send as designed. I've had the same issue in version 160115 and have had to revert back to the last release prior to incorporation of the new editor feature to get my emails to send correctly.
Is there a way to bypass the visual editor and work solely with source code and have it saved without having the editor make changes to what is saved? Something like the WordPress post editor with the option to use a visual or text editor would be much better.
Thanks.