Ein HTML-Newsletter soll verschickt werden und bei den meisten Clients (Gmail, Hotmail, Yahoo, usw.) auch sofort in der geplanten Ansicht erscheinen. Das dies nicht so einfach ist, dürften einige bereits erfahren haben 🙂
Damit dies funktioniert müssen sich z.B. sämtliche CSS-Anweisungen mit im Quelltext befinden. Eine Anweisung wie:
<link href="http://www.domain.de/fileadmin/.../style.css" rel="stylesheet" type="text/css" />
wird nicht gehen.
Für die CSS-Anweisungen von TYPO3 gibt es dafür eine Lösung. Mit:
config.inlineStyle2TempFile = 0
im Template des Newsletters werden alle CSS-Definitionen (css_styled_content) mit in den Quelltext gepackt.
Die eigenen Stylesheets werden jedoch nicht mit eingebunden. Das könnte man jetzt natürlich von Hand erledigen, aber das bringt einige schwerwiegende Probleme mit sich.
1) Je nach Projektumfang und Größe der CSS-Dateien kann das schnell nervig und vor allem unübersichtlich werden
2) Bei Änderungen am CSS muss man erneut Kopieren bzw. darf nicht vergessen, die Änderungen auch beim Newsletter zu machen.
Also sehr unpraktikabel. Wie macht ihr das? Ich habe nach einer Extension gesucht, jedoch keine gefunden.
Die Anweisungen der eigenen eingebundenen CSS-Datei müssen mit in den Quelltext. Lustig wird es dann noch, wenn da sowas steht wie:
@import url("datei1.css");
@import url("datei2.css");
@import url("datei3.css");
@import url("datei4.css");
...
Wie würdet Ihr da vorgehen? Habt Ihr Ideen?
Grüße
Hallo Mopps
Ich kann dir nur empfehlen, für den Newsletter ein eigenes Template zur verwenden, und dieses sollte mit tables aufgebaut sein, damit es auch von gmail und co richtig interpretiert wird. Besonders gmail hat nicht wirklich Freude an Stylesheets, auch wenn sie über <styles></styles> eingebunden werden.
Ich bewege typo3 dazu, für die Newsletter die Styles direkt in die Tags zu schreiben (<p style="color:#ff0000;">text</p>), damit kommt dann sogar gmail zu recht. Weiter habe ich bemerkt, dass hotmail das margin nicht interpretiert, also wenn möglich auf padding setzen.
Aber wie du schon erwähnt hast, einfach wird es einem nicht gemacht.
Gruss
Danke für die Antwort.
Für den Newsletter verwende ich ein eigenes Template. Allerding verwende ich darin die CSS-Dateien des "normalen" Templates und überschreibe mit einem letzten Stylesheet die für den Newsletter relevanten Dingen. Bleibt das Problem, dass die Style-Angaben nicht im Quellcode eingebettet sind.
Ich bewege typo3 dazu, für die Newsletter die Styles direkt in die Tags zu schreiben
Wie machst du das?
Grüße
Hallo
Indem ich für die Ausgabe zum Beispiel das p wie folgt ausgebe.
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines {
addAttributes{
P.style= padding: 0; margin: 0 0 14px 0; color: #000000;
}
}
Oder zum Beispiel den Titel wie folgt formatiere.
lib.stdheader.10.1.fontTag = <h1 style="font-family:Verdana, Arial, Helvetica, sans-serif;color: #A02700;font-size:12px; line-height:18px; font-weight:bold">|</h1>
Mit dieser Methode kann man auch Tabellen und Zellen, so wie Listen usw. für die Ausgabe manipulieren.
Ist wahrscheinlich nicht genau was du möchtest, aber aus meiner Erfahrung die zuverlässigste Formatierungsmöglichkeit für Newsletter. Besonders in Bezug auf Gmail.
Gruss
eins ist klar: eine Email kann keine Styles importieren oder CSS inkluden, die sind dann als Attachements bei der mail.
Ich nutze ganz einfach inline-CSS im Template des Newsletters:
page.CSS_inlineStyle (
body {color:red;}
)
Was aber bei Gmail leider auch nicht interpretiert wird.
Ich nutze ganz einfach inline-CSS im Template des Newsletters
Das war mir bereits klar. Das wollte ich weiter oben mit "Das könnte man jetzt natürlich von Hand erledigen" ausdrücken.
Wie ich weiter oben geschrieben habe ist dies ein Weg von Hand alle meine CSS-Sachen ins Template des Newsletters zu schreiben, was, wie ebenfalls gesagt, recht umständlich sein kann, wenn ich sehr viele CSS-Dateien verwende. Und deswegen suche ich nach einer Methode, die es ermöglicht, die externen CSS-Sachen auszulesen und mittels inline-CSS im Newsletter einzubinden.
@Hugisan:
Danke für die Snippets, die sehr hilfreich sind.
Grüße