---
title: "Fluid Styled Content Layouts"
manual: "Content Blocks"
version: "2.4"
permalink: "https://docs.typo3.org/permalink/friendsoftypo3/content-blocks:fsc-guide@2.4"
source: "Guides/FluidStyledContent/Index.rst"
rendered: "2026-09-22T14:38:30+00:00"
---

# Fluid Styled Content Layouts {#fsc-guide}

This guide describes how you can extend your Content Block templates with the
layout from the **fluid_styled_content** system extension.

You probably know, that fluid styled content (from now on abbreviated FSC) adds
special wrappers for its content elements like this:

```html
<div id="c32" class="frame frame-default frame-type-textpic frame-layout-0">
```

These are very helpful, because you can use the anchor id and spacing classes of
FSC. In order to wrap all your templates with such a layout you have to provide
the FSC layout paths for `lib.contentBlock`.

Let's have a look at the contents of this TypoScript object:

![lib.contentBlock](./ContentBlockTypoScript.png)

As you can see `lib.contentBlock` is a `FLUIDTEMPLATE`
TypoScript content object. This means you can [override](https://docs.typo3.org/permalink/friendsoftypo3/content-blocks:cb-extendtyposcript@2.4) it with your own
layout and partial root paths.

```typoscript
lib.contentBlock {
    partialRootPaths.0 < lib.contentElement.partialRootPaths.0
    layoutRootPaths.0 < lib.contentElement.layoutRootPaths.0

    settings < lib.contentElement.settings
    dataProcessing.5 = record-transformation
}
```

By adding the FSC settings, these will also be available in your Content Block
templates.

> [!IMPORTANT]
> We use the key "0" here, so FSC will never override your own layouts and
> partials.

> [!TIP]
> **Hint**
>
> Since TYPO3 14.2 FSC uses the variable `record` in its layouts. As Content
> Blocks only provides the `data` variable, we have to add another data
> processor `record-transformation`. It's important that the key is less than
> `10`, otherwise Content Blocks will override it with it's own object type.

In order to use the standard FSC fields, you should include them as Basics in
your config.yaml file. These are already shipped by Content Blocks.

**EXT:your_extension/ContentBlocks/ContentElements/fsc-test/config.yaml**

```yaml
name: vendor/fsc-test
title: FSC Element
basics:
  - TYPO3/Appearance
fields:
  - identifier: TYPO3/Header
    type: Basic
```

Now the setup is complete and all what's left to do is to use the newly
available layout in your frontend.fluid.html templates.

**EXT:your_extension/ContentBlocks/ContentElements/fsc-test/templates/frontend.fluid.html**

```html
<f:layout/>

<!-- This removes the <header> partial of FSC -->
<f:section name="Header"/>

<f:section name="Main">
    <!-- Your content -->
</f:section>
```

This is of course completely optional and you can just remove this per element
if you need to. The additional empty `<f:section name="Header"/>` is
important: This removes the `<header>` partial which FSC would add to your
template. If you need this anyway, you can just remove it.

> [!IMPORTANT]
> `<f:layout/>` is the same as `<f:layout name="Default"/>`. If you
> also have a Layout with the name `Default.html` defined in **Layouts**, this
> will override the FSC Layout.