How to style transactional email with email-inline.css

Question

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?

• Fabian Blechschmidt: Which files did you copy where?
• nano: Have you fixed this? I'm having this same problem.

Answer 1

Here's one thing you could try.

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

1. Create a file called email-custom.css and add all the custom <CSS> that you need
2. Upload this file to skin/frontend/YOURPACKAGE/YOURTHEME/css/
3. 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)
4. Save config and flush all cache

Magento Transactional Email Custom CSS

Answer 2

What i did was adding {{var non_inline_styles}} on template content and then i added all my styles on the template styles.enter image description here

Answer 3

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/templates/template-email.html

refer this for both non-inline and inline CSS for mobile templates.