Nachdem Sie die Seitenvorlage erstellt haben, müssen Sie diese nur noch im Modul Seitenlayouts im TYPOlight-Backend aktivieren. Im Frontend lässt sich dann bereits das neue Design erkennen, allerdings fehlen noch einige CSS-Formatierungen, da die Elemente in TYPOlight andere CSS-Klassen und -IDs haben als im Template Business Design 2007. Im letzten Schritt müssen Sie daher noch das Stylesheet des externen Layouts entsprechend anpassen. Ersetzen Sie dort den Selektor #navigation durch #mainmenu, damit die Hauptnavigation korrekt referenziert wird, und den Selektor .newsItem durch #news>div, damit die Nachrichten in der rechten Spalte richtig dargestellt werden. Listing 7 zeigt alle angepassten Formatdefinitionen.
Listing 7: An TYPOlight angepasster CSS-Code
/*navigation*/#mainmenu ul { margin:0; padding:0; }#mainmenu li { margin:0; padding:0; list-style:none; display:inline; }#mainmenu a { color:#225799; padding:0 20px 0 0; text-decoration:none; text-transform:uppercase; }#mainmenu span { padding:0 20px 0 0; text-transform:uppercase; }#mainmenu a:hover { color:#000000; }/*news*/#news { float:right; width:250px; padding:20px 0; line-height:140%; text-align:justify; }#news>div { padding:20px; background:#FEFFD5; border:1px solid #FFEB70; font-size:90%; margin-bottom:20px; }#news h1 { font-size:16px; margin-top:0; }
Damit ist die Einbindung des externen Layouts abgeschlossen. Es steht außer Frage, dass man dieses Layout problemlos auch mit den TYPOlight-Bordmitteln hätte realisieren können, wodurch es nicht nur leichter zu warten wäre, sondern auch von allen Backend-Nutzern kollaborativ bearbeitet und weiterentwickelt werden könnte. Wägen Sie also gut ab, bevor Sie sich für die eine oder andere Lösung entscheiden.
Fazit
Interessanter Artikel?
Hat Ihnen der Artikel gefallen? Dies und mehr ist alles Teil des PHP User Vol. 6.
Die Erstellung von Seitenlayouts in TYPOlight ist wegen der konsequenten Fokussierung auf CSS und tabellenlose Designs im ersten Moment vielleicht ein wenig ungewohnt, zeigt sich aber bei näherer Betrachtung als sehr wirkungsvoll und flexibel. Dabei besticht die TYPOlight-Lösung auch durch ihre Kompaktheit im Vergleich zu vielen anderen CSS-Frameworks, die aufgrund ihres Funktionsreichtums und des hehren (aber nicht immer sinnvollen) Ziels, sämtliche veralteten Browser inklusive des schon lange toten Internet Explorers 5 für Mac unterstützen zu wollen, durchaus als überdimensioniert bezeichnet werden können. Denken Sie daran, dass nicht alle Menschen über einen DSL-Anschluss verfügen und gerade außerhalb der Großstädte für viele noch das ISDN-Modem die Eintrittskarte in die virtuelle Welt ist. Daher sollten Sie es vermeiden, kilobyteweise nicht benötigte Ressourcen zu laden.
Leo Feyer ist Geschäftsführer der Firma iNet Robots, die Webhosting und eCommerce-Lösungen anbietet. Er hat TYPOlight im Jahre 2006 erschaffen und konzentriert sich seit der Gründung des TYPOlight-Teams Anfang 2008 auf die Weiterentwicklung des TYPOlight-Kerns.
