Feature: #79622 - Header Position support for Fluid Styled Content¶
See forge#79622
Description¶
Header position as known from CSS Styled Content is now also supported by Fluid Styled Content. This will allow the editor to have more control about the alignment of the header in the frontend.
By default all CSS classes for header alignment are prefixed with
ce-headline-
to make the css class unique and to allow even more adjustments
without breaking your styling somewhere else.
Predefined values for header alignment and resulting CSS classes¶
Name |
Value |
CSS Class |
---|---|---|
Default |
(empty) |
(No CSS Class added) |
Center |
center |
ce-headline-center |
Right |
right |
ce-headline-right |
Left |
left |
ce-headline-left |
Implementation Example¶
The following examples are taken from the partials of fluid_styled_content that
can be found here EXT:fluid_styled_content/Resources/Private/Partials/Header/All.html
and here EXT:fluid_styled_content/Resources/Private/Partials/Header/Header.html
.
<f:render partial="Header/Header" arguments="{
header: data.header,
layout: data.header_layout,
positionClass: '{f:if(condition: data.header_position, then: \'ce-headline-{data.header_position}\')}',
link: data.header_link,
default: settings.defaultHeaderType}" />
<h1 class="{positionClass}">
<f:link.typolink parameter="{link}">{header}</f:link.typolink>
</h1>
Edit Predefined Options¶
TCEFORM.tt_content.header_position {
removeItems = center,left,right
addItems {
fancyheader = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:fancyHeader
}
}
$GLOBALS['TCA']['tt_content']['columns']['header_position']['config']['items'][] = [
0 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:fancyHeader
1 = fancyheader
];
Impact¶
Header positions are now available to all editors by default.