Amid the COVID-19 outbreak, Folio3 aims to help clinics serve patients with telemedicine effectively.

How To Stylize Magento Email Templates With CSS File

How To Stylize Magento Email Templates With CSS File
COMMENTS (0)
Tweet

Styling emails are always difficult for web designers. You need to be extra careful when designing email templates as clients tend to behave differently on different emails. Some of them prefer non inline templates, whereas some require inline styles and ignore references.

In this blog, I will give you a comprehensive rundown on how to effectively style your email templates with CSS file.

Since the recent upgrade, Magento 1.9.1 now allows you to define inline CSS in a separate file that automatically adds or injects within style attributes of each element. It uses two types of CSS files, a file for injecting inline CSS (“email-inline.css”) and files for non-inline CSS (“email-non-inline.css”) that are configurable.

First, let’s have a look at how to add inline CSS file:

Inline CSS File

To add inline CSS file make sure your template contains following directive:

 

Please note that all email templates contain this directive as it supports standard Magento Fallback hierarchy. An easy way to start can be as follows:

  • Copy “email-inline.css” from skin/frontend/base/default/css/email-inline.css to skin/frontend/custompackage/customtheme/css/email-inline.css
  • Make sure to add {{inlinecss file=”email-inline.css”}} in your template file. It can only be defined once and not within templates included in other templates, such as footer.html
  • Add your CSS styles in this file, which can be used in your template.

Magento 2 customization

Supported CSS selectors (Reference)

Non Inline CSS

There are few styles which cannot be applied inline rather it requires separate style tag. For these, Magento supports variable {{var non_inline_styles}}, which loads CSS defined in:

  • Files mentioned from System > Configuration > GENERAL > Design > Transactional Emails > Non-Inline CSS Files field
  • Defined in following tag
    • <!–@styles
      @–>

 

Magento 2 customization

 

Problem with CSS File

When emails are scheduled and sent using Cron Job, Magento does not consider current theme for store. Therefore, it does not apply CSS from file. To resolve this issue, you must put all these CSS within styles tag. To further avoid duplication, you can copy these within header template so that it is available in all other email templates too.

In a nutshell, you can define 2 types of CSS, “inline” & “non-inline”, both of which can be managed within separate files, in email templates. However, it is essential to note that these files cannot be used when emails are sent using Cron Job.

I hope that you find this blog helpful in organizing your Magento email template with CSS file.

Please feel free to comment or reach out if you have any questions. If you need any help with customizing your Magento or Magento 2 web store, please get in touch with us.

CALL

USA408 365 4638

VISIT

1301 Shoreway Road, Suite 160,

Belmont, CA 94002

Latest From Our Blog

Why the Daily Scrum is NOT a Status Meeting?

February 3, 2020
I am here today to debunk, The Myth “The Daily Scrum is the Status Meeting”. This is a key misconception in the industry and often resu...
Read more

A Complete Guide to Custom Caching in Magento 2...

November 29, 2019
In this blog, I will explain how to create your own cache in Magento 2, and how to read and write data from that custom cache. I hope after reading...
Read more

React Hooks

September 3, 2019
React is a javascript framework for building interactive client side interfaces along with the integration with back-end server. React considers th...
Read more