Using CSS in e-mails - how?

Sisom · #1 08-14-2010, 03:05 AM

Hi, I've been trying to style customer notification e-mails using CSS, but have run into some problems.
Where does X-Cart pull the internal style sheet from?

I thought it must be
{config_load file="$skin_config"}
which is in
/mail/html/order_customer.tplas my e-mails have an internal style sheet, but I don't remember how it got there.
How do I edit $skin_config if it is the source of the internal style sheet?

Sisom · #2 08-14-2010, 03:15 AM

I've just found out the answer (as usual, a few minutes after posting the question): it's in
/mail/html/html_message_template.tpl
as follows:

Code:

 
{* $Id: html_message_template.tpl,v 1.5 2005/11/28 14:19:29 max Exp $ *}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
{literal}
* {margin:0;padding:0;}
body, html {padding:5px;font:normal 1em Arial, Helvetica, sans-serif;color:#000;}
p {margin-bottom:10px;}
table {border-collapse:collapse;}
.invoice td, .invoice th {padding:2px 3px;}
td, th {font-size:0.8em;}
td strong {font-size:1em;}
.tablehead {padding:10px 0 4px 0;}
.rule {padding-bottom:5px;border-bottom:1px solid black;color:red;}
#header, #footer {background: url(http://www.mrdtrading.co.uk/skin1/images/2column/emailheader.gif) no-repeat top left;height:44px;width:599px;}
#header {margin-bottom:10px;}
#footer {margin-top:10px;}
#wrapper #header p, #wrapper #footer p {float:right;margin:5px 10px 0 0;text-shadow:1px 1px 1px #fff;color:#000;font-weight:bold;font-size:1em;}
#wrapper {width:600px;}
#wrapper a {text-decoration:none;}
{/literal}
</style>
</head>
<body>
{include file=$mail_body_template}
</body>
</html>

and by looking at that, I learned that the {literal} Smarty command allows you to enter CSS styles without causing a Smarty error!

Hopefully this thread will prove useful to somebody else with the same problem in the future.

Shamun · #3 08-14-2010, 07:58 AM

Keep in mind using styling like that in emails is a bad idea.
Providers like gmail, yahoo, msn and web-based clients like roundcube and that other one will likely strip it out. Instead, use inline styles.

<h1 style="color: baby-snot-green;size: huge;">Stuff</h1>

Edit:
Heres some code that works for emails... No <p> styling though... Do that in spans. Email = very very finnicky.

Code:

<P>
    <SPAN style="LINE-HEIGHT: 110%; FONT-FAMILY: arial; COLOR: #3ddd5b; FONT-SIZE: 22px; FONT-WEIGHT: bold">
        Some header text
    </SPAN><BR>
        And some long paragraph text.
</P>

Sisom · #4 08-14-2010, 11:01 AM

Thanks for your help, Tal, I just did a test in Yahoo and found exactly the problem you are talking about - the paragraph size is larger than in my other e-mail address, and Yahoo just seem to set their own sizes for paragraphs, regardless of where I put the styles.

All the rest of the styles in /mail/html/html_message_template.tpl
seem to have worked okay, but I will try signing up for a few other mail address, from the other main providers, to make sure.

I was wondering if maybe I made the paragraph style more specific, if that might override whatever Yahoo is doing to the CSS? My paragraph style was to place the name and telephone number of the company I am producing the site for, over the background header image, and all the rest of the CSS was working fine, it was only the size that Yahoo was changing.

This is the style:

Code:

#wrapper #header p, #wrapper #footer p {float:right;margin:5px 10px 0 0;text-shadow:1px 1px 1px #fff;color:#000;font-weight:bold;font-size:1em;}

I suspect that Yahoo has a paragraph style with higher specificity than my style, for the font-size property.

Shamun · #5 08-14-2010, 12:54 PM

Inline styles should take precedence of internal or external declarations.

Inline:

Code:

<span style="color: black; font-weight: bold; font-size: 1em">Text effected</span>

Internal:

Code:

<style type="text/css">
p {
color: black;
font-weight: bold;
}
</style>

<p> This should be styled in websites, but email providers will likely strip it out for security and styling reasons. </p>

External (doesnt work for emails):

Code:

<link rel="stylesheet" type="text/css" href="mystyle.css" />



	X-Cart forums © 2001-2020