1

I am trying to apply my custom css in email template. I already done these things.

  1. 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;">
  2. include inline css file and add path of these css in admin->system->configuration->design enter image description here
    {{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;">&nbsp;</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"}}
  • Without really looking at your code, my first guess would be you have your email template in the wrong location, so it's never loading. Check the folder location of the file. – Tim Hallman May 28 '15 at 12:14
  • email templates are in app\locale\en_US\template\email folder while the css is in the my current theme package that is skin\frontend\sm-maxshop\default\css – urfusion May 28 '15 at 12:20
  • And you have 'Transactional Emails' configured correctly under 'Design' in System Configuration? – Tim Hallman May 28 '15 at 12:25
  • Yes, I am receiving emails with out any error. I checked my log files too – urfusion May 28 '15 at 12:26
  • and Where it says 'Non-inline CSS Files' you have set a file there? – Tim Hallman May 28 '15 at 12:53
0

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

{{inlinecss file="email-inline.css"}}

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:

.btn {

}

then you need to apply this class to an element in your template like following:

<input type="button" class="btn" />

Magento will automatically inject the css in style attribute before sending an email.

Reference

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.