SlideShare ist ein Scribd-Unternehmen logo
Contao und CSS Möglichkeiten der Einbindung und der effizienten BearbeitungContao und CSS – März 2011Peter Müllerhttp://pmueller.de/
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“.
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
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
… bietet Ihnen Contao für die Verwaltung Ihrer Stylesheets ein komfortables Backend-Modul … Leo im Handbuch, S. 82
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
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
Die Lösung
Das Ergebnis
... 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
Inhalt
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.
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
Das Contao Framework: Benutzersicht $this->framework $this->framework 1 2
$this->framework $this->stylesheets 4 3
Inhalt
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
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
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
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
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
Integration mit Backend-Modul Seitenlayout Interne Stylesheets a a a a 1. Kopf- und Fußzeile 2. Spaltenkonfiguration 3. Stylesheets einbinden 4. Statisches Layout
Ich kann mich einfach nicht an den internen CSS-Editor gewöhnen, auch nicht mit der Extension [csseditor].  Juke  im Forum2009-12-14
Inhalt
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
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
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.
Inhalt
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
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
Inhalt
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
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
Inhalt
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 ─ ─ ─ ─
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

Weitere ähnliche Inhalte

Andere mochten auch

seminario Medicamentos quirales
seminario Medicamentos quiralesseminario Medicamentos quirales
seminario Medicamentos quiralesestudia medicina
 
Taller para la busqueda de empleo
Taller para la busqueda de empleoTaller para la busqueda de empleo
Taller para la busqueda de empleo
irisschvartz
 
Cap 07 dhcp y nat
Cap 07 dhcp y natCap 07 dhcp y nat
Cap 07 dhcp y nat
cequiroz2011
 
Recht auf Information
Recht auf InformationRecht auf Information
Recht auf Information
Martin Ladstaetter / BIZEPS
 
114987243 samba
114987243 samba114987243 samba
114987243 samba
Guadalupe Del Rosario D.
 
KGWI Report Mitarbeitermotivation und Bindung
KGWI Report Mitarbeitermotivation und BindungKGWI Report Mitarbeitermotivation und Bindung
KGWI Report Mitarbeitermotivation und BindungKelly Services
 
Caso Integrado 1
Caso Integrado 1Caso Integrado 1
Caso Integrado 1
NEPTUNEwx
 
Formato de celdas
Formato de celdasFormato de celdas
Formato de celdas
aleirbagtrabajos
 
Esquema de vacunacion
Esquema de vacunacionEsquema de vacunacion
Esquema de vacunacion
neli1989
 
El voleibol no es más que un
El voleibol no es más que unEl voleibol no es más que un
El voleibol no es más que un
dvsdavidv
 
antz@work Barcamp Mannheim
antz@work Barcamp Mannheimantz@work Barcamp Mannheim
antz@work Barcamp Mannheim
guest6ca4ff
 
mis alumnitos
mis alumnitosmis alumnitos
mis alumnitos
Claudia Martinez
 
DMX2012 Erfolgsfaktoren im Mobile Marketing
DMX2012 Erfolgsfaktoren im Mobile MarketingDMX2012 Erfolgsfaktoren im Mobile Marketing
DMX2012 Erfolgsfaktoren im Mobile Marketing
Alexander Oswald
 
Shda
ShdaShda
Diapositivas
DiapositivasDiapositivas
Magnitudes eléctricas bee
Magnitudes eléctricas beeMagnitudes eléctricas bee
Magnitudes eléctricas bee
Nestor Coronado
 
sustancias quimicas
sustancias quimicassustancias quimicas
sustancias quimicas
victormanuelcorrale
 
Firma DUPLICON Referenzprojekte [Webdesign, Multimedia und Trickfilm]
Firma DUPLICON Referenzprojekte [Webdesign, Multimedia und Trickfilm]Firma DUPLICON Referenzprojekte [Webdesign, Multimedia und Trickfilm]
Firma DUPLICON Referenzprojekte [Webdesign, Multimedia und Trickfilm]
DUPLICON
 
5) período fetal
5) período fetal5) período fetal
5) período fetal
estudia medicina
 
Agilität - Führung im Wandel
Agilität - Führung im WandelAgilität - Führung im Wandel
Agilität - Führung im Wandel
grow.up. Managementberatung GmbH
 

Andere mochten auch (20)

seminario Medicamentos quirales
seminario Medicamentos quiralesseminario Medicamentos quirales
seminario Medicamentos quirales
 
Taller para la busqueda de empleo
Taller para la busqueda de empleoTaller para la busqueda de empleo
Taller para la busqueda de empleo
 
Cap 07 dhcp y nat
Cap 07 dhcp y natCap 07 dhcp y nat
Cap 07 dhcp y nat
 
Recht auf Information
Recht auf InformationRecht auf Information
Recht auf Information
 
114987243 samba
114987243 samba114987243 samba
114987243 samba
 
KGWI Report Mitarbeitermotivation und Bindung
KGWI Report Mitarbeitermotivation und BindungKGWI Report Mitarbeitermotivation und Bindung
KGWI Report Mitarbeitermotivation und Bindung
 
Caso Integrado 1
Caso Integrado 1Caso Integrado 1
Caso Integrado 1
 
Formato de celdas
Formato de celdasFormato de celdas
Formato de celdas
 
Esquema de vacunacion
Esquema de vacunacionEsquema de vacunacion
Esquema de vacunacion
 
El voleibol no es más que un
El voleibol no es más que unEl voleibol no es más que un
El voleibol no es más que un
 
antz@work Barcamp Mannheim
antz@work Barcamp Mannheimantz@work Barcamp Mannheim
antz@work Barcamp Mannheim
 
mis alumnitos
mis alumnitosmis alumnitos
mis alumnitos
 
DMX2012 Erfolgsfaktoren im Mobile Marketing
DMX2012 Erfolgsfaktoren im Mobile MarketingDMX2012 Erfolgsfaktoren im Mobile Marketing
DMX2012 Erfolgsfaktoren im Mobile Marketing
 
Shda
ShdaShda
Shda
 
Diapositivas
DiapositivasDiapositivas
Diapositivas
 
Magnitudes eléctricas bee
Magnitudes eléctricas beeMagnitudes eléctricas bee
Magnitudes eléctricas bee
 
sustancias quimicas
sustancias quimicassustancias quimicas
sustancias quimicas
 
Firma DUPLICON Referenzprojekte [Webdesign, Multimedia und Trickfilm]
Firma DUPLICON Referenzprojekte [Webdesign, Multimedia und Trickfilm]Firma DUPLICON Referenzprojekte [Webdesign, Multimedia und Trickfilm]
Firma DUPLICON Referenzprojekte [Webdesign, Multimedia und Trickfilm]
 
5) período fetal
5) período fetal5) período fetal
5) período fetal
 
Agilität - Führung im Wandel
Agilität - Führung im WandelAgilität - Führung im Wandel
Agilität - Führung im Wandel
 

Ähnlich wie Contao und CSS

Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
Benjamin Zekavica Projects
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
Steven Grzbielok
 
Systemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im ÜberblickSystemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im Überblick
a3 systems GmbH
 
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009dasmedienkombinatde
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerkTYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
Nicolai Schwarz
 
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...
busitec GmbH
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
Magento2 - Frontend under the hood
Magento2 - Frontend under the hoodMagento2 - Frontend under the hood
Magento2 - Frontend under the hood
Mathias Elle
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
Michael Kollmannsberger
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
Nicolai Schwarz
 
TCCE-Vorbereitung T3CRR23
TCCE-Vorbereitung T3CRR23TCCE-Vorbereitung T3CRR23
TCCE-Vorbereitung T3CRR23
Jan-Philipp Halle
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit Wordpress
Blogwerk AG
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3
webpard UG
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
die.agilen GmbH
 

Ähnlich wie Contao und CSS (20)

Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
Systemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im ÜberblickSystemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im Überblick
 
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
 
Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerkTYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
 
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Magento2 - Frontend under the hood
Magento2 - Frontend under the hoodMagento2 - Frontend under the hood
Magento2 - Frontend under the hood
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
 
TCCE-Vorbereitung T3CRR23
TCCE-Vorbereitung T3CRR23TCCE-Vorbereitung T3CRR23
TCCE-Vorbereitung T3CRR23
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit Wordpress
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
 

Contao und CSS

  • 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
  • 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
  • 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
  • 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
  • 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.
  • 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
  • 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
  • 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