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:

{{inlinecss file="email-inline.css"}}

 

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.

Supported CSS selectors (Reference)

• type
• class
• ID
• universal:
• attribute:
  • presence
  • exact value match
  • value with ~ (one word within a whitespace-separated list of words)
  • value with | (either exact value match or prefix followed by a hyphen)
  • value with ^ (prefix match)
  • value with $ (suffix match)
  • value with * (substring match)
• adjacent
• child
• descendant
• pseudo-classes:
  • first-child
  • last-child
  • not()

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
    @–>

 

 

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.