I'm in the process of creating a custom mailchimp template, but I've hit a snag with some social media buttons.
*|TWITTER:TWEET|* *|FACEBOOK:LIKE|*
outputs this:
What I need is this:
Since this is a custom template, I can't drag and drop prefab icons into the design. Here are some of the alternate methods I've tried:
<img src="~fb_icon~">
<img src="~tw_icon~">
When sent, the url is stripped from the image or returns nothing between the quotes.
If any mailchimp experts can offer some insight, I'd appreciate it.
I think you should consider using content encoding merge tags, such as |HTML:YOUR_MERGETAG|
Here a useful link
http://dev201.nl/mailchimp-merge-tags-cheatsheet/
This worked for me
<!--my sharer-->
<p>
<table width="300" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="35" align="left" valign="middle"><img height="30" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-twitter-96.png" width="30" /></td>
<td width="58" align="left" valign="middle"> Tweet</td>
<td width="35" align="left" valign="middle">
<img src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-facebook-96.png" width="30" height="30" />
</td>
<td width="80" align="left" valign="middle"> Facebook</td>
<td width="35" align="left" valign="middle"><img height="30" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-linkedin-96.png" width="30" /></td>
<td width="65" align="left" valign="middle"> Linkedin</td>
</tr>
</tbody>
</table>
</p>
<!--ends my sharer-->
Related
I have a recurrent issue with Outlook email rendering, gaps appear in the email
It looks like lines between the table and the color of the background doesn't apply
Here is an example :
email screenshot
I know this is an issue that is common but I couldn't find a solution with the search bar
Here is some code :
<table class="responsive-table" border="0" cellspacing="0" cellpadding="0" align="center" width="650" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" >
<img src="picto-Certifie-BIO.png" alt="Certifie BIO" width="100" height="100" />
</td>
<td style="background-color: #ffffff;" width="15">
</td>
<td align="center" >
<img src="picto-Anti-gaspi.png" alt="Anti gaspi" width="100" height="100" />
</td>
<td style="background-color: #ffffff;" width="15">
</td>
<td align="center" >
<img src="picto-Clean-et-naturel.png" alt="Clean et naturel" width="100" height="100" />
</td>
<td style="background-color: #ffffff;" width="15">
</td>
<td align="center" >
<img src="Picto-Fait-en-France.png" alt="Fait en France" width="100" height="100" />
</td>
</tr>
</tbody>
</table>
Thank you for your help,
Hind
I'm sharing here what I found out it case someone needs it:
The issue was with the tables height, so I had to find ways to reduce the height of the tables surrounding the ones with the gaps.
Here is a link that helped me (in French)
https://www.badsender.com/2019/05/28/bug-daffichage-sur-outlook-2016/
I've tried several options to do this, but none have worked. Just trying to remove the padding around the images and tighten up the table. I'm thinking there must be some inline style I can use, but I'm too much of a novice to figure this out just yet. Any help would be greatly appreciated.
Here is the html generated from photoshop.
<table id="Table_01" class=" alignleft" style="height: 291px" border="0" width="570" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"> <img src="http://oceanleadership.org/wp-content/uploads/BOEM-Logo.jpg" alt="http://www.boem.gov/" width="297" height="115" border="0" /></td>
<td colspan="2"> <img src="http://oceanleadership.org/wp-content/uploads/JASCO-Logo.jpg" alt="http://www.jasco.com/" width="273" height="115" border="0" /></td>
</tr>
<tr>
<td> <img src="http://oceanleadership.org/wp-content/uploads/CSA-Ocean-Sciences-Inc.-Logo.jpg" alt="https://www.csaocean.com/" width="152" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/IFAW-Logo.jpg" alt="http://www.ifaw.org/united-states" width="145" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/MBARI-Logo.jpg" alt="http://www.mbari.org/" width="125" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Schmidt-Ocean-Institute-Logo.jpg" alt="https://schmidtocean.org/" width="148" height="96" border="0" /></td>
</tr>
<tr>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Teledyne-Marine-Logo.jpg" alt="http://www.teledynemarine.com/SitePages/HomePage.aspx" width="152" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Ocean-Sonics-Logo.png" alt="http://oceansonics.com/" width="145" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/L3-Maripro-Logo.jpg" alt="http://www.l-3mps.com/maripro/" width="125" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Sea-Bird-Scientific-Logo.png" alt="https://sea-birdscientific.com/" width="148" height="80" border="0" /></td>
</tr>
</tbody>
</table>
<br />
Using an inline style isn't a great idea, but including the attribute style='padding: 0px, margin: 0px' inline in your img tags would ensure the browser isn't rendering any extra space around the images themselves. A better option would be to include a .css file with the rule:
td img {
padding: 0px;
margin: 0px
}
That rule should automatically assign the styling to all img tags within your table.
Its Problem with Image I removed your style still its having white space its because of your images.
You can see below
your code
<table id="Table_01" class=" alignleft" style="height: 291px" border="0" width="570" cellspacing="0" cellpadding="0">
I removed this style and tried here
Demo
I'm trying to make a template on MailChimp, but I can't style it properly. There are a few caveats though: the CSS styles have to be in-line and it has to be structured as <table> tags.
This is what I have so far
This is the end-goal
Here is my code so far:
<section id="header" style="background-color: #148e97;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailHeader">
<tr>
<td align="right" valign="">
<div class="socialMediaIcons">
<img src="img/facebook.png"/>
<img src="img/twitter.png"/>
<img src="img/mail.png"/>
<img src="img/linkedin.png"/>
</div>
</td>
</tr>
</table>
<table id="title" width="500">
<tr>
<td align="left" valign="">
<img src="img/logo.png"/>
</td>
<td style="">
<h1 style="text-align: right; "
style="font-family: arial;">Brand USA E-News -- April 2016</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
</section>
When creating HTML emails, you need to transport yourself back in time, to a time when Internet Explorer 6 was cool.
You cannot use <section id="header"> or class="socialMediaIcons" because not all email clients support the <style> tag. HTML5 elements are most unsupported, and your CSS needs to be inlined and used with the style="..." attribute. There's a lot of mixed support for CSS in email clients, so you're forced to cater for the lowest common denominator.
The following code gives you a starting point for how to create your layout:
<html>
<body style="margin: 0; padding:0">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff">
<tr>
<td valign="center">
<div style="background-color: #148e97; width:660px; margin:auto;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="660" bgcolor="#148e97">
<tr>
<td width="30">
<img src="http://placehold.it/1x1" width="30" alt="Spacer">
</td>
<td width="130">
<img src="http://placehold.it/130x115" alt="Logo">
</td>
<td valign="top" width="500">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="500">
<tr>
<td>
<img src="http://placehold.it/1x1" width="1" height="20" alt="Spacer">
</td>
</tr>
<tr>
<td align="right">
<div class="socialMediaIcons">
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
</div>
</td>
</tr>
<tr>
<td align="right">
<h1 style="text-align: right; font-family: arial; color: #fff;">Brand USA E-News -- April 2016</h1>
</td>
</tr>
</table>
</td>
<td width="30"><img src="http://placehold.it/1x1" width="30" alt="Spacer"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
One thing you'll notice is there are a lot of <table> tags in other <table> tags inside even more <table> tags. Things get messy.
I've used the old school technique of spacer.gif (using http://placehold.it/1x1 in lieu of a 1x1.gif image), which is no longer needed these days when building websites.
Hopefully this code sets you on the right path. I haven't built HTML emails for 5+ years, so I'm a little rusty.
I am trying to create a "cool" email signature for my company using only text and html with NO images whatsoever. I am trying to recreate our company's logo using only tables since it is basically a four cell table with different bg colors. What seemed easy at first has become quite a nuisance. It obviously looks good in browsers but once I paste it into Outlook 2013 the cells don't retain their height and width values. Any suggestions on how to make this work across most current email clients??
http://codepen.io/anon/pen/wqaLm
Firstly, a good technique is to style your cells inline like:
<td style="width:10px; height:10px;">
Secondly: have a look at this article: "A complete breakdown of the CSS support for every popular mobile, web and desktop email client"
Here is a basic example. Not sure exactly what the logo looks like, so here are a few versions. If you want to have the gap between the cells smaller than 20px, you need to use the 3rd technique. This is because Outlook has a min-height on cells of around 19px which will create a larger gap between the rows.
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50" bgcolor="#333333">
</td>
<td width="50" height="50" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="50" height="50" bgcolor="#444444">
</td>
<td width="50" height="50" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40" height="40" bgcolor="#333333">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="40" height="20">
</td>
<td width="20" height="20">
</td>
<td width="40" height="20">
</td>
</tr>
<tr>
<td width="40" height="40" bgcolor="#444444">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30" height="30" align="left" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#333333">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#555555">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30" height="30" align="left" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#444444">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#666666">
</td>
</tr>
</table>
</td>
</tr>
</table>
I am having trouble making a rounded button with images.. the button displays fine in a browser but inside an email client (this includes yahoo and gmail) the button breaks..
here is the HTML table code that i am using:
<table width="144" cellpadding="0" cellspacing="0" border="0" style="background-color: #9C084A">
<tr>
<td width="12"><img src="http://thehotdeal.net/clients/1/padma/1.gif" width="12" height="12" border="0" alt="...">
</td>
<td width="130"></td>
<td width="12">
<img src="http://thehotdeal.net/clients/1/padma/2.gif" width="12" height="12" border="0" alt="...">
</td>
</tr>
<tr>
<td cellpadding="0" cellspacing="0" border="0"></td>
<td align="center">
<p style="padding: 0"> <span mc:edit="date" style="color: #ffffff;">2012 - $25</span></p>
</td>
<td cellpadding="0" cellspacing="0" border="0"></td>
</tr>
<tr>
<td>
<img src="http://thehotdeal.net/clients/1/padma/3.gif" width="12" height="12" border="0" alt="...">
</td>
<td cellpadding="0" cellspacing="0" border="0"></td>
<td>
<img src="http://thehotdeal.net/clients/1/padma/4.gif" width="12" height="12" border="0" alt="...">
</td>
</tr>
</table>
Here is how this looks.. notice a line below it..!
There are a few elements could be altered to make this render better cross client:
display:block; on your images
put your background color on each td individually using bgcolor="#9C084A"
explicitly set width and height on each td
use valign on your images if need be
Here is the jsfiddle with these alterations - http://jsfiddle.net/X5QTR/