Feature: #79622 - Introducing Frame Class for Fluid Styled Content

See forge#79622

Description

In CSS Styled Content it is possible to provide additional CSS classes for the wrapping container element. This feature is now available for Fluid Styled Content, too.

The default layout of Fluid Styled Content is now passing the value of Frame Class directly to the template and prefixes the value by default with frame-<key>.

Implementation in Fluid Styled Content

<div id="c{data.uid}" class="frame frame-{data.frame_class} ...">
   ...
</div>

Explanation of Keys and Effects of Frame Classes

Name

Key

CSS Class

Additional Effects

Default

default

frame-default

Ruler Before

ruler-before

frame-ruler-before

A ruler is added after the output.

Ruler After

ruler-after

frame-ruler-after

A ruler is added after the output.

Indent

indent

frame-indent

Margin of 15% is added to the left and right side.

Indent, 33/66%

intent-left

frame-indent-left

Margin of 33% is added to the left side.

Indent, 66/33%

indent-right

frame-indent-right

Margin of 33% is added to the right side.

No Frame

none

(none)

No Frame is rendered.

Please note that you need to include the optional static template "Fluid Styled Content Styling" to have a visual effect on the new added CSS classes.

Edit Predefined Options

TCEFORM.tt_content.frame_class {
   removeItems = default,ruler-before,ruler-after,indent,indent-left,indent-right,none
   addItems {
      superframe = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:superframe
   }
}
$GLOBALS['TCA']['tt_content']['columns']['frame_class']['config']['items'][] = [
   0 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:superframe
   1 = superframe
];

Impact

Frame Class is now available to all Fluid Styled Content elements.