In Form gebracht
Kommentare

Das CSS-Framework erweitern
Neben der Erstellung von CSS-Layouts, die fest im TYPOlight-Core verankert ist, lässt sich das TYPOlight-CSS-Framework beliebig erweitern. Auf der Projektwebseite werden zwei

Das CSS-Framework erweitern

Neben der Erstellung von CSS-Layouts, die fest im TYPOlight-Core verankert ist, lässt sich das TYPOlight-CSS-Framework beliebig erweitern. Auf der Projektwebseite werden zwei solcher Erweiterungen angeboten: Das Reset-Stylesheet setzt proprietäre Abstände und Formatierungen zurück, sodass die Elemente in allen Browsern einheitlich dargestellt werden. Die beiden anderen Stylesheets definieren ein prozentuales und ein Pixel-Grid-System zur Unterteilung der einzelnen Layoutbereiche in mehrere Spalten. Ein sehr bekannter Vertreter pixelbasierter Grid-Systeme ist das 960 Grid System, das nicht weniger als 26 verschiedene Spaltengrößen und somit wohl jedes gewünschte Raster zulässt. Das auf typolight.org zum Download verfügbare Pixel-Grid-System geht ebenfalls von einer Gesamtbreite von 960 Pixeln aus und unterteilt sie in zwölf (Listing 4).

Listing 4: 12-spaltiges Pixel-Grid-System für TYPOlight

/* Aufteilung in 12 Spalten */
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12 { float:left; display:inline; margin-right:10px; margin-left:10px; }
/* Breiten */
.g1 { width:60px; }
.g2 { width:140px; }
.g3 { width:220px; }
.g4 { width:300px; }
.g5 { width:380px; }
.g6 { width:460px; }
.g7 { width:540px; }
.g8 { width:620px; }
.g9 { width:700px; }
.g10 { width:780px; }
.g11 { width:860px; }
.g12 { width:940px; }
/* Abstand für Inhaltselemente */
.mod_article>.block { margin-right:10px; margin-left:10px; }
/* Außer der Artikel hat selbst einen Abstand */
.g1 .block,.g2 .block,.g3 .block,.g4 .block,.g5 .block,.g6 .block,.g7 .block,.g8 .block,.g9 .block,.g10 .block,.g11 .block,.g12 .block { margin-right:0; margin-left:0; }
/* Verschachtelte Grid-Elemente */
.gr { margin-right:20px !important; }

Um das Grid-Stylesheet zu nutzen, importieren Sie es über das TYPOlight-Backend-Modul Stylesheets und binden es anschließend in Ihr Seitenlayout ein. Danach können Sie die Klassen g1 bis g12 beliebigen Elementen zuweisen und sie so am Raster ausrichten. Eine Unterteilung in zwei Spalten (50:50) entspricht dabei zweimal der Klasse g6, eine Unterteilung in vier Spalten viermal der Klasse g3. Natürlich lassen sich auch ungleiche Spaltengrößen realisieren, beispielsweise g4 und g8 oder g3, g5 und g4. Sollte Ihnen das nicht ausreichen, lässt sich das 960-Pixel-Grid auf 16 Spalten erweitern, was noch mehr Kombinationen erlaubt. Die Zuweisung der CSS-Klassen erfolgt in TYPOlight über das Feld CSS-ID/Klasse, das in jedem Artikel, Modul und Inhaltselement verfügbar ist. Abbildung 2 zeigt eine Seite mit normal angeordneten Inhaltselementen, die nun anhand des Grid-Systems ausgerichtet werden sollen.

Abb. 2: Normal angeordnete Inhaltselemente

Dazu müssen Sie die einzelnen Inhaltselemente öffnen und die entsprechenden Grid-Klassen hinzufügen. Noch schneller geht das mit der TYPOlight-Funktion mehrere bearbeiten, mit der Sie alle Änderungen in einem Rutsch erfassen können. In meinem Beispiel habe ich die Klassen g3:g3:g3:g3, g8:g4 und g4:g4:g4 verwendet. Das Ergebnis sehen Sie in Abbildung 3.

Abb. 3: Am Raster angeordnete Inhaltselemente

Der Vollständigkeit halber sei erwähnt, dass dies im Internet Explorer bis einschließlich Version 7 leider nicht ohne zusätzliches Markup funktioniert. Nach jeder Zeile muss daher ein unsichtbares Clearing-Element eingefügt werden (

), das Sie bereits aus Listing 1 kennen. Dieses erstellen Sie am besten mit dem Inhaltselement HTML.

Eine eigene Seitenvorlage erstellen

Mit dem (erweiterten) CSS-Framework und der Möglichkeit, eigene Layoutbereiche zu definieren und einzelne Views anzupassen, lassen sich alle denkbaren Designs umsetzen. Die Notwendigkeit einer eigenen Seitenvorlage bzw. der Integration eines externen Layouts besteht daher nicht. Nur wenn es z. B. der Zeitplan nicht zulässt, ein Design in TYPOlight zu refaktorieren, kann man diesen Schritt erwägen. Allerdings sollten Sie bedenken, dass die Aktualisierung des Systems dadurch komplizierter wird. Erscheint beispielsweise eine neue Browserversion, wird das TYPOlight-CSS-Framework automatisch bei einem der nächsten Updates angepasst, das externe Layout müssen Sie jedoch selbst aktualisieren. Ich empfehle Ihnen daher, Layouts nach Möglichkeit immer mit dem TYPOlight CSS-Framework umzusetzen.

Als Beispiel für die Integration eines externen Layouts dient das Template Business Design 2007 von Tjobbe Andrews, das auf der Webseite Open Source Web Design erhältlich ist. Die im Downloadarchiv befindliche Datei index.html enthält das HTML-Markup des Templates, das in Kombination mit dem Markup der TYPOlight-Standardvorlage fe_page.tpl die Grundlage Ihrer eigenen Seitenvorlage bildet. Kopieren Sie die Datei index.html in das templates-Verzeichnis Ihrer TYPOlight-Installation und benennen Sie sie in fe_business_design.tpl um. Öffnen Sie die neue Datei anschließend in einem Texteditor (oder dem Template-Editor im TYPOlight-Backend) und fügen Sie die TYPOlight-spezifischen Platzhalter ein. Achten Sie beim Überschreiben der Head-Sektion darauf, das Stylesheet- und das Meta-Author-Tag zu erhalten. Passen Sie außerdem den Pfad zum Stylesheet an und entfernen Sie den Platzhalter framework; ?>, da Sie das TYPOlight-CSS-Framework in diesem Fall nicht benötigen. Listing 5 zeigt den angepassten Head-Bereich.

Listing 5: An TYPOlight angepasster Head-Bereich

doctype; ?>


<base href="base; ?>" />pageTitle; ?> - mainTitle; ?> title>
<meta http-equiv="Content-Type" content="text/html; charset=charset; ?>" /><meta name="description" content="description; ?>" /><meta name="keywords" content="keywords; ?>" />robots; ?>
<!--[if lte IE 7]><![endif]-->stylesheets; ?>
  head; ?>

Als Nächstes ersetzen Sie die Inhalte der verschiedenen Layoutbereiche durch Platzhalter, damit TYPOlight weiß, an welcher Stelle welche Inhalte eingefügt werden müssen. Entfernen Sie dabei keinesfalls den Copyright-Hinweis des Designers, da Sie sonst das Design nicht mehr legal nutzen dürfen! Den angepassten Body-Bereich finden Sie in Listing 6.

Listing 6: An TYPOlight angepasster Body-Bereich

header; ?>
main; ?>
left; ?>
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -