Feature: #79622 - Header Position support for Fluid Styled Content

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.