Hi there,
I am using a mail chimp template and trying to do a simple edit but having trouble with tables… It looks like there are two columns and a sidebar. Each column has a 180px image. Is there an easy way to change this so that instead there is only one image of 360px?
Sorry for the code dump, but here is the entire page source:
thnks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
#outlook a{
padding:0;
}
body{
width:100% !important;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
body{
-webkit-text-size-adjust:none;
}
body{
margin:0;
padding:0;
}
img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
table td{
border-collapse:collapse;
}
#backgroundTable{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
/*
@tab Page
@section background color
@tip Set the background color for your email. You may want to choose one that matches your company's branding.
@theme page
*/
body,#backgroundTable{
/*@editable*/background-color:#FAFAFA;
}
/*
@tab Page
@section heading 1
@tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
@style heading 1
*/
h1,.h1{
/*@editable*/color:#505050;
display:block;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:30px;
/*@editable*/font-weight:normal;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Page
@section heading 2
@tip Set the styling for all second-level headings in your emails.
@style heading 2
*/
h2,.h2{
/*@editable*/color:#505050;
display:block;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:24px;
/*@editable*/font-weight:normal;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Page
@section heading 3
@tip Set the styling for all third-level headings in your emails.
@style heading 3
*/
h3,.h3{
/*@editable*/color:#505050;
display:block;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:20px;
/*@editable*/font-weight:normal;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Page
@section heading 4
@tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
@style heading 4
*/
h4,.h4{
/*@editable*/color:#505050;
display:block;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:16px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
}
/*
@tab Header
@section preheader style
@tip Set the background color for your email's preheader area.
*/
#templatePreheader{
/*@editable*/background-color:#F5F5F5;
/*@editable*/border-bottom:1px solid #CCCCCC;
}
/*
@tab Header
@section preheader text
@tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent div{
/*@editable*/color:#505050;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:10px;
/*@editable*/line-height:100%;
/*@editable*/text-align:left;
}
/*
@tab Header
@section preheader link
@tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent div a:link,.preheaderContent div a:visited,.preheaderContent div a .yshortcuts {
/*@editable*/color:#0DB297;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Header
@section upper header style
@tip Set the background color for your email's upper header area.
*/
#upperTemplateHeader{
/*@editable*/background-color:#FAFAFA;
padding-top:30px;
padding-bottom:30px;
}
/*
@tab Header
@section upper header text
@tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.upperHeaderContent{
/*@editable*/color:#505050;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:34px;
/*@editable*/font-weight:normal;
/*@editable*/line-height:100%;
/*@editable*/padding-top:0;
/*@editable*/padding-right:0;
/*@editable*/padding-bottom:0;
/*@editable*/vertical-align:middle;
}
/*
@tab Header
@section upper header link
@tip Set the styling for your email's upper header links. Choose a color that helps them stand out from your text.
*/
.upperHeaderContent a:link,.upperHeaderContent a:visited,.upperHeaderContent a .yshortcuts {
/*@editable*/color:#0DB297;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:none;
}
/*
@tab Header
@section lower header style
@tip Set the background color for your email's lower header area.
@theme page
*/
#lowerTemplateHeader{
/*@editable*/background-color:#0DB297;
padding-top:30px;
padding-bottom:30px;
}
/*
@tab Header
@section lower header text
@tip Set the styling for your email's lower header text. Choose a size and color that is easy to read.
*/
.lowerHeaderContent{
/*@editable*/color:#FFFFFF;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:34px;
/*@editable*/font-weight:normal;
/*@editable*/line-height:100%;
/*@editable*/vertical-align:middle;
}
/*
@tab Header
@section lower header link
@tip Set the styling for your email's lower header links. Choose a color that helps them stand out from your text.
*/
.lowerHeaderContent a:link,.lowerHeaderContent a:visited,.lowerHeaderContent a .yshortcuts {
/*@editable*/color:#FFFFFF;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px;
}
/*
@tab Body
@section body style
@tip Set the bottom border for your email's body area.
@theme footer
*/
#templateBodyWrapper{
/*@editable*/border-bottom:4px solid #0DB297;
}
/*
@tab Body
@section body text
@tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
@theme main
*/
.bodyContent div{
/*@editable*/color:#505050;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:14px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Body
@section body link
@tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent div a:link,.bodyContent div a:visited,.bodyContent div a .yshortcuts {
/*@editable*/color:#0DB297;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.bodyContent img{
display:inline;
height:auto;
}
/*
@tab Sidebar
@section sidebar style
@tip Set the background color and border for your email's sidebar area.
*/
.sidebarContent{
/*@editable*/border-left:1px solid #DDDDDD;
}
/*
@tab Sidebar
@section sidebar text
@tip Set the styling for your email's sidebar text. Choose a size and color that is easy to read.
*/
.sidebarContent div{
/*@editable*/color:#505050;
/*@editable*/font-family:Arial;
/*@editable*/font-size:12px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Sidebar
@section sidebar link
@tip Set the styling for your email's sidebar links. Choose a color that helps them stand out from your text.
*/
.sidebarContent div a:link,.sidebarContent div a:visited,.sidebarContent div a .yshortcuts {
/*@editable*/color:#0DB297;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.sidebarContent img{
display:inline;
height:auto;
}
/*
@tab Columns
@section left column text
@tip Set the styling for your email's left column text. Choose a size and color that is easy to read.
*/
.leftColumnContent div{
/*@editable*/color:#505050;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:14px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Columns
@section left column link
@tip Set the styling for your email's left column links. Choose a color that helps them stand out from your text.
*/
.leftColumnContent div a:link,.leftColumnContent div a:visited,.leftColumnContent div a .yshortcuts {
/*@editable*/color:#0DB297;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.leftColumnContent img{
display:inline;
height:auto;
}
/*
@tab Columns
@section center column text
@tip Set the styling for your email's center column text. Choose a size and color that is easy to read.
*/
.centerColumnContent div{
/*@editable*/color:#505050;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:13px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Columns
@section center column link
@tip Set the styling for your email's center column links. Choose a color that helps them stand out from your text.
*/
.centerColumnContent div a:link,.centerColumnContent div a:visited,.centerColumnContent div a .yshortcuts {
/*@editable*/color:#0DB297;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.centerColumnContent img{
display:inline;
height:auto;
}
/*
@tab Columns
@section right column text
@tip Set the styling for your email's right column text. Choose a size and color that is easy to read.
*/
.rightColumnContent div{
/*@editable*/color:#505050;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:13px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
}
/*
@tab Columns
@section right column link
@tip Set the styling for your email's right column links. Choose a color that helps them stand out from your text.
*/
.rightColumnContent div a:link,.rightColumnContent div a:visited,.rightColumnContent div a .yshortcuts {
/*@editable*/color:#0DB297;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.rightColumnContent img{
display:inline;
height:auto;
}
/*
@tab Footer
@section footer style
@tip Set the background color and top border for your email's footer area.
@theme footer
*/
#templateFooter{
/*@editable*/background-color:#222426;
/*@editable*/border-top:4px solid #FAFAFA;
}
/*
@tab Footer
@section footer text
@tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
@theme footer
*/
.footerContent div{
/*@editable*/color:#707070;
/*@editable*/font-family:Helvetica;
/*@editable*/font-size:11px;
/*@editable*/line-height:125%;
/*@editable*/text-align:left;
}
/*
@tab Footer
@section footer link
@tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent div a:link,.footerContent div a:visited,.footerContent div a .yshortcuts {
/*@editable*/color:#909090;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.footerContent img{
display:inline;
}
/*
@tab Footer
@section social bar style
@tip Set the text alignment for your email's footer social bar.
*/
#social div{
/*@editable*/text-align:left;
}
/*
@tab Footer
@section utility bar style
@tip Set the text alignment for your email's footer utility bar.
*/
#utility div{
/*@editable*/text-align:left;
}
#monkeyRewards img{
max-width:190px;
}
</style></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\\\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
<tr>
<td align="center" valign="top" class="preheaderContent">
<!-- // Begin Preheader Content \\\\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top" width="400" style="padding-top:15px; padding-right:20px; padding-bottom:15px; padding-left:0;">
<div mc:edit="std_preheader_content">
Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
</div>
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="200" style="padding-top:15px; padding-right:0; padding-bottom:15px; padding-left:0;">
<div mc:edit="std_preheader_links">
Email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // Begin Preheader Content \\\\ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\\\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\\\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
<tr>
<td align="center" valign="top" id="upperTemplateHeader">
<!-- // Begin Upper Header Content \\\\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top" class="upperHeaderContent" style="padding-right:20px;">
<img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/logo_generitech.png" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext style="max-width:540px;">
</td>
<td align="center" valign="bottom" width="18" mc:hideable style="padding-right:5px;" mc:edit="social_link00">
<a href="*|TWITTER:PROFILEURL|*" target="_blank"><img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/twitter_24x24_p50.png" alt="Follow on Twitter" style="max-width:18px !important;"></a>
</td>
<td align="center" valign="bottom" width="18" mc:hideable mc:edit="social_link01">
<a href="*|FACEBOOK:PROFILEURL|*" target="_blank"><img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/facebook_24x24_p50.png" alt="Friend of Facebook" style="max-width:18px !important;"></a>
</td>
</tr>
</table>
<!-- // End Upper Header Content \\\\ -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="lowerTemplateHeader">
<!-- // Begin Lower Header Content \\\\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top" class="lowerHeaderContent">
<div mc:edit="upper_header_content">
Experience the Generitech Difference
</div>
</td>
</tr>
</table>
<!-- // End Lower Header Content \\\\ -->
</td>
</tr>
</table>
<!-- // End Template Header \\\\ -->
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:40px;" id="templateBodyWrapper">
<!-- // Begin Template Body \\\\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<td align="left" valign="top" width="400">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="3" valign="top" width="400" style="padding-top:20px; padding-right:20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="3" valign="top" class="bodyContent">
<!-- // Begin Module: Standard Content \\\\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div mc:edit="std_content00">
<h1>New Solutions & Updates</h1>
We hope you're having fun in the sun this summer! The Generitech team is excited to announce several powerful new solutions and a few updates to existing products, all available in June! Thanks to our loyal newsletter subscribers for experiencing the difference, month after month.
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\\\ -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="200">
<table border="0" cellpadding="0" cellspacing="0" width="180" class="leftColumnContent">
<tr mc:repeatable>
<td valign="top" style="padding-top:20px;">
<img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/int180_holder.png" style="max-width:180px; margin-bottom:10px;" mc:label="image" mc:edit="image_left">
<div mc:edit="content_left">
<h3>Introducing all-new Synergy</h3>
Our brand-new Synergy products will help you streamline your company's communications and take your brand to the next level. Can't keep track of your company's messaging and support streams? Synergy is for you. We have a number of affordable products within the Synergy line, depending on your communication volume.
</div>
</td>
</tr>
</table>
</td>
<td valign="top" width="200">
<table border="0" cellpadding="0" cellspacing="0" width="180" class="rightColumnContent">
<tr mc:repeatable>
<td valign="top" style="padding-top:20px;">
<img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/int180_holder.png" style="max-width:180px; margin-bottom:10px;" mc:label="image" mc:edit="image_right">
<div mc:edit="content_right">
<h3>A note from our president</h3>
Generitech is 100% committed to creating tools and solutions that improve the way you do business. We want to hear from loyal customers like you. Follow us on Twitter at @generitech and let us know what you think about our products and around-the-clock support. Your feedback makes us better.
<br>
<br>
Thanks,
<br>
— Gary Terry
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" width="200" id="templateSidebar" style="padding-top:20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top" class="sidebarContent" style="padding-left:20px;">
<img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/int180_holder.png" style="max-width:160px; margin-bottom:10px;" mc:label="image" mc:edit="tiwc200_image00">
<div mc:edit="tiwc200_content00">
<h4>Upcoming Events</h4>
<strong>6/1</strong>
<br>
Introducing Synergy!
<br>
<em>8am</em>, Generitech HQ
<br>
<br>
<strong>6/12</strong>
<br>
Generitech Leadership Summit
<br>
<em>10am</em>, AGCC
<br>
<br>
<strong>6/20</strong>
<br>
Advanced Tools Expo
<br>
<em>3pm</em>, AGCC
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // Begin Template Body \\\\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Footer \\\\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr>
<td align="center" valign="top" style="padding-top:40px; padding-bottom:40px;">
<!-- // Begin Footer Content \\\\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" class="footerContent">
<tr>
<td colspan="2" valign="middle" id="social">
<div mc:edit="std_social">
<a href="*|TWITTER:PROFILEURL|*">follow on Twitter</a> | <a href="*|FACEBOOK:PROFILEURL|*">friend on Facebook</a> | <a href="*|FORWARD|*">forward to a friend</a>
</div>
</td>
</tr>
<tr>
<td valign="top" width="400" style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:0;">
<div mc:edit="std_footer">
<em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
<br>
*|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
<br>
<strong>Our mailing address is:</strong>
<br>
*|HTML:LIST_ADDRESS_HTML|**|END:IF|*
</div>
</td>
<td valign="top" width="200" id="monkeyRewards" style="padding-top:20px; padding-right:0; padding-bottom:20px; padding-left:0;">
<div mc:edit="monkeyrewards">
*|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" id="utility">
<div mc:edit="std_utility">
<a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
</div>
</td>
</tr>
</table>
<!-- // End Footer Content \\\\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\\\ -->
</td>
</tr>
</table>
</center>
</body>
</html>
