Newsletter template background colour

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.

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)

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.