TYPO3 content elements yield a setting called “Indentation and Frames” (or simply ”Frame” in older TYPO3 versions) that is often ignored. It can be used to add custom CSS classes to content elements, or even wrap them in a nested custom tag structure. Here is how to use it…
The defaults
By default the “Frame” dropdown box of any standard CE is prepopulated with a number of choices. Each of these choices wraps the CE with a div tag, most of them using a certain CSS class and all of them with a tag id that contains the UID number of the CE:
- Default Frame:
<div id=”[CE_UID]“ class=”csc-default”>|</div> - Invisible:
<div id=”[CE_UID]” class=”csc-frame csc-frame-invisible”>|</div> - Ruler before:
<div id=”[CE_UID]” class=”csc-frame csc-frame-rulerBefore”>|</div> - Ruler after:
<div id=”[CE_UID]” class=”csc-frame csc-frame-rulerAfter”>|</div> - Indent:
<div id=”[CE_UID]” class=”csc-frame csc-frame-indent”>|</div> - Indent 33/66%:
<div id=”[CE_UID]” class=”csc-frame csc-frame-indent3366″>|</div> - Indent 66/33%:
<div id=”[CE_UID]” class=”csc-frame csc-frame-indent6633″>|</div> - Frame 1:
<div id=”[CE_UID]” class=”csc-frame csc-frame-frame1″>|</div> - Frame 2:
<div id=”[CE_UID]” class=”csc-frame csc-frame-frame2″>|</div> - No Frame:
<div id=”[CE_UID]“>|</div>
You can simply use these default classes by (re-)defining them in your own CSS definitions.
Removing dropdown choices
The 10 default choices may confuse your editors – especially when there are no CSS definitions for them, so they are actually useless. Remove all but the “Default Frame” item in TS-Config like this:
TCEFORM.tt_content.section_frame.removeItems = 1,5,6,10,11,12,20,21,66
Each of the numbers listed corresponds to the an entry in the list above. 1 = Invisible, 5 = Ruler before, 6 = Ruler after,… , 21 = Frame 2, 66 = No Frame
Adding dropdown choices
To add additional frame choices you have to add code to TS-Config, TS-Setup and CSS:
TS-Config:
TCEFORM.tt_content.section_frame { addItems.100 = Light background addItems.110 = Red outline }
TS-Setup:
tt_content.stdWrap.innerWrap.cObject { 100 < tt_content.stdWrap.innerWrap.cObject.default 100.15.value = light-bgrnd 110 < tt_content.stdWrap.innerWrap.cObject.default 110.15.value = red-outline }
CSS:
.light-bgrnd{ background: #ccc; } .red-outline{ border: 1px solid red; }
But you could also completely change the wrapping of the CE like this…
TS-Setup:
tt_content.stdWrap.innerWrap.cObject { 100 = TEXT 100.value = <div id="MyOwnDivID">|</div> }
But be aware that the latter TS will stopp other CE settings from working (like the Before and After distance entries). To really understand what you are doing, have a look into TS-Object-Browser to see how tt_content.stdWrap.innerWrap.cObject is structured and how you might modify it without losing features.
Hi Jörg,
in my case, your example did not work. I had to change the position of the value:
tt_content.stdWrap.innerWrap.cObject {
100 =< tt_content.stdWrap.innerWrap.cObject.default
100.15.value = light-bgrnd <<<<<<<<<< Does not work
110 =< tt_content.stdWrap.innerWrap.cObject.default
110.20.10.value = red-outline <<<<<<<<<< Works
}
Hi Seebold,
this is very much possible. This blog post is about 4 years old and refers to TYPO3 4.5.
I guess you are using TYPO CMS 6.2 where many properties in tt_content have shifted position.
Thanks for the update.