Gift Certificate Email Template

Developers Frontend
1

Hi everyone,

I'm running into an issue and hoping someone can help me. I have modified the gift certificate email template with a new design, but when the email is generated none of the CSS formatting is being used. I'm not used to including CSS code directly like this, but I did it the same way as what was in the original template, so it seems like it should work.

What I see (see attachment)

And, here is my template code:





{literal}


.thelabels {
   font-family: Marck Script;
   font-size: 20px;
}
.theheader {
   font-family: Marck Script;
   font-size: 25px;
}
.contentcells {
   border-bottom: 1px solid black;
   width: 300px;
}
table {
   padding: 15px;
   background-color: #f7f7f7;
   border-style: solid;
   border-radius: 20px;
   border-width: 2px;
}
p,span2 {
   border-bottom: 1px solid black;
   line-height: 29px;
   width: 300px;
}
p>span2 {
   padding-bottom: 5px;
   width: 300px;
}


{/literal}


{include file="common/scripts.tpl"}

{if $gift_cert_data.message}







{/if}

  
  
Redeemable at:

  
  http://www.arteeni.com
{* width: 171px; height: 62px; *}
You have received a Gift Certificate!
{__("gift_cert_from")}:
{$gift_cert_data.sender}
Amount:
{include file="common/price.tpl" value=$gift_cert_data.amount}
Code:
{$gift_cert_data.gift_cert_code}

Message:

{$gift_cert_data.message nofilter}

Any idea what could be causing this?

Thanks,

Jason

gc_email.png

2

We have found the following article. Please check the What you CAN'T do section

https://css-tricks.com/using-css-in-html-emails-the-real-story/

3

Yes, email clients are years behind the browsers and are much more succeptable to security issues so the intent is to keep them dumb. In-line styles are your best bet.

4

Uggh, wonderful. Wish I had known that before doing all the design work!

Thanks for your help, guys.

5

I stumbled on a really cool tool from Mailchimp that automatically converts css to inline styles.

So, thought I'd share in case it can help anyone else:

https://templates.mailchimp.com/resources/inline-css/