I am trying to conditionally render a block of HTML, dependent on the presence of a key in the JSON -> custom_invite_text.
My understanding is that the Mustachio conditions control the presence of the HTML blocks below. This is working fine, but we lose access to the dynamic data provided by the JSON. Presume it is a scoping issue, but some guidance would be good?
The following HTML is used to generate an email:
<p>{{body}}</p>
{{#custom_invite_text}}
<table class="custom_invite">
<tr class="custom_invite_rows">
<td class="custom_invite_row1"><div class="roundel"><p class="roundel-text">{{custom_invite_org}}</p></div></td>
<td class="custom_invite_row2"><p class="custom_invite_heading">From {{org_name}}</p></td>
</tr>
</table>
{{/custom_invite_text}}
{{#custom_invite_text}}
<table class="body-action custom_invite_div" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="custom_invite_text" align="left">
{{{custom_invite_text}}}
</td>
</tr>
<tr class="custom_invite_btn">
<td align="center">
<!-- Border based button https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
{{behaviour_url_description}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
{{/custom_invite_text}}
{{^custom_invite_text}}
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr class="custom_invite_btn">
<td align="center">
<!-- Border based button https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
{{behaviour_url_description}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
{{/custom_invite_text}}
Thanks.
Related
I am creating an email template and the header section of the email is a code block I took from another site.
The said header code block contains a logo and few text next to it. Here is an image of it.
In the editor of the Email Service Provider I use, the code block is fully visible but when I click on preview, the text dissapears and only the logo is visible like this
Does anyone know why is that.
Here is the code
`
<td class="esd-stripe" align="center">
<table class="es-header-body" align="center" cellpadding="0" cellspacing="0" width="550" style="background-color: #f6f3f0;" bgcolor="#f6f3f0">
<tbody>
<tr>
<td class="esd-structure es-p20" align="left">
<!--[if mso]><table width="560" cellpadding="0"
cellspacing="0"><tr><td width="98" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left">
<tbody>
<tr>
<td width="98" class="es-m-p0r es-m-p20b esd-container-frame" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-image es-m-txt-c" style="font-size: 0px;"><a target="_blank" href="https://viewstripo.email"><img src="https://ychxix.stripocdn.email/content/guids/CABINET_d3bb686276c9132ac5465c69a2399624/images/carla_logo.png" alt style="display: block;" width="65"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="20"></td><td width="442" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" align="right">
<tbody>
<tr>
<td width="442" align="left" class="esd-container-frame">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="esd-mobile-hidden">
<td align="center" class="esd-block-spacer" height="16"></td>
</tr>
<tr>
<td class="esd-block-menu" esd-tmp-menu-color="#2d0824">
<table cellpadding="0" cellspacing="0" width="100%" class="es-menu">
<tbody>
<tr class="links">
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/" style="color: #169179;"><b>Home<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/contact" style="color: #169179;"><b>About<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/about" style="color: #169179;"><b>Contact<b></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
`
I tried to change the font color and backround color to see if that was overlapping the text, but it didnt work.
I have no idea what's going on. The sections show up in preview and test emails, but when I add template to a campaign, suddenly the Contact and Facebook section is gone. WHYYY. It makes no sense why it's just disappearing when I add it to a campaign. This is the section that disappears when I add email template to the campaign. Is something wrong with the tables? I looked at CSS and there's hardly anything.
<!-- Facebook Recommendation -->
<div mc:repeatable="Select" mc:variant="facebook recommendation">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#231C15">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:60px 0px 60px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:40px;line-height:40px;text-align:center;font-weight:bold;padding-bottom:20px;">
<div mc:edit="text_16">Recommend us on Facebook!</div>
</td>
</tr>
<tr>
<td class="text pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_18">Recommend us on our Facebook page! This ensures we can reach even more people to provide the best possible care during their move! </div>
</td>
</tr>
<!-- Button -->
<tr mc:hideable>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-button" style="background:#fff;color:#231C15;font-family:Lato, Arial, sans-serif;font-size:14px;line-height:18px;padding:12px 20px;text-align:center;letter-spacing:1px;font-weight:600;text-transform:uppercase;border-radius:22px;">
<div mc:edit="text_19">
<span class="link-white" style="color:#231C15; text-decoration:none;">RECOMMEND US</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END Button -->
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- Facebook Recommendation -->
<!-- Contact -->
<div mc:repeatable="Select" mc:variant="Contact">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:30px 0px 0px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 center pb15" style="color:#000000;font-family:Roboto, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:bold;text-align:center;padding-bottom:10px;">
<div mc:edit="text_37">Contact Us</div>
</td>
</tr>
<tr>
<td class="text-center pb30" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_38">Looking to make another move? <br>Give us a call!</div>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom:50px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1a994bda-97c5-4ebf-b478-de1e3e2e6d6c.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_20">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_39">
<strong class="link" style="color:#777777;text-decoration:none;">855-624-4537</strong>
</div>
</td>
</tr>
</table>
</th>
<th class="column-empty2" width="30" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/9e146158-5e5d-4d4d-a99e-02f32506799a.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_21">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_40">
<a target="mailto:service#moveandstore.com" class="link" style="color:#777777;text-decoration:none;"><strong class="link" style="color:#777777;text-decoration:none;">service#moveandstore.com</strong></a>
</div>
</td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction:rtl;">
<tr>
<th class="column" dir="ltr" width="433" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
<th class="column-empty" dir="ltr" width="40" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column" dir="ltr" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END Contact -->
Okay - From my limited knowledge with MailChimp I think I have stumbled across something.
I see in your table you have the mc:repeatable="Select" attribute. From the MailChimp help section - this says that this will be hidden automatically unless a user adds it via the campaign builder.
Add the mc:repeatable attribute to any area that includes an mc:edit attribute to create a content block that can be repeatedly added to a template. Repeatable content areas are hidden by default so they only appear in a template if you add them within the Campaign Builder.
Source: Mailchimp help (create editable content areas with mailchimps template language)
I am trying to create a HTML email, and therefore using a lot of nested tables. However, My second <tr> is not inline with the first row, and I'm not quite sure why. Here is how it's coming out at the moment:
I want the second row to be centred rather than touching the edges.
Here's what I have:
<!-- BACKGROUND -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000000">
<tbody>
<tr>
<td>
<!-- SECTION 1 -->
<!--START OF EMAIL BODY -->
<table cellpadding="0" cellspacing="0" border="0" width="600" align="center">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff">
<tbody>
<tr>
<td height="30"><!-- PADDING --></td>
<tr>
<td style="font-family:Arial;font-size:12px;line-height:15px;color:#353535;text-align:center;">
Not rendering correctly? View this email as a web page here.
</td>
</tr>
<tr>
<td height="15"><!-- PADDING --></td>
</tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--END OF EMAIL BODY -->
<!-- SECTION 1 END -->
</td>
</tr>
<tr>
<td>
<!-- SECTION 2 -->
<!-- LOGO AND SOCIAL MEDIA -->
<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#FFFFFF">
<tbody>
<tr>
<td><!-- <td height="60">-->
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="425"><!-- PADDING --></td>
<td style="font-family:Arial;font-size:10px;line-height:15px;color:#353535;text-align:center;font-weight:bold;">SHARE
</td>
<td width="10"><!-- PADDING (SPACE BETWEEN SHARE AND LINKS) --></td>
<!-- LINKEDIN-->
<td>
</td>
<!-- TWITTER -->
<td>
</td>
<!-- YOUTUBE -->
<td>
</td>
</tr>
</tbody>
</table>
<!-- SECTION 2 END -->
</td>
</tr>
</tbody>
</table>
There's nothing wrong with the alignment of the row.
What are misaligned are the two tables inside the rows.
Compare:
<!--START OF EMAIL BODY -->
<table cellpadding="0" cellspacing="0" border="0" width="600" align="center">
<!-- LOGO AND SOCIAL MEDIA -->
<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#FFFFFF">
One of them is centred. The other is left aligned.
I am trying to create a newsletter style HTML email for users who are using IBM Lotus Notes 9.0.1.
I get closed, but can't exactly get it right.
Here is my code:
<html>
<head>
<title>Scoular Weekly Technology Newsletter</title>
</head>
<script>
</script>
<body bgcolor="#E0DED8" style="padding-top:30px;" height="1000px">
<table bgcolor="#FFFFFF" align="center" width="800px" cellspacing="0" border="0" cellpadding="0">
<tr>
<td>
<table cellspacing="20" cellpadding="20" border="0" width="640" align="center">
<tr width="650px">
<td bgcolor="#D7D3C7" style="padding:10px" align="center"><img alt="Scoular_HTML2" height="93" width="400px" src="" style="padding:20px"></td>
</tr>
</table>
<table cellspacing="20" cellpadding="20" border="0" width="640" align="center">
<tr width="650px">
<td bgcolor="#D7D3C7" style="padding:10px" align="left">
<span> Weekly Technology Tips</span>
<td bgcolor="#D7D3C7" style="padding:10px" align="right">
<span>IT Help Desk</span</td>
</td>
</tr>
</table>
<table cellspacing="20" cellpadding="20" border="0" width="640" align="center">
<tr width="650px">
<td bgcolor="#D7D3C7" style="padding:10px" align="center">TIP</td>
</tr>
</table>
<table cellspacing="20" cellpadding="20" border="0" width="640" align="center">
<tr width="650px">
<td bgcolor="#D7D3C7" style="padding:10px" align="center">TIP</td> </tr>
</table>
<table cellspacing="20" cellpadding="20" border="0" width="640" align="center">
<tr width="650px">
<td bgcolor="#D7D3C7" style="padding:10px" align="center">TIP</td>
</tr>
</table>
<table cellspacing="20" cellpadding="20" border="0" width="640" align="center">
<tr width="650px">
<td bgcolor="#D7D3C7" style="padding:10px" align="center">FOOTER</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
In any web tool it looks like this, which is generally how I want to it to look.:
However when I send it to Lotus Notes (I am using the testing tool PutsMail to send jt to my Lotus Notes email account, here is what I get. I know it looks almost the same, but it is not.There is extra space on the left.
I have struggled for hours trying to figure out what is wrong.
Can anyone see something that I am missing.
I've got a HTML table with several cells inside, the border=0 property is set yet the border does not go away, what am I doing wrong?
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td>
<br><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
Change the first cell spacing to 0
So here's the code:
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0"
bgcolor="#CCCCCC">
<tr>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td><br>
<br></td>
</tr>
</table>
</td>
</tr>
</table>