Vortrag auf dem Usertreffen 2010 in Essen. Contao hieß damals noch TYPOlight.

1. Contao und CSS Möglichkeiten der Einbindung und der effizienten BearbeitungContao und CSS – März 2011Peter Müllerhttp://pmueller.de/

2. Diese Folien bildeten die Grundlage für einen Vortrag, den ich am 15. Mai 2010 auf dem Usertreffen in Essen gehalten habe. Direkt danach hat Leo Feyer die Umbenennung von TYPOlight in Contao bekannt gegeben. Die Folien sind nicht alle selbsterklärend und es fehlen sowohl der Ton als auch die Live-Demos im Backend von Contao. Es fehlt auch der Unterhaltungswert eines lebendigen Vortrages. Wer den Vortrag erlebt hat, dem mögen die Folien zur Erinnerung dienen. Allen anderen geben Sie vielleicht einen kleinen Einblick in die Arbeit mit „Contaound CSS“.

3. Peter Müller IT-Dozent Fachbuchautor Little Boxes 1 Little Boxes 2 Peter Müller Websites erstellen mit Contao536 Seiten • 34,90 EuroISBN 978-3-8362-1651-7Galileo Computing

4. 1. First Contact: Contao und CSS 2. Das Contao CSS-Framework 3. Interne Stylesheets 4. Externe Stylesheets 5. Teamwork: Intern und extern kombinieren 6. Contao und externe CSS-Frameworks 7. Die Matrix: Vier Entscheidungen Inhalt

5. … bietet Ihnen Contao für die Verwaltung Ihrer Stylesheets ein komfortables Backend-Modul … Leo im Handbuch, S. 82

6. Stylesheets – Der erste Eindruck Interner CSS-Editor Der sich den Wolf klickt Stylesheets importieren xBrowser_style_schiet CSS-Dateien im Rootordner Entfernt die Zähne samt Belag

7. Something that really bothers me about the internal CSS editor is: I don't use it at all. What a pity. Thyon im Forum2007-11-29

8. Die Lösung

9. Das Ergebnis

10. ... bin ich auf das Contao-Framework umgestiegen, da es damit dann doch noch mal eine Ecke schneller geht, eine neue Site aufzusetzen. hschottm im Forum2008-09-01

11. Inhalt

12. Was ist ein Framework? Ein Framework ist eine Sammlung von Werkzeugen, Bibliotheken, Konventionen und bewährten Praktiken, die regelmäßig anfallende Aufgaben in allgemeine, wiederverwendbare Module zu abstrahieren versucht. Jeff Croft im Juni 2007http://alistapart.com/articles/frameworksfordesigners CSS-Frameworks sind Waschmaschinen für Browserbugs.

13. Das Contao CSS-Framework: Technik Der Kern Seitentemplate fe_page.tpl $this->framework $this->stylesheets $this->head if($this->header|left|right|footer) : endif Stylesheet system/contao.css Stylesheet system/iefixes.css Die Erweiterung basic.css gridpx.css oder gridpc.css

14. Das Contao Framework: Benutzersicht $this->framework $this->framework 1 2

15. $this->framework $this->stylesheets 4 3

16. Inhalt

17. Das Backend-Modul Stylesheets Verwaltet interne Stylesheets speichert Stylesheets in der Datenbank ohne Datei-Endung *.css Generiert CSS-Dateien automatisch im Hauptordner („Root“) komprimiert, ohne Kommentare Einbahnstraße Backend-ModulStylesheets Datenbank CSS-Datei im Root

18. Der interne CSS-Editor CSS per HTML-Formular Gut geeignet für ungeübte CSS-Schreiber Maus und Tastatur kombinieren Praktisch Wiederherstellen vorheriger Versionen Textarea „Eigener Code“ Styles ausblenden per „Augen-Klick“ Einige Einschränkungen padding und margin: nur eine Einheit für alle Seiten border: nur eine Farbe für alle Seiten background-position: keine Werte möglich

19. Backend-Modul Stylesheets • CSS-Import CSS-Dateien importieren Externe CSS-Dateien => interne Stylesheets Müssen unterhalb von tl_files liegen Dateien werden zu Datensätzen basic.css wird zu basic Einige Einschränkungen Farbnamenwhite => #white Keywords font-size: small geht nicht => 81.25% oder 13px Kurzschreibweisen border: 1px solid #f00 geht, alles andere nicht

20. Interne Stylesheets bearbeiten: Suchen und Filtern Selektoren suchen Feld Suchen • Selektor zeigt nur Styles mit diesem Selektor Anzeige der Anzahl rechts oben beachten Kommentare Damit ich auch morgen noch weiß, was ich mir heute dabei gedacht habe. Kategorien erstellen Feld Filtern Bezeichnungen selbst ausdenken Beispiel: „Layout“, „Navigation“, „Formulare“ etc. zeigt nur Styles mit dieser Kategorie zuweisen mit Mehrere bearbeiten nützlich

21. Die Erweiterung [csseditor] Interne Stylesheets bearbeiten im Quelltext, speichert in die Datenbank kompatibel mit internem CSS-Editor Nach der Installation System • Einstellungen • CSS Editor settings Backend-Modul Stylesheets • Neues Symbol Einige Einschränkungen Reihenfolge der Deklarationen im Style wird geändert padding und margin: gemischte Einheiten problematisch doppelte Deklarationen werden manchmal entfernt ausgeblendete Styles werden nach Speichern entfernt

22. Integration mit Backend-Modul Seitenlayout Interne Stylesheets a a a a 1. Kopf- und Fußzeile 2. Spaltenkonfiguration 3. Stylesheets einbinden 4. Statisches Layout

23. Ich kann mich einfach nicht an den internen CSS-Editor gewöhnen, auch nicht mit der Extension [csseditor]. Juke im Forum2009-12-14

24. Inhalt

25. Externe Stylesheets: CSS außerhalb der Datenbank Definition CSS-Dateien mit der Endung *.css unterhalb von tl_files gespeichert Backend-Modul Stylesheets ist arbeitslos Bearbeitung Nicht mit dem internen Editor oder [csseditor] Beliebiger externer Editor lokal bearbeiten und per FTP hochladen im Editor per FTP direkt auf dem Webspace Backend-Modul System • Dateiverwaltung

26. Externe Stylesheets verwalten und einbinden Verwaltung vereinfachen Zentrales Stylesheet erstellen: tl_filesayoutentrale.css CSS-Dateien per @import in zentrale.css einbinden Medientyp in CSS-Dateien per @media Im Seitenlayout einbinden Backend-Modul Seitenlayout • Zusätzliche Head-Tags via $this->head direkt im Seitentemplate fe_page.tpl CSS-Framework kann genutzt werden

27. Integration mit Backend-Modul Seitenlayout Externe Stylesheets a a a a 1. Kopf- und Fußzeile 2. Spaltenkonfiguration 3. Stylesheets einbinden 1 x 4. Statisches Layout 1 Die Erweiterung [stylesheets_external] ermöglicht das Einbinden von Stylesheets im Backend-Modul Seitenlayouts. Womit auch Punkt 3 im grünen Bereich wäre.

28. Inhalt

29. Interne und externe Stylesheets Nacheinander Mit externen Stylesheets entwickeln Vor dem Launch importieren Nach dem Launch intern pflegen Als Ergänzung Externe Stylesheets als Basis Zusätzliche interne Stylesheets Kunden können so einfache Änderungen machen Stylesheet tinymce.css für den TinyMCE Reihenfolge bei der Einbindung interne Stylesheets nach externen

30. Interne Stylesheets extern bearbeiten: Mischmasch Bearbeitung der CSS-Dateien im Root mit externem Editor mit Firebug oder Edit CSS von der Web Developer Toolbar Problem Einbahnstraße CSS-Dateien von Root in tl_files kopieren und importieren Styles via Zwischenablage in [csseditor] kopieren Nachteil Keine Kommentare im CSS Keine Kategorien in internen Stylesheets

31. Inhalt

32. Externe CSS-Frameworks Beispiele YAML CSS-Framework 960 Grid System Blueprint Gründe Gewohnte Umgebung Implementierungen auch für andere CMSysteme Mehr Features bei z. B. flexiblen Layouts und Formularen Voraussetzungen Angepasstes Seitentemplate statt fe_page.tpl Externe Stylesheets unterhalb von tl_files Einbindung der Stylesheets manuell (ohne $this->framework) Nachteile Backend-Modul Seitenlayout liegt teilweise brach

33. Integration mit Backend-Modul Seitenlayout Externe CSS-Frameworks 1. Kopf- und Fußzeile 2. Spaltenkonfiguration 3. Stylesheets einbinden x x x x 4. Statisches Layout

34. Inhalt

35. Die Matrix: Vier Entscheidungen Seitentemplate Editor Speicherort CSS-Framework fe_page fe_* intern extern DB/root tl_files Contao anderes a a a a a a a a a a a a a a a a a ─ ─ ─ ─ Interne Stylesheets ─ ─ ─ Interne Stylesheets, extern bearbeiten Externe Stylesheets ─ ─ ─ ─ Externes CSS-Framework ─ ─ ─ ─

36. Vielen Dank für Ihre Aufmerksamkeit. pmueller.dewebsites-erstellen-mit-contao.de Peter Müller Websites erstellen mit Contao536 Seiten • 34,90 EuroISBN 978-3-8362-1651-7Galileo Computing