Initial Commit

2026-05-18 14:46:25 +02:00
parent 4f495177e4
commit b6d2142214
166 changed files with 13952 additions and 178 deletions
--- a/Documentation/CustomFrameClasses.md
+++ b/Documentation/CustomFrameClasses.md
@@ -0,0 +1,107 @@
+# 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