If I specify Arial as the font for a table, will that cascade down as the default font for all cells/tables within the table?
E.g would this work consistently among popular email clients?
<table align="left" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
<table width="100%">
<tr>
<td>
Another table - would the text here still be Arial?
</td>
</tr>
</table>
</td>
</tr>
</table>
Have just tested in Outlook 2013 and it fails miserably. Not sure how it fairs in the many other better clients but I guess if you want to support the shockingly bad Outlook the answer is to specify styles on every table cell.
It will work for some clients but not for all.. especially in Outlook 2010 and 2013. (same for the percentage of the width)
The best is always to specify the wanted styles and fonts for each <td>
like in the following:
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100%;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 13px;">
Another table - The text here will be formatted for all clients
</td>
</tr>
</table>
</td>
</tr>
</table>
Specifying the font in every new table tag should be sufficient. I'd just copy the style value from your initial table and reuse it for every child table.
You can specify styles on every TD if you want to, but unless something has gone badly wrong (or a new version of Outlook changes this) font styles will apply to all table cells until you enter a new table.
Something like:
<table align="left" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
<table width="100%" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
Another table - would the text here still be Arial?
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
Can anybody provide me with the code for this design? in the email template, I need to make this design. Text can be changed dynamically.
Email clients usually have poor support for properties like position or negative margin values. See:
Can I email… position
Can I email… margin
However, there’s a popular technique among email developers called “Faux absolute position”. The idea is to use max-height in a parent element to limit the space taken by children element in the flow. You can then position children element using positive margin values or text-align. You can read this article about it.
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;"><tr><td>
<![endif]-->
<div style="max-width:530px; margin:auto;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;">
<tr>
<td style="padding:0 20px 20px; border:1px solid #eee;">
<div style="max-height:17px;">
<div style="margin:0 20px; padding:5px 20px; background:#fc2d6a; border-radius:5px;">
<p style="margin:0; color:#fff; font:16px/1.5 sans-serif; text-align:center;">
You’ve been referred!!!
</p>
</div>
</div>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tr>
<td style="padding:20px; border:2px dashed #fc2d6a;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
This wouldn't work as it is in Outlook on Windows and you’d need to add a VML fallback version.
I have a question regarding the magento order emails.
I have created my own order template by loading the default template and modifying it. When i take a look via the 'preview template' button on there, the email appears without order information (of course) but with every styling etc.
However when my customer gets the email it is pure text with no styling at all.
What could i have been doing wrong
Idk if it helps but here is my email template:
{{template config_path="design/email/header"}}
{{inlinecss file="email-inline.css"}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style='background: #fff' class="email-heading">
<h1 style='color: #68883e;'>Thank you for your order</h1>
<p>Your order is being process right now</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="order-details">
<h3 style='display: inline; float: left'>Your order <span class="no-link">#{{var order.increment_id}}</span></h3>
<p style='display: inline; float: right'>Placed on {{var order.getCreatedAtFormated('long')}}</p>
</td>
</tr>
<tr class="order-information">
<td>
{{if order.getEmailCustomerNote()}}
<table cellspacing="0" cellpadding="0" class="message-container">
<tr>
<td>{{var order.getEmailCustomerNote()}}</td>
</tr>
</table>
{{/if}}
{{layout handle="sales_email_order_items" order=$order}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="address-details">
<h6>Bill to:</h6>
<p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>
</td>
<td class="address-details">
<h6>Client:</h6>
<p><span class="no-link">{{var order.getclientfirstname().format('html')}}</span></p>
</td>
</tr>
<tr>
{{depend order.getIsNotVirtual()}}
<td class="method-info">
<h6>Shipping method:</h6>
<p>{{var order.shipping_description}}</p>
</td>
{{/depend}}
<td class="method-info">
<h6>Payment method:</h6>
{{var payment_html}}
</td>
</tr>
</table>
</td>
</tr>
</table><!-- asd-->
{{layout handle="sales_email_order_items" order=$order}}
{{template config_path="design/email/footer"}}
You shouldn't use the CSS classes to stylize the templates.
Also, you shouldn't use the file with the styles info, that is located anywhere else, as they are not supported by the majority of the email services.
Instead, you can directly use the attribute tags (to implement the stylazation) or use the styles right in the email code (using the tag <style>)
And here is the list of tags you can use:
https://www.campaignmonitor.com/css/
My Laravel Web App regularly sends out notifications about system changes via Mandrill.
Unfortunately, all mails sent by Mandrill are moved to my spam-box with the message:
[Caution: Message contains Redirect URL content]
Question 1:
What is this message about? I think it's because my server sets the sender-address to "noreply#domain.com"
Question 2:
Is there any possibility to prevent that? Maybe there are just some additional configs needed.
Additional Informations:
The receiving mail-server is based in my company. Mails are checked through the Symantec Messaging Gateway. The description from Symantec is:
Redirect URLs include free hosting sites, URL shortening services, and
URL redirecting services which can potentially be abused to deliver
spam or malware payloads. Symantec Messaging Gateway can filter
against email messages that contain one or more redirect URLs.
My email-program is MS Outlook 2010
Here is also the html-template of the mail I want to send:
<body bgcolor="#f7f7f7">
<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%">
<tr>
<td align="left" valign="top" width="100%" style="background:repeat-x url(##obfuscated##) #ffffff;">
<center>
<img src="##obfuscated##" class="force-width-gmail">
<table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="##obfuscated##" style="background-color:transparent">
<tr>
<td width="100%" height="80" valign="top" style="text-align: center; vertical-align:middle;">
<center>
<table cellpadding="0" cellspacing="0" width="600" class="w320">
<tr>
<td class="pull-left mobile-header-padding-left" style="vertical-align: middle;">
<img width="167" height="35" src="##obfuscated##" alt="logo">
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" style="background-color: #f7f7f7;" class="content-padding">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320">
<tr>
<td class="header-lg">
Hallo {{$name}}!
</td>
</tr>
<tr>
<td class="free-text">
Just a text
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" style="background-color: #ffffff; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;">
<center>
<table cellpadding="0" cellspacing="0" width="600" class="w320">
<tr>
<td class="content-padding">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="header-md">
Just a text
<!-- something like:
<tr><td style="padding: 10px 10px 10px 0px;text-align: left;">'.$offline_posting->link.'</td><td style="padding: 10px 30px 10px 0px;">'.$offline_posting->job_id.'</td><td style="padding: 10px 0px 10px 0px;color: red;">offline</td></tr> -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom: 75px;">
<table>
{{$postingslist}}
</table>
</td>
</tr>
<tr>
<td class="button">
<div><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://188.166.43.201/" style="height:45px;v-text-anchor:middle;width:155px;" strokecolor="#ffffff" fillcolor="#73479c">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">check changes</center>
</v:rect>
<![endif]--><a class="button-mobile" href="http://188.166.43.201/"
style="background-color:#73479c;color:#ffffff;display:inline-block;font-family:'Cabin', Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;line-height:45px;text-align:center;text-decoration:none;width:155px;-webkit-text-size-adjust:none;mso-hide:all;">check changes</a></div>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" style="background-color: #f7f7f7; height: 100px;">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320">
<tr>
<td style="padding: 25px 0 25px">
<strong>Heading</strong><br />
Coding by Me<br />
© 2015 some company<br /><br />
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
It's going to depend on your receiving mail server why it's appending that message or noting that - since the message says something about redirect URL content, then you'll want to look at the URLs in the message - but that's just a guess - we'd need to know what spam filter or mail program you're using since they're all going to work a bit differently.
Some spam filters flag emails that contain tracking URLs, but not all. Others flag content when the text in the email looks like it's pointing to Site A, but the HTML actually points the link to Site B (ie, something designed to make you think you're really going to Paypal but that points you to a phishing site).
Here's an example. If you're sending something like this to Mandrill for processing:
example.com
When Mandrill's tracking link gets applied, it'll appear in the email like the below, which looks phishy since it looks like you're being directed to example.com but in reality are going to a Mandrill/tracked link first:
example.com
To address this, make sure the text that appears isn't a URL. So send something like this:
Click here to go to my site
The above is mostly educated guess based on the message being displayed in your mail program - again, it's going to vary, so knowing more about that is/would be helpful.
Finally found the solution for myself:
On the first hand, it was indeed the button "check changes", which declarated the Mail as fishing-mail, but didn't help with the prefix [Caution: Message contains Redirect URL content]
This was caused of the fact that I was sending an entire HTML-document including
<!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">
Removing the according lines solved the problem.
Thanks to all!
I have my template set up to repeat a block of html between the |RSSITEMS:| tag, but my question is how to limit the number of times that block gets repeated.
Thank you in advance.
The best solution that I've found is to use MailChimps |FEEDITEMS| merge tag as it offers more granular control than the |RSSITEMS| tag. Here's a snippet for creating a repeatable block that only pulls the 5 most recent items in an automated-RSS campaign (notice the "$count=" declaration):
*|FEEDBLOCK:http://website.com/feed/|*
<table width="600" align="center" cellpadding="0" cellspacing="0">
*|FEEDITEMS:[$count=5]|*
<tr>
<td valign="middle" align="center">*|FEEDITEM:TITLE|*</td>
</tr>
<tr>
<td valign="middle" align="center">*|FEEDITEM:DATE|*</td>
</tr>
<tr>
<td valign="middle" align="center">*|FEEDITEM:CONTENT_FULL|*</td>
</tr>
*|END:FEEDITEMS|*
</table>
*|END:FEEDBLOCK|*
I'm designing a responsive email, and I have two tables in one <td>. The second table is not top aligned in Outlook 2007 and 2010:
Both tables inside a td have a pixel width but rest of the tables inside these two tables have width=%.
I tried align left and right, as well as style="mso-table-lspace:0;mso-table-rspace:0;" but it's still not working.
I ran into the same problem. I suspect it is due to Outlook using Word to render HTML and Word is getting confused and barfing up a page break.
I recommend placing each of the tables inside cells of a parent table. Then apply your style to the cells of the parent table. Note that "float" is generally bad to use in HTML for email, but since it's in a media query means it's safe to use.
CSS:
#media only screen and (max-width: 500px) {
.floatLeftResponse{
width:100% !important;
float:left;
}
}
HTML:
<table width="800" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
<tr>
<td width="50%" valign="top" class="floatLeftResponse">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td> <!---bla bla bla this is your left column content-->
</td>
</tr>
</table>
</td>
<td width="50%" valign="top" class="floatLeftResponse">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td> <!---bla bla bla this is your right column content-->
</td>
</tr>
</table>
</td>
</tr>
</table>