Magento – How to style transactional email with email-inline.css

cssemailemail-templatesmagento-1.9transactional-mail

I am using Magento 1.9.1. I want to customize my Magento Transactional Emails. To do so, I duplicated email-inline.css and email-non-inline.css from base package into my customized package (into this path: \skin\frontend\mypackage\default\css ).

I made the necessary changes and I uploaded the updated css but the emails arrive with the same design as before, as if the system was unaware of my custom css.

What do I have to do?

Best Answer

Here's one thing you could try.

NOTE: This will only work for email templates that include use the {{var non_inline_styles}} variable.

Create a file called email-custom.css and add all the custom <CSS> that you need
Upload this file to skin/frontend/YOURPACKAGE/YOURTHEME/css/
In your Admin Panel go to System > Configuration > General > Design > Transactional Emails and add the email-custom.css file to the Non-inline CSS File(s) field like in the image below (using commas to seperate files)
Save config and flush all cache

Related Solutions

Magento – New Magento theme wont load theme styles

You seem to be talking about two different things. In Magento, there are

a) packages
b) themes

The package defines the first folder and the theme the underlying "child" folder. An example:

app/design/frontend/PACKAGE/THEME

Furthermore, you can specify a separate folder for your skin via the backend settings, but it will be in the same package that you configured.

So, say you put package = mycompany and theme = mytheme and skin = myskin,

then your paths will be:

app/design/frontend/mycompany/mytheme/template -> for phtml files
app/design/frontend/mycompany/mytheme/layout   -> for layout xml files, e.g. local.xml
skin/frontend/mycompany/myskin                 -> for skin files like css, js, images

How to Get Current Custom Transactional Email Template ID

The template is not aware of the email template that is calling it.
If your template needs to look differently based on the e-mail, you need to use 2 templates for 2 different emails.
I mean instead of using in both of them

 {{layout handle="some_handle_here"}}

in both of them, you need to use in the section one something like this:

 {{layout handle="some_other_handle_here"}}

and create the new layout handle in one of your layout files and use a different template file.

Best Answer

Related Solutions

Magento – New Magento theme wont load theme styles

How to Get Current Custom Transactional Email Template ID

Related Topic