Avisota mit CSS verknüpfen?

**elisacarolina** · 31.08.2012, 11:15

Hallo,

ich habe nun Avisota auf Contao installiert und muss gestehen, dass ich echt begeistert bin.
Leider bin ich nicht wirklich gut in php und habe es auch nie wirklich gebraucht, weswegen meine Frage ist ob ich eventuell auch Avisota mit einer CSS Datei in Contao verknüpfen könnte und wenn ja, wie? Oder in welchem Template ich das ganze zumindest gestalten könnte (falls eine CSS Verknüpfung nicht möglich sein sollte).
Ich hoffe ihr könnt einer Einsteigerin weiterhelfen.

Ganz liebe Grüße und vielen vielen Dank

**tril** · 31.08.2012, 12:40

Du musst in deinem Theme einfach eine CSS Datei newsletter anlegen, die wird automatisch übernommen

**elisacarolina** · 31.08.2012, 14:23

Tatsächlich, es funktioniert prima! Vielen herzlichen Dank an dich!

**spacefront** · 03.09.2012, 15:20

Aber Achtung, manchen Programme/Maildienste, spielen bei externen CSS nicht richtig mit.

**tril** · 03.09.2012, 15:34

Die CSS wird eingebettet

**elisacarolina** · 05.09.2012, 11:47

Vielen Dank noch einmal für die lieben Antworten!

Jetzt hab ich allerdings noch ein weiteres Problem.
Das mit dem CSS läuft ziemlich gut, allerdings übernimmt er das zentrieren absolut nicht und auch im Headerbereich macht er keine Anstallten irgendeinen Befehl zu übernehmen... Ob ich dem Bereich jetzt selbst eine Klasse zuteile oder nicht...
Gibt es dazu irgendwelche Tutorials wo ich mal den kompletten Grundaufbau eines Newsletters mit Avisota samt gestalterische Umsetzung mitbekomme?

Ihr müsst mich echt schon für mega bescheuert halten, aber es ist mein erster Newsletter! Ich hoffe auf Verständnis und Antworten die mit weiterhelfen...

Vielen Herzlichen Dank schon einmal

(Auch ganz lieben Dank an tril der eine so unkomplizierte Antwort gegeben hat

)

**tblumrich** · 05.09.2012, 13:17

Newsletter setzen ist ein Thema für sich und die Formatierung eben so... da das ganze in der Regel in einem Mailclienten gelesen wird und es davon einige gibt, sieht die Formatierung mal so und mal so aus. Leider. Ganz große "Helden" dabei sind Outlook und der Webmailer von Google.

Letztendlich wird da ja HTML gerendert und dafür sind E-Mail Programme nicht besonders geeignet... z.B. nutzt das aktuelle Outlook (seit 2007 glaube ich) Word für die HTML Darstellung... was dabei teilweise rauskommt, kann man sich denken.
Devise: Der kleinste gemeinsame Nenner.

Lange Rede kurzer Sinn... such mal im Netz worauf es ankommt beim Newsletter setzen... und vor allem was welche E-Mail Client überhaupt macht.
Beispiel: http://www.webmasterpro.de/coding/ar...ternative.html

Gruß
Thomas

**elisacarolina** · 05.09.2012, 21:16

Danke für die Antwort tblumrich!
Das hilft mir sehr...

Es funktioniert aber super mit dem CSS soweit was ich jetzt verwende und es wird auch überall gleich dargestellt... Die Sache ist nur die, dass ich z.B. einen Header gestaltet habe, dieser aber ohne Hintergrundfarbe in der Email angezeigt wird... Man sieht ihn in der Vorschau alles super aber in der Email nichtmehr, obwohl die meisten anderen Elemente richtig dargestellt werden... genausowenig zentriert er mir das ganze... Das wundert mich, weil andere Grafische Anpassungen wir den Rahmen in einem Gewissen angesprochenen Textbereich stellt er richtig dar...
Deswegen war ja meine Frage ob es Tutorials mit Avisota gibt, wo ich ich sehe welche Templates ich anpassen müsste oder wie ich das ggf. mit CSS alles gut lösen kann...
(An sich ist Avisota echt recht gut und ich denke es ist auch für die Kunden super einfach wenn sie nur ihren Text und die Bilder stapeln müssten und die Gestaltung ist im Prinzip schon vorhanden).

Ich hoffe ihr versteht was ich meine...

**tblumrich** · 05.09.2012, 21:59

Guck dir doch mal das E-Mail Template von Avisota an.
Meine Erfahrung ist leider, das man nicht alles hinbekommt mit der newsletter.css. Hin und wieder braucht man direkte Inlinestyles (also direkt an den tags) und an den Code kommst du ja nur über das Template. Den Tempatenamen siehst du in der Einstellung zu deinem Newsletter.

Ganz konkret kann ich nicht helfen, aber da ja verschachtelte Tabellen benutzt werden, kann auch mal hier und da eine Anweisung nicht greifen. Das ist aber von hier aus schwer analysierbar.
Weiterhin kannst du dir den Vorschaunewsletter im Backend durchaus mal mit Firebug ansehen um direkt zu gucken was passiert.

Thunderbird z.B. gibt genau das aus, was man auch via Firefox in der Vorschau im Backend sieht (sicher, das ist keine Kunst)... Outlook macht aber, wie schon angedeutet, definitiv immer was anderes, weil da eben nicht der InternetExplorer hinter steht, sondern quasi Word.

Gruß
Thomas

**elisacarolina** · 07.09.2012, 13:19

hallo tblumrich,

okay vielen Dank für den Hinweis!
Ja das mit den Newslettern ist für einen Anfänger auf dem Newsletter Gebiet schon recht kompliziert wenn man niemanden hat ders einem Zeit >_>

ja das mit Firebug hab ich schon gemacht... Er stellt ihn mir auch z.b. auf dem Smartphone richtig dar, aber bei den online Anbietern wie GMX oder Hotmail zeigt er mir vieles garnicht an... Ich hab auch keine Ahnung woran das liegen könnte...

Oh man... hast du vielleicht einen Tipp mit dem ich den Newsletter an alle gängigen "Emailprogramme" anpassen kann?
Ich hätte nie gedacht das es so dermaßen kompliziert wird... Aber vielen Dank noch einmal das du dir solche Mühe mit mir gibst

**tblumrich** · 07.09.2012, 20:01

Es kommt drauf an welchen Aufwand du treiben willst, wie schick es sein muss, und ob es überhaupt HTML sein muss... welche Zielgruppe du hast usw...
Meine Devise: Machs so einfach wie möglich... keine Hintergrundgrafiken nur Header, Inhalt, Footer mehr nicht. Keine ausgefallenen Schriften und Formen...

...aber wie gesagt, es gibt im Netz auch Seiten, die übersichtlich zeigen, was geht und was nicht (einen ersten Ansatz hab ich oben gepostet). Such dir den kleinsten gemeinsamen Nenner, mach nur das was alle darstellen - ich halte mich da vor allen an Outlook. Der machts einem schon schwer genug, aber ausschließen kann man den nicht... nutzen einfach zu viele.

Diese Seite wird auch oft als Referenz empfohlen.

Viel Glück.

Gruß
Thomas

**elisacarolina** · 09.09.2012, 17:19

Ja da hast du denke ich recht!
Super vielen Dank für die Seite, die hat mir sehr geholfen!

Vielen Dank!

**RainerG** · 30.01.2013, 12:00

In welchen Verzeichnis muss die newsletter.css (klein geschrieben?)?.

Ich habe sie ins Verzeichnis tl_files und auch in das Verzeichnis dass ich im Theme in dem Verzeichnis abgelegt, dass ich unter ORDNER (Hilfetext = "Bitte wählen Sie die Ordner aus, die zu dem Theme gehören.") angelegt, aber keinen Effekt erzielt.

Testweise habe ich hier erst einmal nur folgenden Definition in das CSS eingetragen:

Code:

/* Cascading Style Sheet */
body {
  width: 920;
  background-color: #F5F5F5;
}

Allerdings kann ich keinen Effekt erkennen und auch im Quelltext keinen Hinweis auf die Übernahme der CSS.

Alles unter Contao 2.11.7 mit Avisota 1.7.0

**tril** · 30.01.2013, 12:19

Du musst die newsletter.css mit dem internen CSS Editor anlegen.

**RainerG** · 30.01.2013, 12:28

Zitat von tril

Du musst die newsletter.css mit dem internen CSS Editor anlegen.

Erstmal danke für die schnelle Antwort, auch wenn ich irgendwie im moment noch auf dem Schlauch stehe.

Als Stylesheet anlegen, oder wie meinst Du das? Welchen internen CSS-Editor? Bisher habe ich CSS unter Themes - CSS - Stylesheets hinterlegt.
Oder meinst Du die Importfunktion unter Themes - Stylesheets?

*grübel*

**tril** · 30.01.2013, 12:31

Zitat von RainerG

Bisher habe ich CSS unter Themes - CSS - Stylesheets hinterlegt.

Ja genau das ist das, die Datei darf dort übrigens als Titel nur newsletter haben (ohne .css),
Dann sollte Contao eine system/scripts/newsletter.css anlegen.

**RainerG** · 30.01.2013, 12:37

Zitat von tril

Ja genau das ist das, die Datei darf dort übrigens als Titel nur newsletter haben (ohne .css),
Dann sollte Contao eine system/scripts/newsletter.css anlegen.

Cool, hat geklappt!

Großes DANKE!