[TASK] Documentation for FluidStyledContent and CSSStyledContent changes
[Packages/TYPO3.CMS.git] / typo3 / sysext / core / Documentation / Changelog / 8.6 / Feature-79622-IntroducingFrameClassForFluidStyledContent.rst
1 .. include:: ../../Includes.txt
2
3 ==================================================================
4 Feature: #79622 - Introducing Frame Class for Fluid Styled Content
5 ==================================================================
6
7 See :issue:`79622`
8
9 Description
10 ===========
11
12 In CSS Styled Content it is possible to provide additional CSS classes
13 for the wrapping container element. This feature is now available
14 for Fluid Styled Content, too.
15
16 The default layout of Fluid Styled Content is now passing the value of
17 `Frame Class` directly to the template and prefixes the value by default
18 with `frame-<key>`.
19
20
21 Implementation in Fluid Styled Content
22 --------------------------------------
23
24 .. code-block:: html
25
26 <div id="c{data.uid}" class="frame frame-{data.frame_class} ...">
27 ...
28 </div>
29
30
31 Explaination of Keys and Effects of Frame Classes
32 -------------------------------------------------
33
34 =============== =============== ===================== ==================================================
35 Name Key CSS Class Additional Effects
36 =============== =============== ===================== ==================================================
37 Default default frame-default -
38 Ruler Before ruler-before frame-ruler-before A ruler is added after the output.
39 Ruler After ruler-after frame-ruler-after A ruler is added after the output.
40 Indent indent frame-indent Margin of 15% is added to the left and right side.
41 Indent, 33/66% intent-left frame-indent-left Margin of 33% is added to the left side.
42 Indent, 66/33% indent-right frame-indent-right Margin of 33% is added to the right side.
43 No Frame none (none) No Frame is rendered.
44 =============== =============== ===================== ==================================================
45
46 Please note that you need to include the optional static template "Fluid Styled
47 Content Styling" to have a visual effect on the new added CSS classes.
48
49
50 Edit Predefined Options
51 -----------------------
52
53 .. code-block:: typoscript
54
55 TCEFORM.tt_content.frame_class {
56 removeItems = default,ruler-before,ruler-after,indent,indent-left,indent-right,none
57 addItems {
58 superframe = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:superframe
59 }
60 }
61
62 .. code-block:: php
63
64 $GLOBALS['TCA']['tt_content']['columns']['frame_class']['config']['items'][] = [
65 0 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:superframe
66 1 = superframe
67 ];
68
69
70 Impact
71 ======
72
73 `Frame Class` is now available to all Fluid Styled Content elements.
74
75
76 .. index:: Fluid, Frontend