I have a problem with newsletter css. I created a new template and added the css in the box below the template Template Styles. I also addes two widges in my template. when i preview newsletter is fine but when i sen it for test as email it does not load any of the css just the html.

Any suggestion what have i done wrong ? thanks in advance

  • Would be handy if you can post the HTML of your email together with the screenshot when preview and when rendered in actual email. May 2, 2015 at 9:17

4 Answers 4


Some e-mail clients don't support all CSS, especially background graphics. That's a common mistake I see people make.

Also be sure to NOT add <style> tags around your css in the Template Styles section.


Template Content

<div class="testtitle">This is a 28px title</div>

<div class="test">This is a section of red text.  Both of these are pulling from the "Template Styles" below.</div>

Template Styles

.test {color:#ff0000;}

.testtitle { font-size:28px; }

Here is the result:

enter image description here

  • My newsletter does not have css at all not only background. how can i build a template to work with css ?
    – Ylli
    Feb 3, 2015 at 15:06
  • You can use classes in your e-mail Template. Just be sure to define the css in the area designated for it in the Newsletter Template editor in the admin. See edited answer for a quick example. Feb 3, 2015 at 16:24

Email newsletters do not support external CSS
Make sure all your css is inline and background images have the full path to the file on your server. As CSS with relative paths will not be displayed in the email, Although the Magento preview will work properly


Recently I've stumbled upon same problem. For unknown reasons css styles in my templates didn't work at all since the first time I used magento newsletter system.

It appears that problem was that in my newsletter template I didn't use proper directives for including header / footer. Which are: Header:

{{template config_path="design/email/header"}}
{{inlinecss file="email-inline.css"}}

and Footer:

{{template config_path="design/email/footer"}}

Including them respectively at the beginning / end of template solved my problems.


Include header {{template config_path="design/email/header"}} which refers to app/locale/your_langauage/template/email/html/footer.html that has below code in it


Just include {{var non_inline_styles}} after <body> if you don't want to use header template.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.