description: Configure a T3Bootstrap-based TYPO3 v14 project via Site Settings — the structured YAML/Backend-Editor surface that replaces TypoScript constants. Catalog of ~200+ typed settings exposed by `t3bootstrap/template`, `t3bootstrap/core`, and the major add-on sets (blog, gallery), grouped by category (header, navigation, design colors, design fonts, body, footer, meta/favicons, search, assets, breakpoints, container widths, spacing steps, icons, buttons, privacy, expert, CTA-bar with social links). Includes the YAML structure for `config/sites/<site>/settings.yaml`, the special custom setting types (`ctabaritemlist`, `ctabuttonlist`, `calltoactionlist`) that t3bootstrap ships, a cookbook of common configuration tasks, and anti-patterns. Use this skill whenever changing colors, fonts, navigation behavior, header layout, sticky behavior, mobile menu type, dark mode, breakpoints, spacing system, footer content, search wiring, favicon/manifest, social links, or any other declarative configuration in a T3Bootstrap project.
---
# T3Bootstrap Site Settings
Use this skill to configure a T3Bootstrap-based TYPO3 v14 project via **Site Settings**
instead of TypoScript constants. The stack ships ~200+ typed settings across two
`settings.definitions.yaml` files (plus add-on definitions) — this catalog tells you
which key controls what, where it's defined, and how to set it.
> **Companion skills:**
> - [`t3bootstrap-site-package`](../t3bootstrap-site-package/SKILL.md) — get the right sets into the site config first; settings only take effect once the providing set is listed in `dependencies`.
> - [`t3bootstrap-overrides`](../t3bootstrap-overrides/SKILL.md) — when a setting doesn't expose what you need, escalate to SCSS/Fluid override.
## How Settings Are Resolved (v14)
TYPO3 v14 unifies "typed Site Settings" and TypoScript constants:
1. Each extension's `Configuration/Sets/<SetName>/settings.definitions.yaml` declares
typed settings with category, default value, label, optional `enum`.
2.**Defaults** live next to the definitions in `settings.yaml` (only set if non-default).
3. A site can **override** any setting in `config/sites/<site>/settings.yaml`.
4. Every typed setting is **automatically also exposed as a TypoScript constant** under
the same dotted path — so `{$header.logo}` still works in TypoScript and Fluid layouts.
### Three Places You Can Set a Value
| Where | When to use |
| --- | --- |
| **TYPO3 backend → Site Management → Settings** | Editor / integrator works in the UI. Persisted to `config/sites/<site>/settings.yaml` automatically. Reviewable in git. ✅ **Default choice.** |
| `config/sites/<site>/settings.yaml` direct edit | When committing infrastructure config in a feature branch without going through the backend. Same file the UI writes. |
| Customer extension's `Configuration/Sets/Site<Customer>/settings.yaml` | Default values that should ship with the project — useful for white-label installs or "this customer always wants dark mode". |
**Precedence** (highest wins): site `settings.yaml` > customer set `settings.yaml` > upstream set `settings.yaml` > definition default.
### Inspecting Values
```bash
# All current effective settings for a site (claude-diagnostics)
| `header.layout` | enum | `4` | 0=Standard, 1=Logo right of nav, 2=Logo left above nav, 3=Centered, 4=Logo left next to nav full-height, 5=Logo left + nav+meta-links right |
| `header.searchbox` | bool | `false` | Show searchbox in header |
Not in `settings.definitions.yaml`; lives in the upstream `settings.yaml` of the Template set:
```yaml
styles:
content:
textmedia:
linkWrap:
lightboxEnabled:true
width:1200m
height:900m
```
Override to disable the lightbox, or to change the click-to-zoom dimensions.
### Other Add-Ons Without Typed Definitions
Many add-on sets still rely on legacy `constants.typoscript`. Common ones:
- News (`t3bootstrap/t3bootstrap-news`): `plugin.tx_news.settings.*` from EXT:news with t3bootstrap-specific list/detail layouts via the Site Set selected.
- Form (`t3bootstrap/t3bootstrap-form`): `plugin.tx_form.*` standard EXT:form keys.
> The TypoScript-constant access (`{$header.logo}`) works regardless.
### Quoting Pitfall
A bool default of `false` set in YAML as the string `'false'` becomes truthy. Always
write booleans **unquoted**:
```yaml
# ✅ correct
header.isSticky:false
# ❌ wrong — string 'false' evaluates to truthy when consumed as bool
header.isSticky:'false'
```
### Path Already Defined as Both Setting and Constant
When the same path is set in `settings.yaml` AND in a `constants.typoscript`, **the
settings YAML wins** in v14. Don't define a value in both places.
## Anti-Patterns
| Anti-pattern | Why it's bad | Correct approach |
| --- | --- | --- |
| Editing `vendor/t3bootstrap/template/.../settings.definitions.yaml` | Wiped by composer update; also doesn't override anything (it's the definition, not the value) | Override the **value** in `config/sites/<site>/settings.yaml` |
| Putting brand colors in SCSS variables when editor needs to change them | Requires SCSS rebuild; editor can't tweak in backend | Use `design.color.*` settings (CSS custom properties) |
| Setting `searchbox: true` without `search.searchPageId` | Searchbox renders, every submit 404s | Configure `search.searchPageId` together |
| Adding a customer-specific social platform via hardcoded Fluid | Loses the multi-language link editor | Add an item to `callToAction.socialLinks` with a unique `id` + icon |
| Forking the whole `settings.definitions.yaml` "to add one field" | Maintenance burden | Add your own definition in the customer extension's `Configuration/Sets/Site<Customer>/settings.definitions.yaml` — it merges with upstream |
| Mixing `header.logo = ...` in a customer constants.typoscript AND `settings.yaml` | Confusing — YAML wins, the TS line looks active but isn't | Pick one (YAML preferred) |
| Setting both `enable-dark-mode: true` and `force-dark-mode: true` without reason | Force overrides toggle UI, editor can't switch back | Only `force-dark-mode` for design previews; otherwise just `enable-dark-mode` |
| Setting `navigation.main.menuType` per language | Type is structural; switching it breaks markup | One menu type site-wide; vary only visual properties |
1.**No cache flush needed for typed settings** — they're read live; but TypoScript-rendered values (most uses) still rely on the TypoScript cache. Safer: `ddev exec vendor/bin/typo3 cache:flush`.
2. Re-load the frontend and inspect: e.g. for color changes look at the rendered CSS for `--bs-primary` / `--t3b-color-primary`.
3.**claude-diagnostics**:
-`vendor/bin/typo3 ts:constants --path=header.logo` — confirm the effective value.
-`vendor/bin/typo3 site:settings --site=<id>` — full dump.
4. For settings that affect generated CSS (breakpoints, spacing, colors when SCSS-driven): trigger the customer's SCSS rebuild (`ws_scss` watcher, or `npm run build`).
5. For settings that affect JS (mobile menu type, AOS): hard reload the frontend; the JS migrator decides at page load.
For overrides that aren't settable (template structure, partials), switch to the
**`t3bootstrap-overrides`** skill. For the bootstrap setup, see **`t3bootstrap-site-package`**.
short_description:"Configure T3Bootstrap via typed Site Settings"
default_prompt:"Use $t3bootstrap-site-settings to configure a T3Bootstrap-based TYPO3 v14 project via Site Settings (`config/sites/<site>/settings.yaml` or the backend Settings editor) — the catalog covers ~200+ typed keys for header, navigation (main/sub/mobile/language/footer/meta/breadcrumb), design colors, design fonts, dark/contrast mode, body/footer, meta/favicons/manifest, search, breakpoints, container widths, spacing steps, icons, images, buttons, privacy, and the CTA-bar with social-link list editor."
"description":"Agent Skills für das T3Bootstrap-Ökosystem (TYPO3 v14): Site-Package-Setup auf den t3bootstrap/*- und wapplersystems/*-Extensions, minimal-invasive Template- und CSS-Overrides, Content-Element-Auswahl und Inhalts-Migration auf die b13/container-basierten t3bs_*-CEs (inkl. Flux-bs5 → Container-bs5 Migration). Ergänzt das typo3-skills-Plugin um T3Bootstrap-spezifische Workflows.",
"description":"Agent Skills für das T3Bootstrap-Ökosystem (TYPO3 v14): Site-Package-Setup auf den t3bootstrap/*- und wapplersystems/*-Extensions, Site-Settings-Katalog (~200+ typed settings für Header, Navigation, Design, Farben, Fonts, Breakpoints, Spacing, Search, CTA-Bar etc.), minimal-invasive Template- und CSS-Overrides, Content-Element-Auswahl und Inhalts-Migration auf die b13/container-basierten t3bs_*-CEs (inkl. Flux-bs5 → Container-bs5 Migration). Ergänzt das typo3-skills-Plugin um T3Bootstrap-spezifische Workflows.",
@@ -26,6 +26,7 @@ packages and remains upgrade-friendly.
| Skill | Purpose |
| Skill | Purpose |
| --- | --- |
| --- | --- |
| [t3bootstrap-site-package](./.agents/skills/t3bootstrap-site-package/SKILL.md) | Set up a TYPO3 v14 project on the T3Bootstrap stack: `composer.json` repositories, the right `t3bootstrap/*` + `wapplersystems/*` packages, site sets in `config/sites/<site>/config.yaml`, when (and when not) to add a local site package, language configuration, route enhancers. |
| [t3bootstrap-site-package](./.agents/skills/t3bootstrap-site-package/SKILL.md) | Set up a TYPO3 v14 project on the T3Bootstrap stack: `composer.json` repositories, the right `t3bootstrap/*` + `wapplersystems/*` packages, site sets in `config/sites/<site>/config.yaml`, when (and when not) to add a local site package, language configuration, route enhancers. |
| [t3bootstrap-site-settings](./.agents/skills/t3bootstrap-site-settings/SKILL.md) | Catalog of the ~200+ typed Site Settings exposed by `t3bootstrap/template` and `t3bootstrap/core` — header, navigation (main/sub/mobile/language/footer/meta/breadcrumb), design colors and fonts, dark/contrast mode, body/footer, meta/favicons, search, breakpoints, container widths, spacing, icons, buttons, privacy, plus the custom `ctabaritemlist` / `calltoactionlist` types for social-link editing. |
| [t3bootstrap-overrides](./.agents/skills/t3bootstrap-overrides/SKILL.md) | Minimal-invasive customization: Fluid template overrides via `templateRootPaths.10` / `partialRootPaths.10` / `layoutRootPaths.10`, SCSS variable overrides with `!default`, TypoScript constants, when to override what — without forking `t3bootstrap/template`. |
| [t3bootstrap-overrides](./.agents/skills/t3bootstrap-overrides/SKILL.md) | Minimal-invasive customization: Fluid template overrides via `templateRootPaths.10` / `partialRootPaths.10` / `layoutRootPaths.10`, SCSS variable overrides with `!default`, TypoScript constants, when to override what — without forking `t3bootstrap/template`. |
| [t3bootstrap-content-elements](./.agents/skills/t3bootstrap-content-elements/SKILL.md) | Catalog of the 23 `t3bs_*` content elements from `t3bootstrap/container-bs5-templates`, decision matrix for content migration (static HTML, WordPress, Joomla, older TYPO3, Flux-bs5), and the `t3bsContainerBs5MigrateFluxBs5` upgrade wizard. |
| [t3bootstrap-content-elements](./.agents/skills/t3bootstrap-content-elements/SKILL.md) | Catalog of the 23 `t3bs_*` content elements from `t3bootstrap/container-bs5-templates`, decision matrix for content migration (static HTML, WordPress, Joomla, older TYPO3, Flux-bs5), and the `t3bsContainerBs5MigrateFluxBs5` upgrade wizard. |
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
