geschrieben von Roland Lehmann, 8 Kommentare
Webdesigner müssen einen nicht unerheblichen Teil ihrer Zeit damit verbringen, die Probleme auszubügeln, die ein gewisses Produkt der Firma Microsoft namens InternetExplorer bei der Darstellung von Webseiten verursacht. Eigentlich müsste das nicht so sein, wenn Microsoft sich an die Vorgaben des W3C halten würde, das festlegt, wie Browser HTML und CSS darzustellen haben.
Aber die Zeiten, in denen man sich damit rumschlagen musste, gehören der Vergangenheit an, denn jetzt gibt es YAML. YAML ist ein CSS-Framework. Auf der Homepage von YAML gibt es ein kleines Tool names YAML-Builder, mit dem sich ein Grundlayout definieren lässt. Dazu liefert der Builder dann CSS-Dateien und Markup, welches man in sein Webprojekt einbindet und schon hat man eine große Sorge weniger. Wie man das YAML Framework in SilverStripe einbindet, beschreibe ich in den folgenden Schritten:
- YAML Verzeichnis nach themes/blackcandy/ kopieren. Blackcandy steht für den Namen des Themes.
- Layout mit YAML Builder zusammenstellen
- Den Inhalt der Datei layout.css mit dem Code aus my_layout.css des Builders überschreiben. Der Pfad für zwei der CSS-imports muss wie folgt angepasst werden:
so sieht´s aus -> so muss es aussehen:
url(screen/basemod.css); -> url(../yaml/screen/basemod.css);
url(screen/content.css); -> url(content.css);
- Der Inhalt der Datei basemod.css aus dem YAML Builder wird über den Inhalt der Datei blackcandy/yaml/screen/basemod.css kopiert. Diese Datei sorgt für das Basislayout, beispielsweise Breite der verschiedenen Spalten.
- Die Datei blackcandy/yaml/screen/content_draft.css wird nach blackcandy/css/content.css kopiert. In dieser Datei wird jetzt das Individualdesign definiert. Elementdefinitionen dieser Datei haben automatisch Vorrang vor denen anderer CSS Dateien.
- Jetzt fehlt noch die Datei patch_my_layout.css aus dem YAML Builder. Diese kommt in das Verzeichnis blackcandy/css/my_patches/patch_my_layout.css.
- Zu guter letzt wird das Markup des YAML Builders in das SilverStripe Theme eingearbeitet. Es wird in die Datei blackcandy/templates/Page.ss kopiert. Die entsprechenden Teile der Datei müssen jetzt in sinnvolle Includes gepackt werden. Die Definition im <head> der Page.ss müssen außerdem mit den neuen des YAML Builders verschmolzen werden. Wichtig ist hier vor allem das Einbinden der zentralen CSS Datei:
<% require themedCSS(layout) %>
- Im <head> ist in der Browserweiche für den IE eine Patchdatei definiert. Deren Referenz muss auch noch angepasst werden:
href="../css/my_patches/patch_my_layout.css"