Einstieg in TYPO3 [Tag 18]: Customizing eines Backend-Layouts

Zur Erweiterung des Backendlayouts (BE-Layouts) in unserer TYPO3-Umgebung ist heute in erster Linie das Customizing gefragt.

Die Redakteure wünschen ein neues BE-Layout, um einzelne Seiten anders darstellen zu können als in dem Standard-BE-Layout, das zur Zeit verwendet wird. Das Standard-Layout ist der Designvorlage entnommen und setzt sich zusammen aus 2/3 Content und 1/3 Sidebar.





Aufgabe: Erstellen eines neuen BE-Layouts, welches vom Redaktuer für bestimmte Seiten ausgewählt werden kann.

Layout soll folgenden Content beinhalten:
1. Zeile: 2/3 Content - 1/3 Sidebar
2. Zeile: 4 Spalten Content

Rahmenbedingungen:
Grundlage: Layout vom Designer (fileadmin/templates/element.html)

IST-Zustand: Contentbereich und Sidebar (Im Content abgebildet)

Tipp: Firebug hilft, im Design die gewünschten Spalten des Content in HTML zu finden



Los geht's


1.) Erstellen eines neuen BE-Layouts

• Liste/BE-Layout»: Neues BE-Layout erstellen und sinnvoll betiteln (hier: alternativ)
• Über den Assistenten ein 'Wizard' erstellen (Spalten und Zeilen erstellen)
• Lt. Aufgabe: 2 Zeilen erstellen.
• Lt. Augfgabe: Spalten erstellen -> Anzahl über den kleinsten gemeinsamen Nenner (12)
• in der ersten Zeile 8 Spalten zu einer zusammenfügen - 4 Spalten zur Sidebar zusammenstellen (entspricht 2/3 zu 1/3; s. Aufgabenstellung)
• in der zweiten Zeile werden jeweils 3 Elemente zusammengefügt (enstpricht dann 4 Spalten)
• Namen und Spaltennummer vergeben! Bisher vergeben: Content = 0 // Sidebar = 1
• Tipp: Mit sinnvollen Kennzahlen bei der Spaltennummerierung arbeiten!
• Bsp:  col41 => bedeutet: Feld 1 in der Zeile mit 4 Spalten
• col42 => beduetet: Feld 2 in der Zeile mit 4 Spalten
• etc.
• Tipp: Zahlen zu den einzelnen Feldern merken!
• speichern und schließen zurück ins BE-Layout
• zurück im BE-Layout - auch hier speichern und schließen

2.) Redakteur kann nun das neu erstellte BE-Layout "alternativ" für eine Unterseite wählen
(s. Bearbeitungsmodus der ausgewählten Seite/Erscheinungsbild)
Hier: Unterseite "burkard1-1-1 und burkard1_2" 

ABER: Das BE-Layout bestimmt lediglich, welche Inhalte wo platziert werden! Noch sind die Contents nicht im FE zu erkennen, daher müssen Templates angepasst und neu geschrieben werden!

3.) Template/TS/Template-Werkzeuge: Neues Template erstellen +ext

Blick in die Element.html:

• <div id="content"> </div>
  umfasst den Bereich, den wir mit unserem BE-Layout ansprechen
•   <!-- begin of 4 columns -->
  Da wir 4 Spalten haben wollen: Alles, was hierunter eingefügt ist, ist für uns relevant und sollte auf jeden Fall in die Element.html (oder index.html) zu unserem T3-Projekt beibehalten werden! (Bei 3 Spalten <!-- begin of 3 columns --> etc.)

Tipp: Firebug über die Designvorlage schicken, um die genaue Positioniereng des Content zuordnen zu können.

4.) Die relevanten div-Container werden in TypoScript umgesetzt bzw. nachgebaut:

• Template/TS/neues Erweiterungs-Template erstellen
• betiteln als "standard" (weil es das Standard-BE-Layout betrifft)
• Setup bearbeiten (analog zur Element.html -> siehe <div id="content"></div>)
• Anfangen mit einem lib.

lib.content = COA
lib.content {
 10 = COA
 10.wrap =  <div id="content"> | </div>
 
  10.10 = COA
  10.10.wrap = <div class="col-584"> | </div>
  ###ROOTLINE### einbinden  10.10.10 < lib.rootline
 
  ###CONTENT### einbinden
  10.10.20 < styles.content.get
  10.10.20.select.where = colPos=0

  10.20 = COA
  10.20.wrap = <div class="col-276-last"> | </div>
  10.20.10 = COA
  10.20.10.wrap = <div id="sidebar"> | </div>
  10.20.10.10 = COA
  10.20.10.10.wrap = <ul> | </ul>
  10.20.10.10.10 < lib.sprache
  10.20.10.10.20 < lib.login
  10.20.10.10.30 < lib.suchen
  10.20.10.10.40 < lib.sidemenu
  10.20.10.10.50 < styles.content.get
  10.20.10.10.50.select.where = colPos=1  
   }

          Alles, was wir selbst schreiben, beginnt mit lib.

Die COA ist wichtig, weil ich alles, was folgt, zusammenschließen möchte!
Erinnerung: COA=Verschachtelungsprinzip!
Bei der Verschachtelung geht man immer von außen nach innen!

5.) Script in Template/HOME-Setup einbinden (unterhalb des lib.menu): 
     
     ► page.10.marks.CONTENT < lib.content 

So sieht das Script dann aus: 

                    config.admPanel = 1
                    page.config.index_enable = 1
                    page = PAGE
                    page.stylesheet = fileadmin/templates/css/style.css

                    page.10 = TEMPLATE
                    page.10.template = FILE
                    page.10.template.file = fileadmin/templates/element.html
                    page.10.workOnSubpart = DOCUMENT
                    page.10.marks.MENU < lib.menu

                   /*
                   Das hier folgende Script wurde zuerst eingefügt, ist aber duch den Befehl 

•          page.10.marks.CONTENT < lib.content  ersetzt worden:
  

  page.10.marks.ROOTLINE < lib.rootline
  page.10.marks.SIDEMENU < lib.sidemenu
  page.10.marks.SEARCH < lib.suchen
  page.10.marks.LOGIN < tt_content.login.20
  page.10.marks.SPRACHE < lib.sprache
  
  page.10.marks.CONTENT < styles.content.get
  page.10.marks.CONTENT.select.where = colPos=0
  
  page.10.marks.SIDEBAR < styles.content.get
  page.10.marks.SIDEBAR.select.where = colPos=1
  */
  
  page.10.marks.CONTENT < lib.content

6.) Marker ###CONTENT### setzen in der Element.html
an der Stelle, an der <div id="content"></div>) stand! Alles in diesem Container-Bereich kann nun gelöscht werden - es reicht, wenn ###CONTENT### steht!
(Löschen muss nicht sein - auskommentieren reicht auch!)

7.) Template «+ext 2spalten» schreiben:
Hier wird all das eingesetzt, was aus der +ext spalten auskommentiert wurde - beginnend mit «lib.2spalten»:

lib.2spalten = COA
lib.2spalten {
  
10 = COA
  10.wrap = <div class="col-584"> | </div>
  
  ###ROOTLINE###
  10.10 < lib.rootline
  
  ###CONTENT###
  10.20 < styles.content.get
  10.20.select.where = colPos=0
  
  20 = COA
  20.wrap = <div class="col-276-last"> | </div>
  
  20.10 = COA
  20.10.wrap = <div id="sidebar">  |  </div>
  20.10.10 = COA
  20.10.10.wrap = <ul> | </ul>

  
            ###SPRACHE###
  20.10.10.10 < lib.sprache
  
            ###LOGIN###
  20.10.10.20 < tt_content.login.20
  
            ###SEARCH###
  20.10.10.30 < lib.suchen
  
            ###SIDEMENU###
  20.10.10.40 < lib.sidemenu
  
            ###SIDEBAR###
  20.10.10.50 < styles.content.get
  20.10.10.50.select.where = colPos=1
}

• speichern und schließen

8.)  «+ext 2spalten» in HOME vollständigen DS einbinden
Wichtig!!! Dieses Template muss in der Reihenfolge VOR «+ext standard» stehen! Reihenfolge ist wichtig!

9.)  «+ext 2spalten» enthält also den Aufbaubefehl für 2 Spalten, 
den wir vorab in «+ext standard» definiert haben. Dieser Teil kann daher aus der +ext standard entfernt und durch das Einbinden von «+ext 2spalten» ersetzt werden::

lib.content = COA
lib.content {
 10 = COA
 10.wrap =  <div id="content"> | </div>

  10.10 < lib.2spalten
   }

10.) Weitere Zeilen einfügen - Template «+ext 4spalten» erstellen!
Zur Erinnerung: Der Content soll aufgeteilt werden in Conten mit 2 Spalten und Content mit 4 Spalten!
Da wir das Template selbst schreiben und nicht auf bestehende Scripte zurückgreifen, beginnt auch dieses Template mit lib.:

lib.4spalten = COA
lib.4spalten {
  
# definieren der ersten Spalte - analog zur Referenz-HTML der Designvorlage
  10 = COA
  10.wrap = <div class="col-200"> | </div>
  10.10 < styles.content.get
  10.10.select.where = colPos=41
  
# definieren der zweiten Spalte analog....
  20 = COA
  20.wrap = <div class="col-200"> | </div>
  20.10 < styles.content.get
  20.10.select.where = colPos=42
  
# definieren der dritten Spalte analog... 
  30 = COA
  30..wrap = <div class="col-200"> | </div>
  30.10 < styles.content.get
  30.10.select.where = colPos=43
  
# definieren der vierten Spalte analog.. 
  40 = COA
  40..wrap = <div class="col-200"> | </div>
  40.10 < styles.content.get
  40.10.select.where = colPos=44
}

Bei 3 Spalten oder mehreren Spalten wird entsprechend diesem Script - in Anlehnung an die Element HTML erzeugt!

In dem Fall natürlich auch ein entsprechendes BE-Layout erzeugen! :-)

11.) Das Template «+ext 4spalten» nun in den vollständigen Datensatz von Template/HOME einsetzen.
Reihenfolge beachten! Muss über «+ext 2spalten» stehen!

Nun sind alle Voraussetzungen für eine Darstellung des BE-Layout "alternativ" geschaffen!
Was jetzt noch fehlt, ist das Template für dieses BE-Layout schaffen.

12.)Template/TS «+ext standard» öffnen und Inhalt kopieren

13.) neues Template «+ext alternativ» erstellen und kopierten Inhalt aus +ext standard einfügen
Hierein nun die Bedingung «lib.4spalten» einbinden:

    lib.content = COA
    lib.content {
      10 = COA
      10.wrap =  <div id="content"> | </div>

      10.10 < lib.2spalten
      10.20 < lib.4spalten
       }

Da es sich aber um ein selbst erstelltes BE-Layout handelt, müssen in diesem Script noch die Zuordnung der Layout-ID eingegeben werden! (ID erkennt man unter Liste/BE-Layout/alternativ)

 [page|backend_layout = 3]
    lib.content >
    lib.content = COA
      lib.content {

      10 = COA
      10.wrap =  <div id="content"> | </div>

      10.10 < lib.2spalten
      10.20 < lib.4spalten
       }
[global]

14.) Template «+ext alternativ» in vollständigen DS von HOME einfügen
Reihenfolge: UNTER «+ext standard»!!!! Dadurch - und durch die Bedingung «lib.content > »- wird «+ext standard» überschrieben!

Und so sieht es dann im Frontend aus:

Erklärungen zum Screenshot:
1. = colPos=0  |  2. = colPos=1
3. = colPos=41  |  4. = colPos=42  |  5. = colPos=43  |  6. = colPos=44|