# 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**:

```php
// 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

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

### In Frontend/CSS

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

```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:

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

After making changes, clear the TYPO3 cache:

```bash
./vendor/bin/typo3 cache:flush
```

## Date Added

November 19, 2025