Newsletter template background colour
5 posts by 3 authors in: Forums > CMS Builder
Last Post: November 3, 2016 (RSS)
By JeffC - November 1, 2016 - edited: November 1, 2016
Hi, I am struggling to create a table with 100% width when building a newsletter template using the wysiwyg. I wondered if this was a known issue? Is the wysiwyg adding default padding perhaps?
By Damon - November 1, 2016
Hi Jeff,
I tested and was able to successfully add a table with 100% width in the newsletter template (Newsletter Builder > Templates).
Can you let me know the exact steps you are taking and table code you are adding?
Also, when editing a newsletter template, under Advanced Settings at the bottom of the Newsletter Builder > Templates > template detail page, you can enter custom CSS the will output between the <style></style> tags in email header and body. You could enter a background color here.
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By JeffC - November 2, 2016
Hi Damon, thanks for your response.
I didn't explain myself very well in my first email. But I get what you are saying.
This is a simplified version of the html I was using
<body style="width: 100%; background-color: #ffffff; margin:0; padding:0;">
<table style="width:100%; height:100px; border:0; cellspacing:0; cellpadding:0; background-color:#000000;">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</body>
I couldn't understand why the table wasn't going up to the edge of the screen. The reason was that the body tag were stripped out of the wysiwyg, and padding and/or margin was being applied. Following your advice, I removed the body tag from the html and put the css into the custom panel instead.
Quick question though. As I understand it, some email clients ignore any styles that are not inline. Does that mean that any css between <style></style> could be ignored?
By Toledoh - November 2, 2016
Yep. CSS in emails is a nightmare. Google "CSS inliner" and you will find a number of web apps where you can paste your HTML with the styles etc, it will generate the inlined code.
Zurb is the one I use.
Litmus is also a good tool to check (paid)
Tim (toledoh.com.au)
By JeffC - November 3, 2016
Thanks Tim.
I used the Litmus checker, free trail for 7 days :)
I started with a Mail Chimp template, stripped out all of the Mail Chimp placeholders and finished up with a set of templates that look pretty good across the board, with a few older browsers displaying acceptable compromises.
I've posted a basic template with instructions below for anyone that wants to copy and paste and use in their own projects, or use as a stating point for a more complicated layout.
1 Download and install the Newsletter Builder plugin.
2 Create a new template and put the code below into the Content Wysiwyg
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" id="bodyTable" style="width: 100%; height: 100%;">
<tbody>
<tr>
<td align="center" valign="top" id="bodyCell">
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tbody>
<tr>
<td align="center" valign="top"><!-- BEGIN PREHEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templatePreheader" style="width: 100%;">
<tbody>
<tr>
<td valign="top" class="preheaderContent" style="padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" mc:edit="preheader_content00">Preheader text.</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="180" class="preheaderContent" style="padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 0;">Email not displaying correctly?<br /><a href="#archive_url#" target="_blank">View it in your browser</a>.</td>
<!-- *|END:IF|* --></tr>
</tbody>
</table>
<!-- // END PREHEADER --></td>
</tr>
<tr>
<td align="center" valign="top"><!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="width: 100%;">
<tbody>
<tr>
<td valign="top" class="headerContent"><img src="your-logo.gif" style="max-width: 300px;" id="headerImage" /></td>
</tr>
</tbody>
</table>
<!-- // END HEADER --></td>
</tr>
<tr>
<td align="center" valign="top">#content#</td>
</tr>
<tr>
<td align="center" valign="top"><!-- BEGIN FOOTER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateFooter" style="width: 100%;">
<tbody>
<tr>
<td valign="top" class="footerContent"><a href="http://www.twitter.com">Follow on Twitter</a> <a href="http://www.facebook.com">Friend on Facebook</a> </td>
</tr>
<tr>
<td valign="top" class="footerContent" style="padding-top: 0;"><strong>Footer Title Text.</strong><br />Footer Text.</td>
</tr>
<tr>
<td valign="top" class="footerContent" style="padding-top: 0;"><img src="your-logo.gif" style="max-width: 200px;" id="footerImage" /></td>
</tr>
<tr>
<td valign="top" class="footerContent" style="padding-top: 0;"><strong>You have received this email from Your Company</strong> <br /> Your Address<br /> Your Name <span class="applelinks">012345678</span>a</td>
</tr>
<tr>
<td valign="top" class="footerContent" style="padding-top: 0; padding-bottom: 20px;"><a href="#unsubscribe_url#">Unsubscribe from this list</a> </td>
</tr>
</tbody>
</table>
<!-- // END FOOTER --></td>
</tr>
</tbody>
</table>
<!-- // END TEMPLATE --></td>
</tr>
</tbody>
</table>
</center>
3 Put the code below into the Advanced Settings/Custom CSS Panel
#outlook a{padding:0;}
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
img{-ms-interpolation-mode:bicubic;}
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
#bodyCell{padding:20px;}
#templateContainer{width:600px;}
body, #bodyTable{
background-color:#f3f2ef;
}
#bodyCell{
border-top:4px solid #f3f2ef;
}
#templateContainer{
border:1px solid f3f2ef;
}
h1{
color:#4d4d4d !important;
display:block;
font-family:Helvetica;
font-size:36px;
font-style:normal;
font-weight:normal;
line-height:110%;
letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h2{
color:#4d4d4d !important;
display:block;
font-family:Helvetica;
font-size:20px;
font-style:normal;
font-weight:normal;
line-height:150%;
letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h3{
color:#4d4d4d !important;
display:block;
font-family:Helvetica;
font-size:20px;
font-style:normal;
font-weight:normal;
line-height:150%;
letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h4{
color:#4d4d4d !important;
display:block;
font-family:Helvetica;
font-size:14px;
font-style:normal;
font-weight:normal;
line-height:150%;
letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
#templatePreheader{
background-color: #f3f2ef;
border-bottom:1px solid #f3f2ef;
}
.preheaderContent{
color:#4d4d4d;
font-family:Helvetica;
font-size:10px;
line-height:125%;
text-align:left;
}
.preheaderContent a:link, .preheaderContent a:visited, /* Yahoo! Mail Override */ .preheaderContent a .yshortcuts /* Yahoo! Mail Override */{
color:#4d4d4d;
font-weight:normal;
text-decoration:underline;
}
#templateHeader{
background-color:#f3f2ef;
border-top:1px solid #f3f2ef;
border-bottom:1px solid #f3f2ef;
}
.headerContent{
color:#4d4d4d;
font-family:Helvetica;
font-size:20px;
font-weight:normal;
line-height:110%;
padding-top:0;
padding-right:0;
padding-bottom:0;
padding-left:0;
text-align:left;
vertical-align:middle;
}
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
color:#784f9b;
font-weight:normal;
text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px;
}
#templateBody{
background-color:#FFFFFF;
border-top:20px solid #f3f2ef;
border-bottom:1px solid #FFFFFF;
}
.bodyContent{
color:#4d4d4d;
font-family:Helvetica;
font-size:14px;
line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
text-align:left;
}
.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
color:#784f9b;
font-weight:normal;
text-decoration:underline;
}
.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}
.templateColumnContainer{width:260px;}
#templateColumns{
background-color:#FFFFFF;
border-top:20px solid #f3f2ef;
border-bottom:1px solid #FFFFFF;
}
.leftColumnContent{
color:#4d4d4d;
font-family:Helvetica;
font-size:14px;
line-height:150%;
padding-top:0;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
text-align:left;
}
.leftColumnContent a:link, .leftColumnContent a:visited, /* Yahoo! Mail Override */ .leftColumnContent a .yshortcuts /* Yahoo! Mail Override */{
color:#784f9b;
font-weight:normal;
text-decoration:underline;
}
.rightColumnContent{
color:#4d4d4d;
font-family:Helvetica;
font-size:14px;
line-height:150%;
padding-top:0;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
text-align:left;
}
.rightColumnContent a:link, .rightColumnContent a:visited, /* Yahoo! Mail Override */ .rightColumnContent a .yshortcuts /* Yahoo! Mail Override */{
color:#784f9b;
font-weight:normal;
text-decoration:underline;
}
.leftColumnContent img, .rightColumnContent img{
display:inline;
height:auto;
max-width:260px;
}
#templateFooter{
background-color:#bcdfd8;
border-top:20px solid #f3f2ef;
}
.footerContent{
color:#4d4d4d;
font-family:Helvetica;
font-size:12px;
line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
text-align:center;
}
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
color:#4d4d4d;
font-weight:normal;
text-decoration:underline;
}
/* MOBILE STYLES */
@media only screen and (max-width: 480px){
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;}
body{width:100% !important; min-width:100% !important;}
#bodyCell{padding:10px !important;}
#templateContainer{
max-width:600px !important;
width:100% !important;
}
h1{
font-size:26px !important;
line-height:110% !important;
}
h2{
font-size:20px !important;
line-height:150% !important;
}
h3{
font-size:20px !important;
line-height:150% !important;
}
h4{
font-size:16px !important;
line-height:150% !important;
}
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
#headerImage{
height:auto !important;
max-width:200px !important;
width:50% !important;
}
.headerContent{
font-size:20px !important;
line-height:125% !important;
text-align:center;
}
.bodyContent{
font-size:16px !important;
line-height:150% !important;
}
#bodyImage{
height:auto !important;
max-width:560px !important;
width:100% !important;
}
.templateColumnContainer{display:block !important; width:100% !important;}
.columnImage{
height:auto !important;
max-width:260px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.footerContent{
font-size:14px !important;
line-height:150% !important;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
}
.applelinks a{display:inline !important; text-decoration:underline; color:#4d4d4d; }
4. Save. Create a new message and paste the code below into the WYSIWYG panel
<table border="0" cellpadding="0" cellspacing="0" id="templateBody" style="width: 100%;">
<tbody>
<tr>
<td valign="top" class="bodyContent">
<h1>Your Header</h1>
<h2>Your subheader</h2>
<p>Your Text</p>
<h3>Another header</h3>
<h4>Another subheader</h4>
<p>More text</p>
</td>
</tr>
</tbody>
</table>
5. You should be good to go! But be sure to test, test, test before sending. If using this code you accept all responsibility.