Include css in email template in Symfony 3

Question

I'm trying to make a beautiful email template with Symfony 3 but except the basic html code like an balise nothing is working.

Here is my parent template :

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">

        {% block stylesheets %}
            {% stylesheets 
                'bundles/platform/bootstrap/css/bootstrap.min.css'
                'bundles/platform/bootstrap/fonts/glyphicons-halflings-regular.eot'
                'bundles/platform/bootstrap/fonts/glyphicons-halflings-regular.svg' 
                'bundles/platform/bootstrap/fonts/glyphicons-halflings-regular.ttf' 
                'bundles/platform/bootstrap/fonts/glyphicons-halflings-regular.woff' 
                'bundles/platform/bootstrap/fonts/glyphicons-halflings-regular.woff2'  
                filter='cssrewrite' %}
                <link rel="stylesheet" href="{{ asset_url }}" />
            {% endstylesheets %}
        {% endblock %}
    </head>
    <body> 

        <div id="content-block" class="row">
            {% block contentBlock %}
            {% endblock %}
        </div>

        {% block javascripts %}
            {% javascripts 
                '@PlatformBundle/Resources/public/bootstrap/js/bootstrap.min.js' 
                %}
                <script src="{{ asset_url }}"></script>
            {% endjavascripts %}
        {% endblock %}
    </body>
</html>

The child template :

{% extends "PlatformBundle:Emails:template_email.html.twig" %}

{% block contentBlock %}

    <div class="text-center"><h2>New asking</h2></div>

    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2 well">

        <p> ask from : {{authorEmail}} </p>
        <p> Subject: {{subject}} </p>
        <p> {{content}} </p>

    </div>
{% endblock %}

And finally the function who send the mail in my controller :

$renderedTemplate = $this->container->get('templating')
        ->render('PlatformBundle:Emails:contact_from_user.html.twig', array('subject' => $subject, 'authorEmail' => $authorEmail, 'content' => $content));

$message = \Swift_Message::newInstance()
        ->setSubject($subject)
        ->setFrom($platform->getEmail())
        ->setTo($toEmail)
        ->setBody($renderedTemplate, 'text/html');

So, my question is : How to make my template use the attached css or if it's not possible how to render a beautiful email like that for exemple :

EDIT :

For those who want, here is a great template for responsive e-mail who show good stuff to masteries this : responsive-html-email-template

IMACODE · Accepted Answer · 2016-07-15 17:40:52Z

2

The problem with including css files in an email is that lot of email reader (like Gmail for example) blocks them.

The best way is to include the style="" tag for each element of your html template.

Because you are using twig, you can create variable and use them in your template to avoid to write css rules each time.

answered Jul 15, 2016 at 17:40

IMACODE

1302 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LedZelkin Over a year ago

Oh ok, i didn't know that. So, is it still possible to use bootstrap ? Can you give me an example of how you 'll use the twig variable for theming ?

IMACODE Over a year ago

If you want to be compatible with the most of the email reader, I think this is not a good idea. Responsive email template if very complicated. I use the table tag of html to do this but it takes lot of time to have a perfect result. You can use this link campaignmonitor.com/css to know how each email reader will accept or not your css rules.

LedZelkin Over a year ago

Thanks you a lot , at least now, i know how to take this

Collectives™ on Stack Overflow

Include css in email template in Symfony 3

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related