Flexible mehrspaltige Inhalte mit Rahmen erstellen

Wenn man bei in einem einspaltigen Layout zwischendrin mal einen mehrspaltigen Inhalt benötigt, muss man nicht gleich zu TemplaVoila greifen oder die 2-col/3-col Extensions laden, die in ihrer Funktionalität eingeschränkt sind. 
Eine einfache Möglichkeit mehrspaltige Layouts zu erstellen bieten die Rahmen. In diese Rahmen können beliebige Inhaltslemente eingefügt werden.

Generell wird jetzt jedes Inhaltselement von einem Div Element umschlossen. Standardmäßig haben diese Divs die Klasse csc-default. Wird ein Rahmen gewählt, wird diese Klasse durch eine andere ersetzt. diese kann man anpassen und erweitern.
Und hier das Beispiel für 2-spaltige Inhaltselemente innerhalb einspaltigem Inhalt. Gezeigt wird der Ausschnitt, der von css-styled-content definiert wird und wo man Ergänzungen machen kann.

tt_content.stdWrap {
    ...
    innerWrap.cObject = CASE
    innerWrap.cObject {
        key.field = section_frame
        ...
        ##linker Bereich, muss nicht angepasst werden
        20 =< tt_content.stdWrap.innerWrap.cObject.default
                ##CSS Klasse für Rahmen 1
        20.15.value = csc-frame csc-frame-frame1

        ##rechter Bereich, mit Anpassung
        21 =< tt_content.stdWrap.innerWrap.cObject.default
                ##CSS Klasse für Rahmen 1
        21.15.value = csc-frame csc-frame-frame2
        ## rechter Bereich mit abschliessendem clearer
        21.30.value = >|</div><div class="clearer"> </div>

        ##optional, neue Rahmendefinition
        30 =< tt_content.stdWrap.innerWrap.cObject.default
        30.15.value = meinecssKlasse
       }
...
}


CSS Definition dazu:

##Abstand zwischen den zwei Elementen
div.csc-frame-frame2 {  
margin-left: 30px;
}
div.csc-frame-frame1, div.csc-frame-frame2 {  
margin-bottom: 20px;
width: 210px;
float: left;
}
.clearer {
clear: both;
display: block;
height: 1px;
margin-bottom: -1px;
font-size: 1px;
line-height: 1px;
}


Damit der Redakteur weiß was er anwählen soll, kann man im PageTSconfig die Rahmen umbenennen und nicht benötigte Rahmen entfernen:

TCEFORM.tt_content.section_frame { 
    altLabels {
    21 = Rechte Box
    20 = Linke Box
    }
    addItems.30 = zusaetzliche Box
    removeItems=1,10,11,12
}
 

Sie sind hier: TYPO3 » Tipps & Tricks » TypoScript » Flexible mehrspaltige Inhalte mit Rahmen erstellen

Servicetelefon 0800 - 8976326 (kostenloser Anruf)