Custom Frame Classes for TYPO3 Content Elements

Overview

Custom frame class options have been added to the TYPO3 backend, allowing editors to select Vitec-specific styling options for content elements.

Location

File: /packages/vitec/Configuration/TCA/Overrides/tt_content.php

Available Frame Classes

The following custom frame classes are available in the backend under Appearance → Frame:

Label	CSS Class	Description
Vitec: Full Width	`vitec-full-width`	Content spans full width of the viewport
Vitec: Centered Container	`vitec-centered`	Content is centered with constrained width
Vitec: Card Style	`vitec-card`	Content displayed as a card with shadow/border
Vitec: Dark Background	`vitec-dark`	Content with dark background styling
Vitec: Highlight Box	`vitec-highlight`	Content with highlighted/accent styling

Implementation

The frame classes are added using TCA overrides, with the field configured to allow multiple selections:

// Change frame_class to allow multiple selections
$GLOBALS['TCA']['tt_content']['columns']['frame_class']['config']['renderType'] = 'selectCheckBox';
$GLOBALS['TCA']['tt_content']['columns']['frame_class']['config']['maxitems'] = 999;

// Add custom frame_class options for Vitec
$GLOBALS['TCA']['tt_content']['columns']['frame_class']['config']['items'] = array_merge(
    $GLOBALS['TCA']['tt_content']['columns']['frame_class']['config']['items'],
    [
        ['label' => 'Vitec: Full Width', 'value' => 'vitec-full-width'],
        ['label' => 'Vitec: Centered Container', 'value' => 'vitec-centered'],
        ['label' => 'Vitec: Card Style', 'value' => 'vitec-card'],
        ['label' => 'Vitec: Dark Background', 'value' => 'vitec-dark'],
        ['label' => 'Vitec: Highlight Box', 'value' => 'vitec-highlight'],
    ]
);

Usage

In Backend

Edit any content element
Navigate to the Appearance tab
Select one or more options using checkboxes from the Frame field
Multiple classes can be combined (e.g., "Card Style" + "Dark Background")
Save the content element

In Frontend/CSS

The selected frame class is added to the content element wrapper. Style these classes in your CSS:

/* Example CSS styling */
.vitec-full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.vitec-centered {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.vitec-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.vitec-dark {
    background-color: #1a1a1a;
    color: white;
}

.vitec-highlight {
    background-color: #f0f7ff;
    border-left: 4px solid #0066cc;
    padding: 1.5rem;
}

Adding More Options

To add additional frame class options, edit /packages/vitec/Configuration/TCA/Overrides/tt_content.php and add new array entries:

['label' => 'Your Label', 'value' => 'your-css-class'],

After making changes, clear the TYPO3 cache:

./vendor/bin/typo3 cache:flush

Date Added

November 19, 2025

3.1 KiB Raw Blame History