I've set up some Magento autoresponders, they all look fine when previewed in admin Transactional emails. However, when they are actually sent to a customer the formatting is different to that of the preview, font size and type varies for different paragraphs within the email - it looks a mess!
There must be css or similar applied at another level, problem is I don't know where or how.
Our Magento was set up by a developer and I'm not convinced that best practices have been followed.
Can anyone shed any light please?
Thanks in advance.
RobH
Email templates will be in app/locale/en_US/template/email/
You can customize them from backend system->transactional emails,
These links may be useful for you :
http://www.webspeaks.in/2011/06/customize-new-order-email-template-in.html
https://www.yireo.com/tutorials/magento/magento-theming/1670-customizing-magento-email-templates
http://www.demacmedia.com/magento-commerce/customizing-magento-transactional-emails/
http://www.gemgento.com/blog/customizing-magento-order-emails
Read comments as well.
Cheers :-)
I've now fixed the problem, posting it here in case it helps any other frustrated amateurs (like me!).
The system templates mostly appear to have an extra " in the h1 tag, this was causing the h1 tag to be applied to the entire body text when creating custom transactional emails. See the middle section of the code below, 11px 0;""
h1 style="font-size:22px; font-weight:normal; line-height:22px; margin:0 0 11px 0;"">Hello, {{htmlescape var=$order.getCustomerName()}} /h1
Cheers
H
Ok, I'd stupidly ignored the 'Template Styles' details, it was empty for the templates that were displaying really badly. I've now included the basic
body,td { color:#2f2f2f; font:12px/1.35em Verdana, Arial, Helvetica, sans-serif; }
info that the rest of the templates seeed to be using. It's better but still not how I want it.
Can anyone advise where this default style can be edited to reduce text size please? I still don't really understand what's going on :-\
Related
i'm trying to use a webfont from typekit in mail chimp but the font isn't holding once the email is sent. right now I'm doing it like this
<head>
<script src="https://use.typekit.net/gge4dxp.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
.tagline {
font-family: proxima nova;
font-weight:100;
text-align:center;
}
any ideas? i've looked around and it seems sometimes the head gets stripped out? is there a more sure way to embed this font?
Web fonts are barely supported in email clients. The only places that it is really supported is Apple Mail, iOS, some native Android clients and Thunderbird. Everywhere else just strips the tags. If you know the majority of your subscribers use these email clients, then you should have no issue, but for all others, it may not be worth the font stacking effort.
The other issue you are having is that there are 0 email clients that will accept ANY javascript. This is a security issue, so to stave off any potential threat they wipe it all away.
The only way to bring in a webfont is via #import, via #font-face or <link>.<link> has the best support, but as I said above, all have meager support. For more detailed info on webfonts in email, visit: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/
For typography tips see: https://litmus.com/blog/typography-tips-for-email-designers
I've been banging my head (as expected with email) trying to make a rather complicated responsive email function correctly in every mail client Litmus.com offers for testing.
I've pretty much reached a solution, which involves scattering a few conditionals for (gte mso 9), (IE) and !mso et al. The problem is Outlook.com ignores them.
My final problem is that the repeatable items that compose the main part of the email don't display well in Outlook.com. I've tried adding a class to the item designed specifically for Outlook.com, setting that to display: none and then prepending ecx to the class name and forcing display: block on that. Unfortunately that seems to affect Gmail.com, too.
Does anyone know of a reliable way I can handle this situation? I can't see any way I can make it work properly with Outlook.com's whacky rendering without some form of conditionals.
The last-ditch solution I can think of is to display a message linking to an image or HTML version of the email.. but it's slightly more complex since the email is generated dynamically, on a per-user, per-time basis.
Only thought I have to help would be to use the 'mso-hide:all' css. Mind you in nested tables, you will need to use on each section to make sure it is not rendered.
e.g. <table style="mso-hide:all;">
I have not tested this in Outlook.com, but thought maybe it might help...
I am in quite a bind with my company's website. My company has spent thousands on this website and I am limited to using a non-open-source CMS system. I had to fight (and we paid $1,200) so I could be provided one CSS page to work in. Our website developers charge us up-the-wazoo for every little change so I cannot ask them to program this (they would probably estimate $3-5k for the work).
Our original lighthouse page, here (live): http://www.golakehavasu.com/activities/more_to_do/lighthouses.aspx has this terrible code where the user clicks on the lighthouse name and a separate window pops up with a photo of the lighthouse. By the time the user is done, 23 separate windows have been opened. Since we are a vacation community and we get a lot of snowbirds in the winter, and I have to explain how to double-click, we get calls from them wondering why our website corrupted their computer (yes, this really happened). I'd love to ignore the calls, but I can't. I needed a better solution for those less web-savvy.
I wanted to convert these images into a hover/popup situation, and although being very limited due to the developer's lockdown of the site (and not being a total tech-head coder), I was able to research some code and get the popups to reasonably work. The test page is here (not live): http://www.golakehavasu.com/test.aspx
One major problem: When getting near the bottom of the lighthouse table, the lighthouse photos are underneath the footer and are not visible; this won't fly with the boss.I need those popups to stay within the browser window, and have zero access to upload a file directly to the server (I can only create pages through the CMS back-end system). My hands are tied here. Any help would be greatly appreciated, and it would score me some big points with the boss-man (and possibly help to get me hired on full-time with medical insurance benefits).
I'm trying to copy/paste my code but it's getting stripped. Tried to post the website where I got the code but the system says my reputation is under 10 so I can't post more than 2 links.
Again, please help.
I have no idea why I am doing this, other than I am really bored...
Set .lighthousepopup a:hover span to have margin-top: -350px;. This will shove the pictures up so the bottom is inline with the hyperlink and they don't fall off the bottom of the screen.
But now you have the same problem on the top, so you'll need to fix the first few rows to not have this using the nth-child selector. Because of the weird layout of the table (caption below the column headers and everything in tbody, really?), the first row is actually the 6th, so you'll need to start there.
table.grid tr:nth-child(6) td .lighthousepopup a:hover span,
table.grid tr:nth-child(7) td .lighthousepopup a:hover span,
table.grid tr:nth-child(8) td .lighthousepopup a:hover span,
table.grid tr:nth-child(9) td .lighthousepopup a:hover span
{
margin-top: 0px;
}
So now rows 1-4 have the top of the image inline with the link, and the rest of the table has the bottom of the image inline with the link.
I've searching some answer, like this but nothing works.
How can I insert custom fonts (for me is Proxima Nova that I use until with typekit) in a newsletter?
Like as Jukely use in their email hat works on any email client!
Please someone can help me?
Thanks, Enri
Unfortunately Typekit requires Javascript to work, which is a big no-no in emails. You have two options:
You can download and host the font on your own domain, and use #import to link to it (detailed instructions are the same as option 2):
#import url('https://www.mydomain.com/fonts/proxima-nova.css');
You can find a somewhat similar font in the Google Fonts library (such as 'Montserrat'), and use CSS #import, as described in the Campaign Monitor link. You can use it like this:
<style>
#import url(http://fonts.googleapis.com/css?family=Montserrat);
h4 {
font-family: Montserrat, Arial, sans-serif;
color: #444444;
font-size: 24px;
}
</style>
You will still see your back-up font (Arial, sans-serif in the example) in a lot of email clients, so make sure you're prepared for that, but you should be looking pretty good in iOS Mail, Outlook, Apple Mail, Android (default client) and Thunderbird.
#font-face support is much worse in emails, with only the Apple Mail app seeming to support it, FYI.
Sources:
http://css-tricks.com/custom-fonts-in-emails/
http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email
Hi I am building a small web based email client. I am facing problems in displaying HTML mails. What are the best practices involved in displaying an HTML mail? Some things I found
Css Reset
Strip body tag in the mail
First of all, it's important to not allow all the CSS and HTML tags. I would look for the file and allow a defined set of HTML tags and CSS attributes.
For example, if you reset the CSS, you can still send stuff like <iframe>, <form> and all other possible malicious tags.
So I would start of thinking what kind of HTML tags would you like to support, and strip all other ones out of it. And then the same for the CSS.
This is by no means easy. I mean you also would have to take in account things like people trying to break your interpreter...
You could look into this Sitepoint Blogpost, it describes how people should code HTML-emails. So it might be a good idea to start there and see what's usually supported.
The one sentence answer would be "1. Use table-based layouts, 2. only inline CSS, and 3. test in every email client possible."
The client testing is probably the most important because every email client (and client + browser combination) may have its own quirks and many are just learned along the way; such as using HTML attributes width & height because Outlook won't always follow the inline styles for width & height, or that Gmail tends to add margins around images unless you explicitly set margin:0 for the HTML elements, etc. etc.
When fixing the look of an HTML email in one client ends up breaking it in another client, don't keep adding more and more styling: try to simplify the HTML/CSS, even if it means writing more markup. For example, if padding and margins don't look right, the same look could be achieved by adding more rows or columns to the table and fixing their heights/widths. More tags is simpler than worrying about how all the email clients will render the CSS box model.
There's a lot of articles and blog posts on HTML-for-email such as http://articles.sitepoint.com/article/code-html-email-newsletters that are helpful -- though a lot are out of date with newer versions of clients.