--- title: "Site set \"Fluid Styled Content\"" manual: "Fluid Styled Content" version: "14.3" permalink: "https://docs.typo3.org/permalink/typo3/cms-fluid-styled-content:site-set-fluid-styled-content@14.3" source: "Configuration/Sets/FluidStyledContent.rst" rendered: "2026-10-09T09:21:05+00:00" --- # Site set "Fluid Styled Content" {#site-set-fluid-styled-content} Site sets have been added to the extension typo3/cms-fluid-styled-content. See Include one of the available site sets on how to use them. The site set "Fluid Styled Content" includes all TypoScript required to display the [content elements](https://docs.typo3.org/permalink/typo3/cms-fluid-styled-content:content-elements@14.3) provided by [`typo3/cms-fluid-styled-content`](https://packagist.org/packages/typo3/cms-fluid-styled-content). Some settings in these content elements like image positions or space settings require certain CSS styles. If you want to use the default CSS styles provided by TYPO3, include [Site set "Fluid Styled Content CSS"](https://docs.typo3.org/permalink/typo3/cms-fluid-styled-content:site-set-fluid-styled-content-css@14.3) in addition to this site set. If you depend on this site set directly instead of [Site set "Fluid Styled Content CSS"](https://docs.typo3.org/permalink/typo3/cms-fluid-styled-content:site-set-fluid-styled-content-css@14.3) you should provide the missing CSS yourself or disable all `tt_content` fields via page TSconfig that lose their function due to missing CSS. ## Settings provided by site set "Fluid Styled Content" {#site-set-fluid-styled-content-settings} These settings can be adjusted in the [Settings editor](https://docs.typo3.org/permalink/typo3/cms-fluid-styled-content:settings-editor@14.3). - **fsc** - *Label:* Fluid Styled Content - **fsc.templates** - *Label:* Templates - **styles.templates.templateRootPath** - *Type:* `string` - *Label:* Path of Fluid Templates for all defined content elements - *Category:* Fluid Styled Content > Templates - **styles.templates.partialRootPath** - *Type:* `string` - *Label:* Path of Fluid Partials for all defined content elements - *Category:* Fluid Styled Content > Templates - **styles.templates.layoutRootPath** - *Type:* `string` - *Label:* Path of Fluid Layouts for all defined content elements - *Category:* Fluid Styled Content > Templates - **fsc.content** - *Label:* Content Elements - **styles.content.defaultHeaderType** - *Type:* `int` - *Default:* `2` - *Label:* Default Header type - *Category:* Fluid Styled Content > Content Elements Enter the number of the header layout to be used by default - **styles.content.shortcut.tables** - *Type:* `string` - *Default:* `"tt_content"` - *Label:* List of accepted tables - *Category:* Fluid Styled Content > Content Elements - **styles.content.image.lazyLoading** - *Type:* `string` - *Default:* `"lazy"` - *Label:* Default settings for browser-native image lazy loading - *Enum:* \[ "lazy", "eager", "auto" \] - *Category:* Fluid Styled Content > Content Elements Can be \`lazy\` (browsers could choose to load images later), \`eager\` (load images right away) or \`auto\` (browser will determine whether the image should be lazy loaded or not) - **styles.content.image.imageDecoding** - *Type:* `string` - *Label:* Default settings for an image decoding hint to the browser - *Enum:* \[ "sync", "async", "auto" \] - *Category:* Fluid Styled Content > Content Elements Can be \`sync\` (synchronously for atomic presentation with other content), \`async\` (asynchronously to avoid delaying presentation of other content), \`auto\` (no preference in decoding mode) or an empty value to omit the usage of the decoding attribute (same as \`auto\`) - **styles.content.textmedia.maxW** - *Type:* `int` - *Default:* `600` - *Label:* Max Image/Media Width - *Category:* Fluid Styled Content > Content Elements This indicates that maximum number of pixels (width) a block of media elements inserted as content is allowed to consume - **styles.content.textmedia.maxWInText** - *Type:* `int` - *Default:* `300` - *Label:* Max Image/Media Width (Text) - *Category:* Fluid Styled Content > Content Elements Same as above, but this is the maximum width when text is wrapped around an block of media elements. Default is 50% of the normal Max Media Item Width - **styles.content.textmedia.columnSpacing** - *Type:* `int` - *Default:* `10` - *Label:* Advanced, Column space - *Category:* Fluid Styled Content > Content Elements Horizontal distance between media elements in a block in content elements of type "Media & Images". If you change this manually in your CSS, you need to adjust this setting accordingly - **styles.content.textmedia.rowSpacing** - *Type:* `int` - *Default:* `10` - *Label:* Advanced, Row space - *Category:* Fluid Styled Content > Content Elements Vertical distance after each media elements row in content elements of type "Text & Media". If you change this manually in your CSS, you need to adjust this setting accordingly - **styles.content.textmedia.textMargin** - *Type:* `int` - *Default:* `10` - *Label:* Advanced, Margin to text - *Category:* Fluid Styled Content > Content Elements Horizontal distance between an imageblock and text in content elements of type "Text & Images" - **styles.content.textmedia.borderColor** - *Type:* `color` - *Default:* `"#000000"` - *Label:* Media element border, color - *Category:* Fluid Styled Content > Content Elements Bordercolor of media elements in content elements when "Border"-option for an element is set - **styles.content.textmedia.borderWidth** - *Type:* `int` - *Default:* `2` - *Label:* Media element border, thickness - *Category:* Fluid Styled Content > Content Elements Thickness of border around media elements in content elements when "Border"-option for element is set - **styles.content.textmedia.borderPadding** - *Type:* `int` - *Default:* `0` - *Label:* Media element border, padding - *Category:* Fluid Styled Content > Content Elements Padding left and right to the media element, around the border - **styles.content.textmedia.linkWrap.width** - *Type:* `string` - *Default:* `"800m"` - *Label:* Click-enlarge Media Width - *Category:* Fluid Styled Content > Content Elements This specifies the width of the enlarged media element when click-enlarge is enabled - **styles.content.textmedia.linkWrap.height** - *Type:* `string` - *Default:* `"600m"` - *Label:* Click-enlarge Media Height - *Category:* Fluid Styled Content > Content Elements This specifies the height of the enlarged media element when click-enlarge is enabled - **styles.content.textmedia.linkWrap.newWindow** - *Type:* `bool` - *Default:* `false` - *Label:* Advanced, New window - *Category:* Fluid Styled Content > Content Elements If set, every click-enlarged media element will open in it's own popup window and not the current popup window (which may have a wrong size for the media element to fit in) - **styles.content.textmedia.linkWrap.lightboxEnabled** - *Type:* `bool` - *Default:* `false` - *Label:* Lightbox click-enlarge rendering - *Category:* Fluid Styled Content > Content Elements Whether media elements with click-enlarge checked should be rendered lightbox-compliant - **styles.content.textmedia.linkWrap.lightboxCssClass** - *Type:* `string` - *Default:* `"lightbox"` - *Label:* Lightbox CSS class - *Category:* Fluid Styled Content > Content Elements Which CSS class to use for lightbox links (only applicable if lightbox rendering is enabled) - **styles.content.textmedia.linkWrap.lightboxRelAttribute** - *Type:* `string` - *Default:* `"lightbox[{field:uid}]"` - *Label:* Lightbox rel="" attribute - *Category:* Fluid Styled Content > Content Elements Which \`rel=""\` attribute to use for lightbox links (only applicable if lightbox rendering is enabled)