• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Contao und CSS
 

Contao und CSS

on

  • 14,773 views

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

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

Statistics

Views

Total Views
14,773
Views on SlideShare
14,068
Embed Views
705

Actions

Likes
4
Downloads
0
Comments
1

6 Embeds 705

http://www.little-boxes.de 310
http://www.slideshare.net 250
http://little-boxes.de 132
http://www.littleboxes.info 10
https://duckduckgo.com 2
http://static.slidesharecdn.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • +1 für matrix slides !
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Contao und CSS Contao und CSS Presentation Transcript

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