[!!!][FEATURE] Streamline Fluid Styled Content and CSS Styled Content
[Packages/TYPO3.CMS.git] / typo3 / sysext / core / Documentation / Changelog / master / Feature-79622-HeaderPositionSupportForFluidStyledContent.rst
1 .. include:: ../../Includes.txt
2
3 ==================================================================
4 Feature: #79622 - Header Position support for Fluid Styled Content
5 ==================================================================
6
7 See :issue:`79622`
8
9 Description
10 ===========
11
12 Header position as known from CSS Styled Content is now also supported by
13 Fluid Styled Content. This will allow the editor to have more control about
14 the alignment of the header in the frontend.
15
16 By default all CSS classes for header alignment are prefixed with
17 `ce-headline-` to make the css class unique to allow even more adjustments
18 without breaking your styling somwhere else.
19
20
21 Predefined values for header alignment and resulting CSS classes
22 ----------------------------------------------------------------
23
24 ==========   ==========   ====================
25 Name         Value        CSS Class
26 ==========   ==========   ====================
27 Default      (empty)      (No CSS Class added)
28 Center       center       ce-headline-center
29 Right        right        ce-headline-right
30 Left         left         ce-headline-left
31
32
33 Implementation Example
34 ----------------------
35
36 The following examples are taken from the partials of fluid_styled_content that
37 can be found here `EXT:fluid_styled_content/Resources/Private/Partials/Header/All.html`
38 and here `EXT:fluid_styled_content/Resources/Private/Partials/Header/Header.html`.
39
40 .. code-block:: html
41
42    <f:render partial="Header/Header" arguments="{
43       header: data.header,
44       layout: data.header_layout,
45       positionClass: '{f:if(condition: data.header_position, then: \'ce-headline-{data.header_position}\')}',
46       link: data.header_link,
47       default: settings.defaultHeaderType}" />
48
49 .. code-block:: html
50
51    <h1 class="{positionClass}">
52      <f:link.typolink parameter="{link}">{header}</f:link.typolink>
53    </h1>
54
55
56 Edit Predefined Options
57 -----------------------
58
59 .. code-block:: typoscript
60
61    TCEFORM.tt_content.header_position {
62       removeItems = center,left,right
63       addItems {
64          fancyheader = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:fancyHeader
65       }
66    }
67
68 .. code-block:: php
69
70    $GLOBALS['TCA']['tt_content']['columns']['header_position']['config']['items'][] = [
71       0 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:fancyHeader
72       1 = fancyheader
73    ];
74
75
76 Impact
77 ======
78
79 Header positions are now available to all editors by default.
80
81
82 .. index:: Fluid, Frontend