Spaltenset Grid - Versionsgeschichte

Tril: /* Template anpassen */

2011-08-04T12:16:14Z

‎Template anpassen

Tril: /* Template anpassen */

2011-07-22T19:23:23Z

‎Template anpassen

Manitougs: div. Änderungen

2011-07-18T22:14:40Z

div. Änderungen

Tril: 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…“

2011-07-18T16:17:22Z

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…“

Neue Seite

=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 beschreiben möchte.

==Spalten neu definieren==

Die Spalten und die dazugehörigen Klassen werden durch die globale Konfigurationsdatei <code>$GLOBALS['TL_SUBCL']</code> definiert. Hier definieren wir erst einmal die Spalten auf Grids um.
Am besten lässt sich das an einem Beispiel, hier für 4 Spalten zeigen:

<source lang="php">
$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'))
);
</source>

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 [http://www.infinitysoft.de Tristan Lins] einen [http://www.infinitysoft.de/tl_files/Sonstiges/SubcolumsGridGenerator/ Generator], mit dem es möglich ist die Spaltendefinitionen für eine beliebige Anzahl Spalten zu generieren.

==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:

<source lang="php">


<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->column; ?>">
<div class="<?php echo $this->inside; ?>"<?php if($this->gap['right']): ?> style="padding-right:<?php echo $this->gap['right']; ?>;"<?php endif; ?>>

</source>

In dem ersten DIV wird einfach die Ausgabe von <code>$this->scclass</code> durch <code>container_12</code> ersetzt.

==Subcolumns CSS Dateien löschen==

Um das ganze abzurunden, löschen wir die CSS Dateien aus dem Layout, dies geht nur über den generatePage Hook sicher.

===config.php===
<source lang="php">
$GLOBALS['TL_HOOKS']['generatePage'][] = array('MyClass', 'hookGeneratePage');
</source>

===MyClass.php===
<source lang="php">

class MyClass
{
function hookGeneratePage($objPage)
{
unset ($GLOBALS['TL_CSS']['subcolumns']);
unset ($GLOBALS['TL_HEAD']['subcolumns']);
}
}
</source>

@@ Zeile 32: / Zeile 32: @@
 <!-- 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 //-->
 	<div class="<?php echo $this->column; ?>">
@@ Zeile 39: / Zeile 39: @@
 </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.}}
 '''ce_colsetEnd.tpl'''
-<source lang="php">
-−
-−
-		</div>
-	</div>
-	<div class="clear"></div>
-</div>
-<!-- Spaltenset End //-->
-−
-−
-</source>
-−
-Hier wird das <code><div class="clear"></div></code> hinzugefügt.
 ==Subcolumns CSS Dateien löschen==

@@ Zeile 26: / Zeile 26: @@
 ==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:
 <source lang="php">
@@ Zeile 39: / Zeile 40: @@
 In dem ersten DIV wird einfach die Ausgabe von <code>$this->scclass</code> durch <code>container_12</code> ersetzt.
 ==Subcolumns CSS Dateien löschen==

@@ Zeile 1: / Zeile 1: @@
 =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 beschreiben möchte.
+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 <code>$GLOBALS['TL_SUBCL']</code> definiert. Hier definieren wir erst einmal die Spalten auf Grids um.
+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:
@@ Zeile 41: / Zeile 42: @@
 ==Subcolumns CSS Dateien löschen==
-Um das ganze abzurunden, löschen wir die CSS Dateien aus dem Layout, dies geht nur über den generatePage Hook sicher.
+Um das Ganze abzurunden, löscht man die CSS Dateien aus dem Layout; dies geht nur über den generatePage Hook sicher.
 ===config.php===