README

A vertical spacer content element for TYPO3 with a visual slider control in the backend to define pixel-based spacing.

Features

Backend: Intuitive slider control (0–500 px) for setting the spacer height
Frontend: Lightweight <div> element with inline height — no JavaScript required
Preview: Visual backend preview showing the configured height
Compatibility: Supports TYPO3 11.5, 12.4, 13.4 and 14.x with automatic version detection
Translations: Backend labels available in English, German, Spanish, French and Italian

Requirements

TYPO3 CMS 11.5 – 14.x
PHP 7.4+ (TYPO3 11.5) / PHP 8.1+ (TYPO3 12+)
fluid_styled_content system extension

Installation

Via Composer (recommended)

composer require bkindler/bjk-more-space

Via TYPO3 Extension Manager

Download the extension ZIP file
Go to Admin Tools → Extensions
Click Upload Extension and select the ZIP file
Activate the extension

Via TER

Search for bjk_more_space in the TYPO3 Extension Manager and install it directly from the TYPO3 Extension Repository.

Setup

TYPO3 12+ (TypoScript auto-discovery)

The extension registers its TypoScript automatically. Simply include the static template:

Go to Web → Template on your root page
Open Includes
Add More Space (bjk_more_space) to the selected items

TYPO3 14+ (Site Sets)

Alternatively, you can include the extension via a Site Set:

Go to Site Management → Sites
Edit your site configuration
Under Sets, add More Space

TYPO3 11.5

The PageTSconfig is registered automatically via ext_localconf.php. Include the static TypoScript template as described above.

Usage

Open the Web → Page module in the TYPO3 backend
Click + Content to add a new content element
Select More Space from the content element wizard (in the "Default" tab)
Use the Height (px) slider to set the desired vertical spacing (0–500 px)
Save the content element

The frontend output is a simple <div> with the configured height:

<div class="bjk-more-space" style="height: 40px;" aria-hidden="true" data-space="40"></div>

Frontend Styling

The extension includes minimal CSS. You can override the default styles by targeting the .bjk-more-space class:

.bjk-more-space {
    display: block;
    width: 100%;
    min-height: 0;
    pointer-events: none;
}

Version Compatibility

The extension handles TYPO3 API differences automatically:

Feature	TYPO3 11.5	TYPO3 12+	TYPO3 14+
TCA field type	`input` + `eval int`	`number`	`number`
CType registration	positional array	named array	named array
PageTSconfig	`ext_localconf.php`	auto-discovery	auto-discovery + Site Sets
Backend preview	array-based record	array-based record	Record object
Icon registration	`Icons.php`	`Icons.php`	`Icons.php`

File Structure

bjk_more_space/
├── Classes/Preview/
│   └── SpacerPreviewRenderer.php    # Backend page module preview
├── Configuration/
│   ├── Icons.php                     # SVG icon registration
│   ├── Sets/BjkMoreSpace/           # Site Set for TYPO3 14+
│   ├── TCA/Overrides/tt_content.php # CType and TCA field registration
│   ├── TypoScript/                   # Classic TypoScript setup
│   └── page.tsconfig                # PageTSconfig (v12+ auto-discovery)
├── Resources/
│   ├── Private/
│   │   ├── Language/                 # XLIFF files (en, de, es, fr, it)
│   │   ├── Layouts/Default.html
│   │   └── Templates/Spacer.html    # Fluid frontend template
│   └── Public/
│       ├── Css/more-space.css        # Minimal frontend CSS
│       └── Icons/                    # Extension and content element SVGs
├── composer.json
├── ext_emconf.php
├── ext_localconf.php                 # PageTSconfig for TYPO3 11.5
└── ext_tables.sql                    # Database field definition

License

This extension is licensed under the GNU General Public License v2.0 or later.

Author

Björn Kindler

Email: info@kindler-webservices.de
GitHub: @bkindler

You need space? Here it is. 😉

bkindler / bjk-more-space

Maintainers

Details