I am trying to apply my custom css in email template.
I already done these things.
- Add inline css to my html
<table align="center" style="width:600px; background:#FFF; border:1px solid #CCC; padding:0; margin-top:0; border-collapse:collapse;">
- include inline css file and add path of these css in admin->system->configuration->design
{{inlinecss file="email-inline.css"}}
{{inlinecss file="email-non-inline.css"}}
I checked that they are including or not ny editing body background color to black
but no success yet.
I am editing newsletter subscription email template.
I got success in adding style
tag by adding {{var non_inline_styles}}
to my html file .but not able to write my css into style tag. how can I write my own css in this tag.
So can anyone tell me how can I style my email template
I tried this too
http://devdocs.magento.com/guides/m1x/ce19-ee114/RWD_responsive_emails.html#email-css
here is my template file code
<!--@subject Newsletter subscription success @-->
{{template config_path="design/email/header"}}
{{var non_inline_styles}}
{{inlinecss file="email-inline.css"}}
{{inlinecss file="email-non-inline.css"}}
<div class="newsletter-confirmation">
<table align="center" style="width:600px; background:#FFF; border:1px solid #CCC; padding:0; margin-top:0; border-collapse:collapse;">
<!--Header -->
<tr>
<td style="padding:18px; margin:0; height:40px\9;">
<p style="float:right; margin:0; padding:0; width:200px;">
<img src="{{skin url='images/hot_line.jpg'}}" style="text-align:right; vertical-align:bottom; float:right; clear:both; margin-top:21px;">
</p>
</td>
</tr>
<tr><td style="height:1px; border-bottom:1px solid #000; width:100%; margin:0; padding:0; line-height:0;"> </td></tr>
<!-- / Header -->
<!--Mid -->
<tr>
<td>
<table align="center" style="width:564px; background:#FFF; padding:18px; margin-top:0; border-collapse:collapse; margin-top:10px;">
<tr>
<td>
<p style="color:#000; font:12px/20px Arial, Helvetica, sans-serif; padding:0; margin:0;">Greetings from ...!<br>
You have been successfully subscribed to the newsletter.</p>
</td>
</tr>
<tr><td height="18"></td></tr>
<tr>
<td>
<table align="center" style="width:564px; margin:0; padding:0; border-collapse:collapse;">
<tr>
<td><a href="#" target="_blank" style="margin:0; padding:0 10px 0 0; border:none; outline:none;">
<img src="{{skin url='images/free-shipping.jpg'}}" style="text-align:left; vertical-align:bottom; border:none; outline:none; margin:0; padding:0;"></a>
</td>
<td rowspan="2"><a href="#" target="_blank" style="margin:0; padding:0; border:none; outline:none;">
<img src="{{skin url='images/return-exchange.jpg'}}" style="text-align:left; vertical-align:bottom; border:none; outline:none; margin:0; padding:0 0 0 10px;"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p style="color:#000; font:12px/20px Arial, Helvetica, sans-serif; padding:0; margin:12px 0;">Thank you<br><strong>Team ...</strong></p>
</td>
</tr>
</table>
</td>
</tr>
<!--Mid -->
<!--Footer -->
<tr>
<td style="width:582px; padding-left:18px; background:#efefef;" >
<p style="color:#666666; font:11px/15px Arial, Helvetica, sans-serif; padding:0; margin:8px 0;">
<a href="http://www.....com/" target="_blank" style="margin:0; padding:0; color:#666666; text-decoration:none;">....com</a> All Rights Reserved.
</p>
</td>
</tr>
<!-- / Footer -->
</table>
</div>
{{template config_path="design/email/footer"}}
Best Answer
First you need to understand how inline-css and non-inline-css work in magento.
For adding any inline-css using a separate file you define it using
It will inject css defined in your file within style attribute of each tag with provided class.
So if you need to style button in your email, you need to define a class in email-inline.css like following:
then you need to apply this class to an element in your template like following:
Magento will automatically inject the css in style attribute before sending an email.
Reference