Foliensatz als PDF - Contao

Theme-Erstellungvon der Photoshop Vorlage zur Website4ward.media :: Christoph Wiechert 1

Eine kurze Vorstellung●Christoph Wiechert● Webentwicklung seit 1998● Contao (TYPOlight) Fan seit 2007● In der Arbeitsgruppe Core-Entwicklung seit Anfang 2012●●●●Firma: 4ward.mediaForum-Nick: PsiGithub: psi-4wardE-Mail: cw@4wardmedia.de4ward.media :: Christoph Wiechert 2

Agenda1) Crashkurs: CSS-Selektoren2) Einführung in das Contao HTML/CSS-Framework3) Umsetzung der neuen Music Academy4) Weiterführende Praxistipps5) Fragen / Diskussion4ward.media :: Christoph Wiechert 3

CSS-Selektoren●●●●●Alle TagsaAlle Tags mit der Klasse active.activeDas Element mit der ID main#main Tags mit der Klasse activea.active Tags innerhalb des Elements mit der ID main#main a4ward.media :: Christoph Wiechert 4

CSS-Selektoren●●●● Tags innerhalb des Elements mit der ID main und der Klasse active#main a.activeAlle Elemente mit der Klasse layout_short unterhalb des Elements mit derKlasse mod_newslist.mod_newslist .layout_shortAlle Elemente und alle Elementea, spanAlle direkten Nachfolger mit der Klasse block der Elemente mit der Klassemod_article.mod_article > .block4ward.media :: Christoph Wiechert 5

Signifikanz von CSS-SelektorenDefinitionen besitzen eine Wertigkeit.Damit können sie ergänzt / überschrieben werden.●a.active hat eine höhere Signifikanz als a● #main a.active > a.active●body #main a.active > #main a.active●a.active > a.activefalls im Quelltext später notiert4ward.media :: Christoph Wiechert 6

Einführung in das ContaoHTML/CSS-Framework4ward.media :: Christoph Wiechert 7

HTML-Struktur und CSS-Klassen●●●Contao bringt ausgeklügelte Templates mitKlassen / CSS-IDs können an vielen Stellen festgelegt werden(Seiten, Artikel, Module, Inhaltselemente)Contao generierte diverse nützliche Klassen(first, last, even, odd)4ward.media :: Christoph Wiechert 8

HTML DOM Struktur4ward.media :: Christoph Wiechert 9

CSS Framework●system/contao.css– einige Standardformatierungen– Styles für das Framework– browserspezifische Fixes– kein reset.css●Ergänzt durch Einstellungen des Seitenlayouts4ward.media :: Christoph Wiechert 10

Seitenlayout●Einstellungen des CSS-Frameworks– Kopfzeile, Fußzeile– Linke, rechte und /oder Hauptspalte– Breiten, Höhen– Gesamtbreite– Ausrichtung●●Definition eigener Layoutbereiche (wenn nötig)Möglichkeit, das Framework zu deaktivieren4ward.media :: Christoph Wiechert 11

Umsetzung …Das Theme steht auf derKonferenz-Website zum Download bereitund kann in Contao importiert werden.4ward.media :: Christoph Wiechert 12

DOM Struktur von nav_default............4ward.media :: Christoph Wiechert 13

CSS-Klassen der Navigation●●●●●first/last pro Block enthält level_Xsubmenuactivetrail4ward.media :: Christoph Wiechert 14

Praxistipps4ward.media :: Christoph Wiechert 15

HTML5●Auswahl zwischen HTML5 und XHTML im Seitenlayout● HTML5Shim für die Herren Internet-Explorer

Spezifisches Styling ohne eigenes Seitenlayout●●●●Body-Klasse im SeitenlayoutCSS-Klasse in den SeiteneinstellungenCSS/ID Einstellung von Artikeln, Modulen, Inhaltselementen von mod_article bekommt als ID den Alias des Artikels●Module können auch in Artikel eingefügt werden→ CSS-ID/Klasse vom Inhaltselement wird verwendet, nicht vom Modul!4ward.media :: Christoph Wiechert 17

Verschiedene Kopfbilder pro Seite●●●Erweiterung pageImageErweiterung boxes4wardInserttag {{page::alias}} Trick4ward.media :: Christoph Wiechert 18

Anpassung des fe_page Templatefe_page anpassen → schlechte Idee!●●Überlegen, ob es wirklich nötig istNochmal überlegen●Erweiterung: fe_pageSplit4ward4ward.media :: Christoph Wiechert 19

Gridsysteme●%-Grid und 960px Grid unterhttp://www.contao.org/de/download.html●(4-Spalten) Grid mit angepasster Breite– 4ward-Gridbuilderhttp://www.4wardmedia.de/gridbuilder.html●Erweiterung Stylepicker4ward.media :: Christoph Wiechert 20

Nützliche Erweiterungen●Theme+→ Vortrag von Tristan Lins, morgen um 9:00 Uhr●●quickjump4wardeasy_themes4ward.media :: Christoph Wiechert 21

Fragen / Diskussion4ward.media :: Christoph Wiechert 22