notification_center CSS

**gm-team** · 20.02.2018, 09:50

Hallo,

ich möchte gerne in den HTML-Emails CSS Code integrieren.

Ist das mit dem notification_center möglich?

Eine Alternative wäre vermutlich:
contao-notification_center_plus

Doch müsste ich darauf vertrauen können, dass die Erweiterung stets mit der neuesten Isotope-Version kompatibel ist.
Da das notification_center sowie Isotope von terminal42 kommt, habe ich da grundsätzlich ein besseres Gefühl.

Außerdem die Frage ob man das einfach "überschreiben" kann ohne Datenverlust, da das normale notification_center bereits im Einsatz ist.

**tl_richard_user** · 20.02.2018, 10:34

Ich hab mir ein eigenes Template für HTML-Mails erstellt und dieses verwendet.

Das Template heißt "mail_….html5" und sieht so aus:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=<?= $this->charset ?>">
    <meta name="viewport" content="width=device-width">
    <meta name="Generator" content="Contao Open Source CMS">
    <title><?= $this->title ?></title>
    <link rel="stylesheet" href="files/css/foundation-mail.css">
    <?= $this->css ?>
  </head>

  <body>
    <!-- <style> -->
    <table class="body" data-made-with-foundation="">
      <tr>
        <td class="center" align="center" valign="top">
          <center data-parsed="">
            <table class="container header text-center">
              <tbody>
                <tr>
                  <td>
                    <table class="row collapse">
                      <tbody>
                        <tr>
                          <th class="small-12 large-12 columns first last">
                            <table>
                              <tr>
                                <th style="background-color: #1682c0"> <img style="padding: 10px" src="files/images/logo-white-email.png" alt=""> </th>
                                <th class="expander"></th>
                              </tr>
                            </table>
                          </th>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <table class="container body-drip text-center">
              <tbody>
                <tr>
                  <td> <br>
                    <table class="row">
                      <tbody>
                        <tr>
                          <th class="small-12 large-12 columns first last">
                            <table>
                              <tr>
                                <th>
                                  <?= $this->body ?>
                                </th>
                                <th class="expander"></th>
                              </tr>
                            </table>
                          </th>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
    </table>
  </body>
</html>

Das CSS war entsprechend von Foundation…

**gm-team** · 20.02.2018, 11:33

Danke, das klingt nach einer wirklich genialen Lösung.

Edit: Nach einer kleinen Startschwierigkeit funktioniert es nun.

Tolle Sache das mit dem Template!

**gm-team** · 20.02.2018, 15:25

Sorry, nun doch noch ein Problem.

Es übernimmt mir einfach kein externes CSS.

In dem von dir gezeigten Beispiel steht als Pfad "files/css/foundation-mail.css".

Da ist meine erste Frage ob das nicht ein absoluter Pfad sein müsste - oder wird das vorher generiert?

Wenn ich

Code:

<link rel="stylesheet" href="https://mysite.com/files/mysite/css/foundation-mail.css">

in das Template einfügen, wird diese Zeile einfach rausgelöscht (geprüft in GMX Postfach).

Weiters stelle ich mir die Frage wozu dann

Code:

<?= $this->css ?>

da ist? Damit müsste ich ja irgendwo bei der Nachricht ein CSS hinzufügen können?

Vielen Dank.

**tl_richard_user** · 20.02.2018, 15:53

Ja, meines Wissens nach müssten die Pfade automatisch absolutisiert werden.

Wenn es dir möglich ist, greife doch mal den HTML-Quellcode der E-Mail VOR dem Senden ab.
z.B. kannst du auf dem lokalen Dev-System Mailcatcher installieren.

**Stefko** · 20.02.2018, 16:04

Öhmmmm, afaik lassen die meisten Mail-Clients keine externen CSS zu.
Generell versuche ich CSS in Mails so gut es geht zu vermeiden und wo es gar nicht geht wird es inline eingefügt.

Gesendet von iPhone mit Tapatalk Pro

**tl_richard_user** · 20.02.2018, 16:07

Ich weiß jetzt auch nicht mehr, wo das `$this->css` herkommt
—kann sein, dass das ein Überbleibsel von Avisota ist.

Im Zweifelsfall einfach ein

HTML-Code:

<style><?php file_get_contents('css/email.css'); ?></style>

Das wird dann auch dem Einwand von Stefko Recht.

**gm-team** · 20.02.2018, 19:31

Danke euch beiden.

Klar, mit inline CSS sollte es gehen. Doch der Grund muss noch wo anders liegen, denn ich habe eben im selben Mailclient ein anderes E-Mail mit externem CSS gesehen. Also der Part, welcher bei mir gelöscht wird. Wenn ich dem nicht ohne weiteres auf den Grund gehen kann mache ich es per inline CSS.

Das `$this->css` ist zumindest auch im mail_default.html5 drin, aber wofür das nun genau dient wäre wirklich interessant.

Thema: notification_center CSS

Themen-Optionen

Thema durchsuchen

notification_center CSS

Aktive Benutzer

Aktive Benutzer

Lesezeichen

Lesezeichen

Berechtigungen

Contao

Empfohlene Webdesign-Bücher