Flexible mehrspaltige Inhalte mit Rahmen erstellen

Eine einfache Möglichkeit mehrspaltige Layouts mit "css_styled_content" zu erstellen bieten die Rahmen. In diese Rahmen können beliebige Inhaltslemente eingefügt werden.

Generell wird 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.

Hier ein Beispiel für 2-spaltige Inhaltselemente innerhalb einspaltigem Inhalt. Gezeigt wird der Ausschnitt, der von css-styled-content definiert wird und in dem 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
}