Contentbereich mit Spalten oder Boxen realisieren

25. März 2009 | Von stefan | Kategorie: Content individuell anpassen

Dieses Tutorial bietet eine Anleitung, wie sich der Inhaltsbereich (Content) für einzelne Seiten einer TYPO3-Webseite individuell anpassen lässt, ohne auf Template Voila zurückzugreifen.

Nehmen wir an, das Grundgerüst des Webauftritts sieht folgendermaßen aus:

TYPO3 Template mit einem zentralen Contentbereich

Angestrebt wird für eine oder mehrere Einzelseiten aber ein anderer, individueller Aufbau mit zwei Boxen:

Contentbereich mit mehreren Spalten und Boxen

Für die Umsetzung sind folgende Schritte erforderlich:

  1. Einrichtung zusätzlicher Spaltenelemente für das TYPO3-Backend
  2. Erstellung eines eigenen Templates mit den erforderlichen CSS-Stylesheets
  3. TypoScript für den Aufruf des Templates mit den beiden Boxen für ausgewählte Sites.

Zu 1: Einrichtung zusätzlicher Spaltenelemente für das TYPO3-Backend
Für die Einrichtung zusätzlicher Spaltenelemente steht ein eigenes Tutorial zur Verfügung.

Zu 2: Erstellung eines eigenen Templates mit den erforderlichen CSS-Stylesheets
Nehmen wir an, das Template mit dem normalen Content heißt “template.html”. Der Content wird in folgenden Marker eingefügt:

1
2
3
4
5
<div id="content">
  <!-- TYPO3SEARCH_begin -->
  ###CONTENT###
  <!-- TYPO3SEARCH_end -->
</div>

Für die Boxenversion wird voriges Template kopiert und bekommt den Namen template_boxen.html. Anschließend wird obiger Code durch nachfolgenden ersetzt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="content">
  <!-- TYPO3SEARCH_begin -->
  <div class="cols">
    <div class="leftcolumn">
      <div class="box">
        ###CONTENT_COL_LINKS###
      </div>
    </div>
    <div class="rightcolumn">
      <div class="box">
        ###CONTENT_COL_RECHTS###
      </div>
    </div>
  </div>
<!-- TYPO3SEARCH_end -->
</div>

Exemplarisch die dazugehörigen CSS-Stylsheets für die Realisation obiger Boxen, die nach individueller Erfordernis angepasst werden können:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#content .cols {
	margin:10px 0 0 0; padding:0;
	width:544px; line-height:1.8em;
	overflow:hidden;
}
 
#content .cols .leftcolumn {
	margin:0; padding:0;
	float:left;
	width:262px;
}
 
#content .cols .leftcolumn .box {
	margin:0 0 10px 0; padding:10px;
	float:left;
	width:262px;
	border:solid #D1D7DC 1px;
	border-top-width:15px;
	background:url(../images/0_site_hintergrund_box.jpg) top left repeat-x;
	background-color:#e8e8ec;
	height:205px;
}
 
#content .cols .rightcolumn {
	margin:0 0 0 275px; padding:0;
	width:262px;
}
 
#content .cols .rightcolumn .box {
	margin:0 0 10px 0; padding:10px;
	width:262px;
	border:solid #D1D7DC 1px;
	border-top-width:15px;
	background:url(../images/0_site_hintergrund_box.jpg) top left repeat-x;
	background-color:#e8e8ec;
	height:205px;
}

Zu 3: TypoScript für den Aufruf des Templates mit den beiden Boxen für ausgewählte Sites.

Im TypoScript (TS) ist template.html bereits als Template-Datei festgelegt:

1
  page.10.template.file = fileadmin/template.html

Soll die Seite mit der ID 18 auf templates_boxen.html zugreifen, so muss der Zugriff auf die Template-Datei überschrieben werden:

1
2
3
4
5
  #------Template für Content-Bereich mit Boxen überschreiben------
  [globalVar = TSFE:id=18]
    page.10.template.file = fileadmin/template_boxen.html
  [global]
  #------END Template für Content-Bereich mit Boxen überschreiben------

Seiten mit normalem Contentbereich werden wie bisher mit Inhalt gefüllt, indem die Inhalte in der Spalte NORMAL eingetragen werden.

Bei denjenigen Seiten, die im Contentbereich die Boxen enthalten sollen (in obigem Beispiel wäre nur die Site mit der ID 18 dafür gerüstet, weitere Sites lassen sich jedoch einfach durch: TSFE:id=18,TSFE:id=27,TSFE:id=31, etc. hinzugefügen), werden die Spalten CONTENTCOLLINKS und CONTENTCOLRECHTS mit Inhalten belegt. Für jede Box wird ein neuer Datensatz in der Spalte erzeugt und mit Inhalt gefüllt.

Diesen Artikel bookmarken/weiterempfehlen:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • MisterWong
  • Yigg
  • Technorati
  • LinkArena
  • YahooMyWeb
  • Webnews.de

8 Kommentare
Hinterlasse einen Kommentar »

  1. Tausend Dank für das Tutorial - das ist wirklich toll -
    Wohin darf ich die Blumen schicken….?

    Jetzt klappt es nur noch nicht, das meine für die eine Seite ausgewählte Designvorlage angesprochen wird.

  2. Tausend Dank für das Tutorial - das ist wirklich toll - Wohin darf ich die Blumen schicken….?

    Steht im Impressum ;-)

    Jetzt klappt es nur noch nicht, das meine für die eine Seite ausgewählte Designvorlage angesprochen wird.

    Zunächst muss das Template definiert werden, das für alle Seiten gelten soll. Anschließend wird das Template für die Seite(n) überschrieben, die ein anderes Layout haben sollen.
    Vom Aufbau her sieht das so aus:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    page {
      10 = TEMPLATE
      10.template = FILE
      10.workOnSubpart = DOKUMENT
    }
     
    #--------TEMPLATE FÜR ALLE SEITEN--------
      page.10.template.file = fileadmin/template.html 
    #--------END TEMPLATE FÜR ALLE SEITEN--------
     
     
    #--------Template für Content-Bereich mit Boxen überschreiben--------
      [globalVar = TSFE:id=18]
        page.10.template.file = fileadmin/template_boxen.html
      [global]
    #--------END Template für Content-Bereich mit Boxen überschreiben--------

    Ein gängiger Fehler ist, dass Bedingungen innerhalb von {…} stehen.
    Eventuell steht im TS etwas wie:

    1
    2
    3
    4
    5
    
    page.10 {
      [globalVar = TSFE:id=18]
        template.file = fileadmin/template_boxen.html
      [global]
    }

    so geht’s nicht.

  3. Hallo allerseits…

    Ich arbeite gerade an einer website und würde zur Vorstellung des Personals (Seite mit: Bild Text Bild Text) gerne solche 2 Spalten verwenden.

    Habe alles so gemacht wie beschrieben, funktioniert jedoch leider bei mir nicht!

    Bin noch ein Typo3-Anfänger ;-)

    Also es funktioniert soweit, dass auf den einzelnen Pages die 2 zusätzlichen Spalten (CONTENTCOLLINKS und CONTENTCOLRECHTS) angezeigt werden und ich Inhalte hinzufügen kann, wenn ich das jedoch mache, sieht man die Inhalte im frontend nicht.

    Kann mir jemand bei diesem Problem weiterhelfen?

    lg

  4. Hallo Judith,

    kann die Webseite einmal “live” betrachtet werden, damit man sich das besser vorstellen kann? Wenn Du die URL hier im Blog nicht nennen möchtest, kannst Du sie uns auch per Mail schicken. Entweder über das Formular (Bereich KONTAKT) oder per E-Mail (zu finden im Bereich IMPRESSUM).

    Was wird denn bei Dir angezeigt? Erscheinen die - ausgeschriebenen - Marker ###CONTENTCOLLINKS### und ###CONTENTCOLRECHTS### im Frontend? Dann werden sie nicht richtig durch TYPO3 angesprochen.

  5. Leider nein, die Website ist zurzeit nicht online…

    Im Frontend wird bei mir gar nichts angezeigt, weder der Inhalt noch die Marker…

    Ich bin gerade am überlegen, ob eine Extension die diesen Zweck erfüllt nicht einfacher wäre?!
    Leider bin ich sehr unerfahren auf dieser Ebene… :-(

  6. Kopf hoch, das wird schon!
    Allerdings ist TYPO3 ein relativ anspruchsvolles CMS… Es gibt einfachere CMS, z.B. Joomla. “Erkauft” wird das dann ggf. durch deutlich weniger Flexibilität bzgl. eines individuellen Layouts und anderen Beschränkungen.

    Prüf’ mal, ob die beiden Marker korrekt in das Template mit den zusätzlichen Spalten rein geschrieben wurden und ob das Template auch korrekt per TS (TypoScript) eingebunden wurde. Einiges spricht dagegen. Wenn Marker und Template korrekt gehandhabt werden, gibt es eigentlich nur zwei Möglichkeiten:

    1) Du sprichst in TS den Marker korrekt an, dann werden die im BE eingefügten Inhalte auch angezeigt oder
    2) die Marker werden nicht korrekt angesprochen, dann bekommst Du sie als Text im FE angezeigt. Also so: ###MARKER### bzw. für unser Beispiel: ###CONTENTCOLLINKS### und ###CONTENTCOLRECHTS###

    Vielleicht solltest Du Dir mal die Extension Template Voila anschauen? Hintergrundinfos sowie eine ausführliche Diskussion zu den Vor- und Nachteilen findest Du z.B. hier: http://www.typo3forum.net/forum/templavoila/16139-templavoila-genau-funktionierts-beispiel-allen-templates.html

  7. Okay danke vorerst…
    Ich werde mich jetzt wohl mal eine Weile damit beschäftigen und mal schaun, vl find ich ja selber den Fehler ;-)

  8. super Tutorial, vielen Dank :-)

Schreibe einen Kommentar