Invoice templates with inline styles (without header css)

Flash83 · March 27, 2014, 23:37:51 PM

Hi all

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:

Code Select

<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 or maybe existing templates optimized for webmail clients?

FelixR · April 25, 2014, 15:51:35 PM

You maybe right - but some email clients - Gmail included don't render html emails correctly with the css not inline

kash2011 · March 19, 2015, 14:59:56 PM

I would like to make this topic relevant again because there is no answer given. I have this problem with a lot of my clients using GMAIL. the invoice email is unstyled and a mess without the style in the header.

Is there someone who knows a solution? or someone who knows how to get te style inline so I could do it myself?

Thank you:)

GJC Web Design · March 19, 2015, 15:08:43 PM

It is a straight forward html question

if Gmail requires inline css you have to add it in the appropriate template files

if it was table.html-email {margin:10px auto;background:#fff;border:solid #dad8d8 1px;}

you need to add the style directly

<table class="html-email " style="margin:10px auto;background:#fff;border:solid #dad8d8 1px;" >
<tr> etc

kash2011 · March 19, 2015, 15:26:29 PM

Thanks! It is going to take a long time to convert all the style. But I guess this is the only solution.

Spiros Petrakis · March 19, 2015, 18:35:01 PM

Hi ,
it is true that the default order email is not compatible with most email clients. Html email templates are a very painful work that requires a lot of coding and even more testing because there are so many desktop and web email clients that have strange behaviors.

In my commercial template Hera i have added in the last version a very nice order email that has the following features

1) w3c valid XHTML code.
2) Correct coded to be compatible with most email clients including necessary hacks for several clients.
3) Tested with more than 30 web and desktop email clients.

this way you can be sure that the order emails can be read by your clients and also have a more professional look.

You can test it in my template demo http://heravm3.virtuemarttemplates.eu

barbara80 · March 20, 2015, 20:29:55 PM

hello,
where can I buy your model order?

Spiros Petrakis · May 09, 2015, 09:49:03 AM

Hi,

the order email files are now available as a separate product , you can get them here
http://www.virtuemarttemplates.eu/virtuemart-templates/virtuemart-order-emails.html

News:

Invoice templates with inline styles (without header css)