Description
I may have a kind of confused understanding, when it comes to putting styles into email templates.
First I'd like to depict my rather ideal imagination.
From the message.html template I would derive a user defined one, putting / overriding head and body sections in there. While overriding the head section I'd introduce an external style sheet then taking over the super content. In the step of processing for sending an email, the premailer would transform the external style sheet into inline styles and finally the message is delivered to desired recipients, which are configured unter the Subscriptions admin section.
To be able to inherit from message.html, a modification of this template would be required, like this:
{% load thumbnail i18n %}<!DOCTYPE html>
<html>
<head>
{% block head %}
<meta charset="utf-8">
<title>{{ newsletter.title }}: {{ message.title }}</title>
{% endblock head %}
</head>
<body>
{% block body %}
<h1>{{ newsletter.title }}</h1>
<h2>{{ message.title }}</h2>
{% for article in message.articles.all %}
<h3>{{ article.title }}</h3>
{% thumbnail article.image "200x200" as image %}
<img src="http://{{ site.domain }}{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}">
{% endthumbnail %}
<div>{{ article.text|safe }}</div>
{% if article.url %}
<div><a href="{{ article.url }}">{% trans "Read more" %}</a></div>
{% endif %}
{% endfor %}
<ul>
{% if submission.publish %}
<li><a href="http://{{ site.domain }}{{ submission.get_absolute_url }}">{% trans "Read message online" %}</a></li>
{% endif %}
<li><a href="http://{{ site.domain }}{% url "newsletter_unsubscribe_request" newsletter.slug %}">{% trans "Unsubscribe" %}</a></li>
</ul>
{% endblock body %}
</body>
</html>
Then the derived template could look like this:
{% extends "newsletter/message/message.html" %}
{% load static %}
<!-- premailer is not an option in templates, only for plain html, due to use of lxml -->
{% block head %}
<link rel="stylesheet" href="message.css">
{{ block.super }}
{% endblock head %}
Following the doc of django-premailer, the derivation would look like:
{% extends "newsletter/message/message.html" %}
{% load static premailer %}{% premailer "localhost:8080" %}
<!-- premailer is not an option in templates, only for plain html, due to use of lxml -->
{% block head %}
<link rel="stylesheet" href="message.css">
{{ block.super }}
{% endblock head %}
{% endpremailer %}
At this point it comes to a dead end. Following the doc of premailer, we encounter a statement:
premailer does this. It parses an HTML page, looks up style blocks and parses the CSS. It then uses the lxml.html parser to modify the DOM tree of the page accordingly.
Since premailer only processes plain standard conform html, it fails to work on django templates due to lxml.
So my question is: what is a generic way of introducing styles in newsletter's templates, email templates especially?
@Sheepzez did this in the past by an any how configuration. Maybe it would be possible to shed some light on this? Here is the thread: #178, where I was also asking for details.
Thanks for taking time.