Virtuemart emails have a corrupted layout without styles - css in headers does not work

Question

The problem is: Virtuemart invoice emails looks ugly in the most of web-mail systems (including gmail.com) because they have a css in the headers which are filtered by mail system. Thus styles are not applied and emails looks very poor in webmail, although they looks good in Outlook.

The view of mail in VirtueMart 2.0.x is defined by template: components\com_virtuemart\views\invoice\tmpl\mail_html.php

Styles are defined inside of head tags:

<head>
<style type="text/css">
    body, td, span, p, th {  }
    table.html-email {
       margin:10px auto;
       background:#fff;
       border:solid #dad8d8 1px;
    }
    .html-email tr{
       border-bottom : 1px solid #eee;
    }
   ...
        ...
</style>

</head>

How to make emails from Virtuemart in clean html, without css in headers? I don't think that re-write all default email templates with inline styles is good way, probably there is some easier solution...

Some email clients, most notably Gmail, do not recognize CSS in the <head>. You may have to resort to inline styles. Here is a great compatibility chart for CSS in email: campaignmonitor.com/css — Dryden Long
Thanks! It's strange that default Virtuemart templates are not optimized for popular webmail clients, but I still hope there is some easier solution than re-writing all templates... — Vladimir

kiki kiki · Accepted Answer · 2015-03-19T10:26:22

you should insert your style into html elements (it takes some time but works everywhere). For example:

td.element{color:#ff0000;}

in html:

<td style="color:#ff0000;">something</td>

It's quite fast with Notepad++ because you can change many phrases in few clicks

Virtuemart emails have a corrupted layout without styles - css in headers does not work

1 Answers