Is there a way to apply one css file to all transactional emails?

Question

The question is quite self explanatory. I'm wondering if there is any way to apply a single CSS file to all emails? Magento is dependent on so many emails it's really daunting to imagine having to manually edit each one.

Answer 1

I have not tested the following steps but I think using this way you can make it easier to handle email template styles. In emails no external css works so

1. either you have to put inline css or css in head .
2. Make a static block and write your css in .
3. Include the block in your email templates .

Hope this would work.

Note: CSS classes can not be used to style the emails.

Edit: Just found this sheet , check CSS support for email templates of different email client

Answer 2

I have worked some on dealing with the inherent flaws of the transactional email system... a lot of times these just get neglected because of how much time is involved in creating custom emails. Clients may have a difficult time justifying a developer spending 20-30 hours (if he is experienced with Magento's email system and HTML email in general, possibly 50-60 hours if he is not!) getting it all nice and complete.

A few tools that I recommend highly when dealing with HTML emails in general:

http://premailer.dialect.ca/

This will take an email (or just HTML in general, but email is what it is for) that is built using CSS and classes/ids and push all the styles inline (among other options) so that it will be friendly for email clients. They have an API that you can also use. I have spent some time more than a year ago working on a module that (among other things) integrates the API. I haven't looked at that code in some time, and it wasn't polished up, but there is a lot of potential for fixing Magento's email flaws that might incorporate premailer.

http://www.emailology.org/

http://htmlemailboilerplate.com/

These are good references in general.

Honestly, the entire transactional email system needs to be rethought. It's been one of those things that I have avoided because I'm generally too busy.

In it's current form it becomes a very static element to the site and I highly suggest (especially if doing work for a client vs. working on your own site) that you make sure the client understands that an email template change is not always something that you can just request and have it whipped up right away. With 30+ email templates saved in the backend based on the .phtml templates, a single change to a header can take one to several hours.

On the same note, if building custom email templates, it must be understood that once a design is approved, that's it... no more changes! It is very very easy to lose the scope creep war if a client keeps making "minor" changes that you then have to cascade down to all of those email templates you've built. I've seen this happen several times, and it's an absolute productivity killer.

---

With all that mentioned, there are some other tricks you can do to make your life easier. Personally, I prefer to NOT use Magento's backend email templates and instead just rely on working on the .phtml files themselves. Also, scrapping the pre-built templates and starting from scratch is a good idea, but be prepared for quite a bit of work. One benefit of this, though, is that you can identify all the sections you'd like to just put in their own individual templates (like email header and footer), and get them organized properly. This makes future changes much less time consuming.

Testing emails can take quite a bit of time as well, you can cut down on this by learning how Magento sends these emails programmatically and writing your own short scripts to send a 'New Order' email, for example.

I do not have any experience with any third-party modules that improve the built-in stuff. I have seen a few and seen their claims, and I'm sure YMMV. I'm sure they provide an improvement, though.