Das Dokument behandelt die Integration und effiziente Bearbeitung von CSS in Contao, einschließlich interner und externer Stylesheets sowie die Nutzung von CSS-Frameworks. Es umfasst praktische Hinweise zur Verwendung des internen CSS-Editors und erläutert Herausforderungen sowie Vorteile der verschiedenen Ansätze. Die Folien dienen als Gedächtnisstütze für einen Vortrag und bieten Einblicke in die administration von Stylesheets innerhalb des Contao-Systems.

1. Contao und CSSMö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üllerIT-DozentFachbuchautorLittle Boxes 1Little Boxes 2Peter Müller Websites erstellen mit Contao536 Seiten • 34,90 EuroISBN 978-3-8362-1651-7Galileo Computing

4. 1. First Contact: Contao und CSS2. Das Contao CSS-Framework3. Interne Stylesheets4. Externe Stylesheets5. Teamwork: Intern und extern kombinieren6. Contao und externe CSS-Frameworks7. Die Matrix: Vier EntscheidungenInhalt

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

6. Stylesheets – Der erste EindruckInterner CSS-EditorDer sich den Wolf klicktStylesheets importierenxBrowser_style_schietCSS-Dateien im RootordnerEntfernt 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/frameworksfordesignersCSS-Frameworks sind Waschmaschinen für Browserbugs.

13. Das Contao CSS-Framework: TechnikDer KernSeitentemplate 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 Erweiterungbasic.cssgridpx.css oder gridpc.css

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

15. $this->framework$this->stylesheets43

16. Inhalt

17. Das Backend-Modul StylesheetsVerwaltet interne Stylesheets speichert Stylesheets in der Datenbankohne Datei-Endung *.css Generiert CSS-Dateien automatischim Hauptordner („Root“) komprimiert, ohne Kommentare EinbahnstraßeBackend-ModulStylesheetsDatenbankCSS-Datei im Root

18. Der interne CSS-EditorCSS per HTML-Formular Gut geeignet für ungeübte CSS-SchreiberMaus und Tastatur kombinierenPraktisch Wiederherstellen vorheriger VersionenTextarea „Eigener Code“Styles ausblenden per „Augen-Klick“Einige Einschränkungen padding und margin: nur eine Einheit für alle Seitenborder: nur eine Farbe für alle Seiten background-position: keine Werte möglich

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

20. Interne Stylesheets bearbeiten: Suchen und FilternSelektoren suchenFeld Suchen • Selektor zeigt nur Styles mit diesem SelektorAnzeige der Anzahl rechts oben beachten Kommentare Damit ich auch morgen noch weiß, was ich mir heute dabei gedacht habe. Kategorien erstellen Feld FilternBezeichnungen selbst ausdenkenBeispiel: „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 InstallationSystem • Einstellungen • CSS Editor settingsBackend-Modul Stylesheets • Neues Symbol Einige EinschränkungenReihenfolge der Deklarationen im Style wird geändert padding und margin: gemischte Einheiten problematischdoppelte Deklarationen werden manchmal entfernt ausgeblendete Styles werden nach Speichern entfernt

22. Integration mit Backend-Modul SeitenlayoutInterne Stylesheetsaaaa1. Kopf- und Fußzeile2. Spaltenkonfiguration3. Stylesheets einbinden4. 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 DatenbankDefinitionCSS-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 einbindenVerwaltung vereinfachenZentrales Stylesheet erstellen: tl_files\layout\zentrale.cssCSS-Dateien per @import in zentrale.css einbindenMedientyp in CSS-Dateien per @mediaIm Seitenlayout einbindenBackend-Modul Seitenlayout • Zusätzliche Head-Tags via $this->headdirekt im Seitentemplate fe_page.tplCSS-Framework kann genutzt werden

27. Integration mit Backend-Modul SeitenlayoutExterne Stylesheetsaaaa1. Kopf- und Fußzeile2. Spaltenkonfiguration3. Stylesheets einbinden 1x4. Statisches Layout1 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 NacheinanderMit externen Stylesheets entwickeln Vor dem Launch importierenNach dem Launch intern pflegen Als Ergänzung Externe Stylesheets als Basis Zusätzliche interne Stylesheets Kunden können so einfache Änderungen machenStylesheet tinymce.css für den TinyMCE Reihenfolge bei der Einbindunginterne Stylesheets nach externen

30. Interne Stylesheets extern bearbeiten: MischmaschBearbeitung der CSS-Dateien im Root mit externem Editor mit Firebug oder Edit CSS von der Web Developer ToolbarProblem EinbahnstraßeCSS-Dateien von Root in tl_files kopieren und importierenStyles via Zwischenablage in [csseditor] kopierenNachteilKeine Kommentare im CSS Keine Kategorien in internen Stylesheets

31. Inhalt

32. Externe CSS-FrameworksBeispiele YAML CSS-Framework 960 Grid SystemBlueprintGründeGewohnte UmgebungImplementierungen 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) NachteileBackend-Modul Seitenlayout liegt teilweise brach

33. Integration mit Backend-Modul SeitenlayoutExterne CSS-Frameworks1. Kopf- und Fußzeile2. Spaltenkonfiguration3. Stylesheets einbindenxxxx4. Statisches Layout

34. Inhalt

35. Die Matrix: Vier Entscheidungen SeitentemplateEditorSpeicherortCSS-Frameworkfe_pagefe_*internexternDB/roottl_filesContaoanderesaaaaaaaaaaaaaaaaa────Interne Stylesheets───Interne Stylesheets,extern bearbeitenExterne Stylesheets────Externes CSS-Framework────

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