Newsletter: CSS wird nicht berücksichtigt?

**Scheuch** · 10.09.2014, 13:45

Hallo zusammen,

ich versuche gerade einen neuen Newsletter ins System einzupflegen. Das gestaltet sich leider etwas schwierig.

Ich habe ein Template (mail_newsletter2014.html5) in den Template-Ordner gepackt:

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>">

  <meta name="Generator" content="Contao Open Source CMS">

  <title><?php echo $this->title; ?></title>

  <style type="text/css">

  ... jede Menge CSS-Code

  </style>

</head>

<body class="myclass">

  <?php echo $this->body; ?>

</body>

</html>

Dazu habe ich noch eine HTML-Vorlage angelegt, die auch im Editor als Vorlage ausgewählt werden kann.

Das Problem ist, verschicke ich nun die Mail, werden die CSS-Einträge des Templates nicht umgesetzt, weder in der Vorschau von Contao noch im Client des Empfängers.

Was mache ich falsch? Inline-Elemente in der Vorlage sind keine Option, dazu ist das zu viel CSS.

**Bas** · 10.09.2014, 14:11

Und um es mit css-tricks' Worten zu sagen: (http://css-tricks.com/using-css-in-h...he-real-story/)
What you CAN'T do: Include a <head> section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.

ansonsten siehe https://www.campaignmonitor.com/css/

Und bzgl. Inline .. probier doch mal http://inlinestyler.torchboxapps.com/styler/

**Scheuch** · 12.09.2014, 14:24

Vielen Dank, das hat mich erleuchtet. Kein Wunder, dass bei meinem Gmail nichts zu sehen war!

**WebRoxx** · 13.09.2014, 17:36

Und wie macht ihr da alle?

wollt ihr mir echt erzählen ihr erstellt für jeden Kunden der newsletter nimmt eine CSS-Datei im backend?

Seh beim WIKI und so net durch wo ich das machen soll, bzw wie ich das in den Newsletter bekomme :/

**Bas** · 15.09.2014, 08:54

Ich erstelle Newsletter bzw. Newsletter-Templates immer komplett von Hand ... allerdings arbeite ich auch nicht mit den verfügbaren Contao-Lösungen, sondern mit Cleverreach. Die haben ein hervorragendes Template-System (welches korrekt konfiguriert es auch Laien ermöglicht graifsch hochwertige Newsletter zu versenden) und bieten alles was professionelles E-Mail-Marketing benötigt (Erfolgsmessung etc.).

Hier mal nen Auszug aus einem Newsletter-Quelltext .. verschachtelte Tabellen und alles inline:

HTML-Code:

<table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse; font-family:Verdana; font-weight:normal; font-size:12px; line-height:20px; color:#444444;">
<tr>
<td style="padding-bottom:10px;">
<img src="./eds2013.jpg" width="560" height="155" alt="EDS 2013 mission::vision" style="width:560px;height:155px;">
</td>
</tr>
<tr>
<td style="padding-bottom:6px;">
<span style="font-size: 10px;color: #999999;">INVITATION<img width="13" height="6" src="./arrow_down.gif" alt="?"></span><br>
<h1 style="margin:0;padding:0;color:#162a6b;font-size:22px;font-weight:normal;line-height:22px;">Meet us in Las Vegas @ EDS 2013</h1>
</td>
</tr>
<tr>
<td style="padding-bottom:6px;">
<p style="font-size:12px;line-height:20px;color:#666666;margin:0;padding:0;text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td>
</tr>
[...]

**WebRoxx** · 07.10.2014, 09:08

So hab mal bissl rumgebastelt.

Mein mail_template sieht so aus:

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>">

<meta name="Generator" content="Contao Open Source CMS">

<title><?php echo $this->title; ?></title>

<?php echo $this->css; ?>

</head>

<body bgcolor="#16497c" style="background-color:#16497c;font-size:14px;font-family: Calibri, Helvetica,Verdana, sans-serif;color:#666;">

<style type="text/css">

a {color: #003399;}

h1 {font-size:22px;font-family: Calibri, Helvetica,Verdana, sans-serif;color:#666; border-left:5px solid #16497c;}

p,ul,ul li {font-size:14px;font-family: Calibri, Helvetica,Verdana, sans-serif;color:#666;}

</style>

<div>

    <div style="text-align:center;">

        <a href=""><img src="logo.png" width="248" height="80" /></a>

    </div>

    <?php echo $this->body; ?>

    <div>

      <table width="100%" cellpadding="10" cellspacing="0" bgcolor="#FFFFFF">

            <tr>

             <td><p><strong>INFORMIERT</strong></p></td>

            </tr>

            <tr>

             <td><p>Du hast den Newsletter von xxx aboniert, wenn du keine E-Mail mehr erhalten willst klicke hier.</p>

                <p>Informier dich:<br>

                <a href="" target="_blank">Facebook</a><br>

                <a href="" target="_blank">Twitter</a><br>

                <a href="" target="_blank">Forum</a></p></td>

            </tr>

        </table>

    </div>

</div>

</body>

</html>

und dann habe ich im tinyme ne vorlage erstellt.

Code:

<table width="100%" cellpadding="0" cellspacing="0" align="center">
 <tr>
  <td>
      <table width="100%" cellpadding="10" cellspacing="0" bgcolor="#FFFFFF">
            <tr>
             <td><h1 style="font-size:22px;margin:0px;">eine Überschrift</h1></td>
            </tr>
            <tr>
             <td><p>Text hier rein</p></td>
            </tr>
        </table>
  </td>
 </tr>
</table>

meine Frage, ist es ok so, oder gibt es noch bessere Lösungen? Anzeigen tut es den aber ganz gut