Spalten im Layout sinnvoll umsetzen

typo3.fruit-lab.de » TYPO3 Tutorials » Spalten im Layout aufteilen

Tutorial: Spalten sinnvoll aufteilen

Hallo,

in diesem Tutorial werde ich euch kurz näher bringen wie ich in vielen TYPO3 Installationen die Spalten sinnvoll aufgeteilt habe. Dazu sind einige Schritte notwendig das die Redakteuere Ihren Spaß beim einpflegen in das System haben.

Dann mal an die Arbeit...

Step 1: PHP Datei anlegen

Als erstes legen wir eine PHP Datei an. Diese Datei habe ich zum Beispiel  nach fileadmin/scripts/user_tools.php gelegt. In die Datei kommt diese Klasse, an der im Normal- Fall keine Änderungen mehr nötig sind, aber noch viele Features ergänzt werden können.

Uaser Klasse. fileadmin/scripte/user_tools.php
<?php
class user_tools {
   function user_getCssFile(){
      $return = '';
      $CONTENT['right'] = false;
      $CONTENT['left'] = false;
      $CONTENT['center'] = false;
 
      // rechts
      $res = $GLOBALS['TYPO3_DB']->exec_SELECTquery('uid','tt_content', '`hidden`=0 AND `deleted`=0 AND `colPos`=2 AND `pid`='.$GLOBALS['TSFE']->id.' LIMIT 1');
      $row = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res);
      if(isset($row['uid'])) $CONTENT['right'] = true;
 
      // Links
      $res = $GLOBALS['TYPO3_DB']->exec_SELECTquery('uid','tt_content', '`hidden`=0 AND `deleted`=0 AND `colPos`=1 AND `pid`='.$GLOBALS['TSFE']->id.' LIMIT 1');
      $row = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res);
      if(isset($row['uid'])) $CONTENT['left'] = true;
 
      // Center
      $res = $GLOBALS['TYPO3_DB']->exec_SELECTquery('uid','tt_content', '`hidden`=0 AND `deleted`=0 AND `colPos`=0 AND `pid`='.$GLOBALS['TSFE']->id.' LIMIT 1');
      $row = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res);
      if(isset($row['uid'])) $CONTENT['center'] = true;
      
      // Stylesheets
      if($CONTENT['center'] AND $CONTENT['left'] AND !$CONTENT['right'])
         $return .= "\n".'<link rel="stylesheet" type="text/css" href="fileadmin/template/30_70_layout.css" />';
      elseif($CONTENT['center'] AND !$CONTENT['left'] AND $CONTENT['right'])
         $return .= "\n".'<link rel="stylesheet" type="text/css" href="fileadmin/template/70_30_layout.css" />';
      elseif($CONTENT['center'] AND $CONTENT['left'] AND $CONTENT['right'])
         $return .= "\n".'<link rel="stylesheet" type="text/css" href="fileadmin/template/33_33_33_layout.css" />';
      elseif(!$CONTENT['center'] AND $CONTENT['left'] AND $CONTENT['right'])
         $return .= "\n".'<link rel="stylesheet" type="text/css" href="fileadmin/template/50_50_layout.css" />';
      else
         $return .= "\n".'<link rel="stylesheet" type="text/css" href="fileadmin/template/100_layout.css" />';
 
 
      return $return;
   } // function
} // class
?>

Step 2: Klasse in TypoScript laden

Mit diem Code Schnipsel könnt Ihr die oben erstellte Klasse in eure TYPO3 laden. mit dem headerData von dem Page Objekt ladet Ihr direkt den passenden String aus der Klasse als CSS Datei.

Achtung: Wenn euer Page Objekt anderes heißt, müßt ihr den Namen natürlich ändern.

Laden der passenden CSS Datei
includeLibs.tools = fileadmin/scripts/user_tools.php
#...
#..
page = PAGE # Beispiel
#..
#...
page.headerData.99 = USER
page.headerData.99.userFunc  = user_tools->user_getCssFile

Step 3: Template ergänzen

In diesem Step müßt Ihr noch euer Template ergänzen. In dieses werden ab sofort direkt alle Spalten geladen.

Tipp: Die Border nach oben packen macht Sinn. Ich habe z.B. Installationen wo die Border Spalte immer mit 100% über dem Content liegt wenn diese gefüllt ist!

Templateergänzung
<div id="ContentBorder"><!-- ###CONTENT_BORDER### begin -->&nbsp;<!-- ###CONTENT_BORDER### end --></div>
<div id="ContentLeft"><!-- ###CONTENT_LEFT### begin -->&nbsp;<!-- ###CONTENT_LEFT### end --></div>
<div id="ContentCenter"><!-- ###CONTENT_MAIN### begin -->&nbsp;<!-- ###CONTENT_MAIN### end --></div>
<div id="ContentRight"><!-- ###CONTENT_RIGHT### begin -->&nbsp;<!-- ###CONTENT_RIGHT### end --></div>

Step 4: CSS Dateien anlegen

Bei diesen muss man sehr stark aufpassen das man nicht durch einander kommt. In der PHP Klasse könnt Ihr sehen welche CSS Dateien Ihr so braucht, ich gebe euch hier nur ein Beispiel (fileadmin/template/30_70_layout.css)

Die andere CSS Dateien könnt Ihr nach diesem Shema anlegen.

CSS Beispiel... am 30 / 70 Layout
/* --- Falsche Spalten ausblenden --- */
div#ContentRight, div#ContentBorder {
 display: none;
}
 
/* andere Spalten positionnieren */
div#ContentLeft {
 width:30%;
 float:left;
}
div#ContentCenter {
 width:70%;
 float:left;
}
 
/*
 Hinweis:
 Wenn euer Layout nicht am boden anliegt, dann braucht ihr noch ein clear:both Element unter den div-Boxen
*/
Seite drucken |  | © Tim Lochmller 2006, Spalten im Layout sinnvoll umsetzen