Spaltenset Grid: Unterschied zwischen den Versionen
Aus Contao Community Documentation
Tril (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „=Spaltenset als Grid= Das Spaltenset lässt sich wunderbar für Grids verwenden, hierfür sind nur ein paar geringe Anpassungen notwendig die ich hier beschreibe…“) |
Tril (Diskussion | Beiträge) (→Template anpassen) |
||
| (2 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| + | [[Category:Dev_Snippets]] | ||
=Spaltenset als Grid= | =Spaltenset als Grid= | ||
| − | Das Spaltenset lässt sich wunderbar für Grids verwenden | + | Das Spaltenset lässt sich wunderbar für Grids verwenden. Hierfür sind nur ein paar geringe Anpassungen notwendig die hier beschrieben werden. |
==Spalten neu definieren== | ==Spalten neu definieren== | ||
| − | Die Spalten und die dazugehörigen Klassen werden durch die globale Konfigurationsdatei <code>$GLOBALS['TL_SUBCL']</code> definiert. Hier | + | Die Spalten und die dazugehörigen Klassen werden durch die globale Konfigurationsdatei <code>$GLOBALS['TL_SUBCL']</code> definiert. Hier definiert man erst einmal die Spalten auf Grids um. |
Am besten lässt sich das an einem Beispiel, hier für 4 Spalten zeigen: | Am besten lässt sich das an einem Beispiel, hier für 4 Spalten zeigen: | ||
| Zeile 25: | Zeile 26: | ||
==Template anpassen== | ==Template anpassen== | ||
| − | Das klassische [http://960.gs 960.gs] verwendet eine Containerklasse, typischerweise <code>container_12</code>. Leider lässt sich die CSS Klasse <code>subcolumns</code> nicht per Konfiguration ersetzen, deshalb muss hier Hand angelegt werden und die ce_colsetStart.tpl modifiziert werden: | + | Das klassische [http://960.gs 960.gs] verwendet eine Containerklasse, typischerweise <code>container_12</code>. Leider lässt sich die CSS Klasse <code>subcolumns</code> nicht per Konfiguration ersetzen, deshalb muss hier Hand angelegt werden und die ce_colsetStart.tpl und ce_colsetEnd.tpl modifiziert werden: |
| + | '''ce_colsetStart.tpl''' | ||
<source lang="php"> | <source lang="php"> | ||
<!-- Spaltenset Start //--> | <!-- Spaltenset Start //--> | ||
| − | <div class="<?php echo $this->class; ?> container_12"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>> | + | <div class="<?php echo $this->class; ?> container_12 clearfix"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>> |
<!-- first Column //--> | <!-- first Column //--> | ||
<div class="<?php echo $this->column; ?>"> | <div class="<?php echo $this->column; ?>"> | ||
| Zeile 37: | Zeile 39: | ||
</source> | </source> | ||
| − | In dem ersten DIV wird einfach die Ausgabe von <code>$this->scclass</code> durch <code>container_12</code> ersetzt. | + | In dem ersten DIV wird einfach die Ausgabe von <code>$this->scclass</code> durch <code>container_12 clearfix</code> ersetzt. |
| + | {{Hinweis|Anstatt in die '''ce_colsetEnd.tpl''' ein clear-DIV einzufügen, ist es besser zu der Containerklasse zusätzlich die CSS Klasse '''clearfix''' hinzuzufügen.}} | ||
==Subcolumns CSS Dateien löschen== | ==Subcolumns CSS Dateien löschen== | ||
| − | Um das | + | Um das Ganze abzurunden, löscht man die CSS Dateien aus dem Layout; dies geht nur über den generatePage Hook sicher. |
===config.php=== | ===config.php=== | ||
Aktuelle Version vom 4. August 2011, 13:16 Uhr
Inhaltsverzeichnis
Spaltenset als Grid
Das Spaltenset lässt sich wunderbar für Grids verwenden. Hierfür sind nur ein paar geringe Anpassungen notwendig die hier beschrieben werden.
Spalten neu definieren
Die Spalten und die dazugehörigen Klassen werden durch die globale Konfigurationsdatei $GLOBALS['TL_SUBCL'] definiert. Hier definiert man erst einmal die Spalten auf Grids um.
Am besten lässt sich das an einem Beispiel, hier für 4 Spalten zeigen:
$GLOBALS['TL_SUBCL'] = array ( '1x3' => array(array('grid_1', 'inner'), array('grid_3', 'inner')), '2x2' => array(array('grid_2', 'inner'), array('grid_2', 'inner')), '3x1' => array(array('grid_3', 'inner'), array('grid_1', 'inner')), '1x1x2' => array(array('grid_1', 'inner'), array('grid_1', 'inner'), array('grid_2', 'inner')), '1x2x1' => array(array('grid_1', 'inner'), array('grid_2', 'inner'), array('grid_1', 'inner')), '2x1x1' => array(array('grid_2', 'inner'), array('grid_1', 'inner'), array('grid_1', 'inner')), '1x1x1x1' => array(array('grid_1', 'inner'), array('grid_1', 'inner'), array('grid_1', 'inner'), array('grid_1', 'inner')) );
Ein klassisches 12-Spalten Grid würde natürlich viel zu viel Kombinationen beinhalten als das man sie bequem zusammen schreiben könnte. Deshalb gibt es von Tristan Lins einen Generator, mit dem es möglich ist die Spaltendefinitionen für eine beliebige Anzahl Spalten zu generieren.
Template anpassen
Das klassische 960.gs verwendet eine Containerklasse, typischerweise container_12. Leider lässt sich die CSS Klasse subcolumns nicht per Konfiguration ersetzen, deshalb muss hier Hand angelegt werden und die ce_colsetStart.tpl und ce_colsetEnd.tpl modifiziert werden:
ce_colsetStart.tpl
<!-- Spaltenset Start //--> <div class="<?php echo $this->class; ?> container_12 clearfix"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>> <!-- first Column //--> <div class="<?php echo $this->column; ?>"> <div class="<?php echo $this->inside; ?>"<?php if($this->gap['right']): ?> style="padding-right:<?php echo $this->gap['right']; ?>;"<?php endif; ?>>
In dem ersten DIV wird einfach die Ausgabe von $this->scclass durch container_12 clearfix ersetzt.
 |
Hinweis: Anstatt in die ce_colsetEnd.tpl ein clear-DIV einzufügen, ist es besser zu der Containerklasse zusätzlich die CSS Klasse clearfix hinzuzufügen. |
Subcolumns CSS Dateien löschen
Um das Ganze abzurunden, löscht man die CSS Dateien aus dem Layout; dies geht nur über den generatePage Hook sicher.
config.php
$GLOBALS['TL_HOOKS']['generatePage'][] = array('MyClass', 'hookGeneratePage');
MyClass.php
class MyClass { function hookGeneratePage($objPage) { unset ($GLOBALS['TL_CSS']['subcolumns']); unset ($GLOBALS['TL_HEAD']['subcolumns']); } }
