PHPackages erdmannfreunde/theme-toolbox - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. erdmannfreunde/theme-toolbox ActiveContao-bundle[Utility & Helpers](/categories/utility) erdmannfreunde/theme-toolbox ============================ Erdmann & Freunde Theme Utilities 4.1.0(1w ago)834.0k↓54.9%7[2 issues](https://github.com/erdmannfreunde/theme-toolbox/issues)4LGPL-3.0-or-laterPHPPHP ^8.1 Since Sep 22Pushed 3w ago4 watchersCompare [ Source](https://github.com/erdmannfreunde/theme-toolbox)[ Packagist](https://packagist.org/packages/erdmannfreunde/theme-toolbox)[ Docs](https://www.erdmann-freunde.de)[ RSS](/packages/erdmannfreunde-theme-toolbox/feed)WikiDiscussions 3.0 Synced yesterday READMEChangelog (10)Dependencies (41)Versions (49)Used By (4) [![Build Status](https://camo.githubusercontent.com/9d03686b50e70453e10ed2b2d0f269bfed0877e01e0e54b45c53273c6007d919/68747470733a2f2f7472617669732d63692e6f72672f6572646d616e6e667265756e64652f7468656d652d746f6f6c626f782e737667)](https://travis-ci.org/erdmannfreunde/theme-toolbox)[![Latest Version tagged](https://camo.githubusercontent.com/10b1738c4f705e583e8e519b8b7c860c43ee1ac3aeb1f375a0fc48495d14886d/687474703a2f2f696d672e736869656c64732e696f2f6769746875622f7461672f6572646d616e6e667265756e64652f7468656d652d746f6f6c626f782e737667)](https://github.com/erdmannfreunde/theme-toolbox/tags)[![Latest Version on Packagist](https://camo.githubusercontent.com/987d23e7bff3d80fe49a84a06ae23f77a9edfcb9a11be06f7736b093ec98dea6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6572646d616e6e667265756e64652f7468656d652d746f6f6c626f782e737667)](https://packagist.org/packages/https://github.com/erdmannfreunde/theme-toolbox/tags)[![Installations via composer per month](https://camo.githubusercontent.com/31b3af6bbbee00f36b53710183a59e801428f6d0f1cc5fa728e531fcf648e1e0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f6572646d616e6e667265756e64652f7468656d652d746f6f6c626f782e737667)](https://packagist.org/packages/erdmannfreunde/theme-toolbox) Theme Toolbox ============= [](#theme-toolbox) Dieses Paket enthält hilfreiche Tools zur Arbeit mit den [Contao Themes](https://erdmann-freunde.de/produkte/contao-themes/) von [Erdmann & Freunde](https://erdmann-freunde.de/). 1. CSS-Klassen-Auswahl ---------------------- [](#1-css-klassen-auswahl) Wenn du deinen Kunden keine Liste von Klassennamen für Varianten und spezifische Stile geben möchtest, kannst du die Theme-Toolbox verwenden, um menschenlesbare Stile zu Elementen, Modulen und Artikeln hinzuzufügen. Im Toolbox-Editor kannst du CSS-Klassen und deren Übersetzungen hinzufügen und auswählen, wo diese Styles sichtbar sein sollen. 2. Theme Editor --------------- [](#2-theme-editor) Der Theme Editor ermöglicht ab Version 4 das direkte Bearbeiten von Theme-Assets aus dem Contao Backend. ### 2.1 Styles [](#21-styles) Der Theme Editor ermöglicht das direkte Bearbeiten von SCSS-Dateien aus dem Contao Backend. Du kannst Original-Theme-Dateien überschreiben, indem du individuelle Varianten erstellst, Dateien umbenennen oder neue SCSS-Dateien anlegen. Über eine Vergleichsansicht lassen sich Varianten und Original zeilenweise vergleichen und so Theme-Updates schneller nachvollziehen. ### 2.2 Webfonts [](#22-webfonts) Im Tab „Webfonts" können Schriftarten für das Theme verwaltet werden. Es stehen zwei Wege zur Verfügung: - **Google Fonts Katalog:** Schriften können direkt aus dem Google Webfont Katalog ausgewählt werden. Die Schriftdateien werden automatisch heruntergeladen und im Theme unter `layout/custom/fonts` abgelegt. Die zugehörige `@font-face`-Deklaration wird automatisch in `base/_fonts.scss` ergänzt. - **Manueller Upload:** Alternativ können Schriftdateien (woff2, ttf, woff) auch manuell hochgeladen werden — z. B. für Schriften, die nicht bei Google Fonts verfügbar sind. **Hinweis:** Nach dem Import oder Upload müssen die Schriftarten noch händisch in der `_variables.scss` eingetragen werden, damit sie im Theme verwendet werden. Nicht mehr benötigte Schriftarten lassen sich über den Button **„Ungenutzte @font-face bereinigen"** entfernen. ### 2.3 Bilder [](#23-bilder) Im Tab „Bilder" werden alle Bilddateien des Themes aus dem Verzeichnis `layout//img` angezeigt. Erlaubt sind die Formate JPG, JPEG, PNG, GIF, SVG, WebP und AVIF bis zu einer Größe von 5 MB. - **Ersetzen:** Bestehende Theme-Bilder lassen sich durch eigene Varianten überschreiben. Die neue Datei wird unter `layout/custom/img` abgelegt, das Original bleibt unberührt. In der Vorschau werden Custom und Original nebeneinander dargestellt. - **Hinzufügen:** Neue Bilder und Unterordner können direkt im Custom-Bereich angelegt werden. - **Umbenennen & Löschen:** Custom-Dateien können umbenannt oder gelöscht werden; beim Löschen einer Überschreibung wird automatisch wieder das Original verwendet. ### 2.4 JavaScript [](#24-javascript) Im Tab „JavaScript" lassen sich `.js`-Dateien aus `layout//js` direkt im Backend bearbeiten — analog zum Styles-Editor mit Ace-Editor, Diff-Ansicht und Revert-Funktion. - **Überschreiben:** Original-JS-Dateien des Themes können durch Custom-Versionen in `layout/custom/js` überschrieben werden. - **Neu anlegen:** Eigene JS-Dateien und Unterordner können im Custom-Bereich angelegt werden. - **Diff & Revert:** Unterschiede zum Original lassen sich zeilenweise anzeigen, Änderungen können auf das Original zurückgesetzt werden. - **Umbenennen & Löschen:** Custom-Dateien lassen sich umbenennen oder löschen. ### Optionale Konfiguration [](#optionale-konfiguration) Theme und Anpassungen liegen standardmäßig unter `layout/theme` und `layout/custom`. Du kannst die Verzeichnisse für Layouts und Custom-SCSS aber über die `config/config.yaml` anpassen: ``` theme_toolbox: layout_dir: 'layout' # Basis-Verzeichnis für Theme-Layouts custom_dir: 'layout/custom' # Verzeichnis für Custom-SCSS-Overrides ``` 2.5 Live-Editor (Theme-Editor im Frontend) ------------------------------------------ [](#25-live-editor-theme-editor-im-frontend) Der **Live-Editor** bearbeitet die Design-Token eines Themes (Farben, Typografie, Abstände, Form, Schrift) als Overlay direkt auf der echten Seite — mit Live-Vorschau. Werte werden zur Laufzeit als CSS Custom Properties ins `:root` geschrieben; erst „Übernehmen" speichert server-seitig. Die Maske wird vollständig aus einer Token-Registry generiert. Ist ein Backend-Benutzer eingeloggt, erscheint auf jeder Frontend-Seite unten mittig die Dock-Pille **„Theme bearbeiten"**. Drei Wege füllen den Editor: manuelle Maske, Vorlagen (Presets aus dem Theme) und — ab Phase 2 mit Pro — ein KI-Seed (in Phase 1 nur als Teaser angelegt). ### Token-Registry & Theme-Token [](#token-registry--theme-token) Die Basis-Registry liegt im Bundle unter `src/Editor/Resources/tokens.json`. Ein Theme kann unter `layout//tokens.json` zusätzliche oder überschreibende Token mitliefern; der Editor merged beide. Presets liegen als `layout//presets/*.json` im realen Property-Format: ``` { "name": "Klarwerk", "description": "Anthrazit & ruhig", "values": { "--color-brand": "#3a4a63", "--color-highlight": "#c08a3e", "--color-text": "#222831" } } ``` Sind keine Presets vorhanden, bleibt der Vorlagen-Tab einfach leer — kein Fehler. ### Speichern [](#speichern) Beim „Übernehmen" ersetzt der Editor die geänderten Variablen **direkt an Ort und Stelle** in der custom `_variables.scss` — die jeweilige `--token: …;`-Zeile wird editiert, genau wie es ein Entwickler tun würde (eine noch nicht vorhandene Property wird in den ersten `:root{}`-Block eingefügt), danach wird das Theme neu kompiliert. Nur tatsächlich geänderte Werte werden geschrieben; unberührte `var()`-Token behalten ihren Ausdruck. Die Wahl ist damit Teil der Theme-Quelle — sichtbar, reviewbar und deploybar; rückgängig machen lässt sie sich im Backend über den **Theme Editor → Styles** (Diff/Revert auf das Original) bzw. die Theme-Versionierung. Eingehende Werte werden gegen die Registry geprüft (unbekannte Properties verworfen, Werte geklemmt) und auf ausreichenden Kontrast abgesichert. Das Speichern gibt es **nur im eingeloggten Käufer-Modus**. Im öffentlichen Demo-Modus schreibt der Editor nichts server-seitig: Änderungen bleiben rein clientseitig (Live-Vorschau als Inline-Styles auf `:root`) und lassen sich nur per JSON exportieren — kein Besucher verändert das geteilte Theme (alle schreibenden Routen liefern dort 403). ### Schriften (DSGVO) [](#schriften-dsgvo) Der Font-Picker nutzt dieselbe Google-Fonts-Download-Funktion wie der Theme-Editor: Die Schrift wird einmalig server-seitig heruntergeladen, self-hosted abgelegt und per `@font-face` registriert. Der Besucher-Browser lädt ausschließlich die self-hosted Datei — kein Google-Request im Frontend. ### Öffentlicher Demo-Modus [](#öffentlicher-demo-modus) Für eine öffentliche Demo lässt sich der Editor in den Public-Modus schalten. Dann ist der Editor auch ohne Login sichtbar, speichert aber nichts (kein Server-Write, kein Font-Download, kein KI) — nur lokale Vorschau und JSON-Export. ``` theme_toolbox: editor: public_mode: true # NUR auf der öffentlichen Demo ``` Für die Demo wird ein Schau-Schriften-Satz einmalig beim Deploy vorab geladen: ``` vendor/bin/contao-console theme-toolbox:editor:preload-demo-fonts ``` 3. Frontend-Theme-Editor ein-/ausschalten ----------------------------------------- [](#3-frontend-theme-editor-ein-ausschalten) Der Live-Editor im Frontend ist ein Werkzeug für die Design-Phase. Über die Contao-Systemwartung („Wartung") lässt er sich mit dem Schalter **„Frontend-Editor anzeigen"** ein- und ausblenden. Solange er aktiviert ist, sehen eingeloggte Backend-Benutzer:innen das Editor-Dock im Frontend; ist er aus, bleibt das Frontend unberührt. Der Schalter ist **standardmäßig aus**. Nach einer Neuinstallation aktivierst du ihn einmalig in der Systemwartung, wenn du mit dem Gestalten beginnen möchtest; ist die Gestaltung abgeschlossen, schaltest du ihn wieder aus. Ein separates Umgehen des SCSS-Caches ist nicht mehr nötig: Der Compiler erkennt Änderungen an den SCSS-Dateien automatisch (Vergleich der Datei-Zeitstempel) und kompiliert bei Bedarf neu. 4. Header- und Footer-Klassen ----------------------------- [](#4-header--und-footer-klassen) Im Seitenlayout lassen sich eigene Header- und Footer-Klassen im Seitenlayout vergeben und über Template-Anpassungen nutzen. Das `fe_page.html.twig` Template könnte folgendermaßen aussehen: ``` {% extends '@Contao/fe_page' %} {% block header %} {% if header %} {{ header|raw }} {% endif %} {% endblock %} {% block footer %} {% if footer %} {{ footer|raw }} {% endif %} {% endblock %} ``` 5. Twig-Funktionen für Theme-Assets ----------------------------------- [](#5-twig-funktionen-für-theme-assets) Die Theme Toolbox stellt drei Twig-Funktionen bereit, um kompilierte CSS-, JavaScript- und Bild-Dateien in Twig-Templates einzubinden: ### `theme_css(entry)` [](#theme_cssentry) Gibt den Pfad zur kompilierten CSS-Datei zurück. Der Parameter `entry` entspricht dem Namen der Entry-Datei (Standard: `'default'`). ``` {# Ausgabe: /assets/theme-name/css/default.css #} ``` Varianten wie `variant-1.scss` können dementsprechend über den Entry-Parameter `variant-1` ausgegeben werden. ### `theme_js(file)` [](#theme_jsfile) Gibt den Pfad zu einer JavaScript-Datei des Themes zurück. ``` {# Ausgabe: /assets/theme-name/js/main.js #} ``` ### `theme_img(file)` [](#theme_imgfile) Gibt den Pfad zu einer Bild-Datei des Themes zurück. ``` {# Ausgabe: /assets/theme-name/img/logo.svg #} ``` Development notes ----------------- [](#development-notes) ### Code style (ECS) [](#code-style-ecs) ``` # Prüfen vendor/bin/ecs check # Automatisch korrigieren vendor/bin/ecs check --fix ``` ### Code-Modernisierung (Rector) [](#code-modernisierung-rector) ``` # Vorschau der Änderungen vendor/bin/rector --dry-run # Änderungen anwenden vendor/bin/rector ``` --- ### Health Score 63 — FairBetter than 99% of packages Maintenance92 Actively maintained with recent releases Popularity36 Limited adoption so far Community26 Small or concentrated contributor base Maturity84 Battle-tested with a long release history Bus Factor1 Top contributor holds 52.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~76 days Recently: every ~3 days Total 38 Last Release 10d ago Major Versions 2.x-dev → 3.0.02023-09-16 3.2.0 → 4.0.0-RC12026-03-12 3.2.1 → 4.0.02026-05-05 3.2.2 → 4.0.12026-06-03 3.3.0 → 4.1.02026-06-23 PHP version history (5 changes)1.0.0PHP ^5.6 || ^7.0 1.0.2PHP >=5.6 2.1.1PHP >=7.0 2.2.0PHP >=7.4 3.0.0PHP ^8.1 ### Community Maintainers ![](https://www.gravatar.com/avatar/d0c18094f552ca25ac29a9ef3763092f24b2be3158b2d047e644eef8a8a10282?d=identicon)[erdmannfreunde](/maintainers/erdmannfreunde) --- Top Contributors [![richardhj](https://avatars.githubusercontent.com/u/1284725?v=4)](https://github.com/richardhj "richardhj (39 commits)")[![denniserdmann](https://avatars.githubusercontent.com/u/3773697?v=4)](https://github.com/denniserdmann "denniserdmann (26 commits)")[![christianbarkowsky](https://avatars.githubusercontent.com/u/1230547?v=4)](https://github.com/christianbarkowsky "christianbarkowsky (5 commits)")[![rabauss](https://avatars.githubusercontent.com/u/14016098?v=4)](https://github.com/rabauss "rabauss (2 commits)")[![koertho](https://avatars.githubusercontent.com/u/12064642?v=4)](https://github.com/koertho "koertho (1 commits)")[![veronikaplenta](https://avatars.githubusercontent.com/u/88315148?v=4)](https://github.com/veronikaplenta "veronikaplenta (1 commits)") --- Tags bundlecontao ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/erdmannfreunde-theme-toolbox/health.svg) ``` [![Health](https://phpackages.com/badges/erdmannfreunde-theme-toolbox/health.svg)](https://phpackages.com/packages/erdmannfreunde-theme-toolbox) ``` ### Alternatives [symfony/framework-bundle Provides a tight integration between Symfony components and the Symfony full-stack framework 3.6k251.7M11.5k](/packages/symfony-framework-bundle)[easycorp/easyadmin-bundle Admin generator for Symfony applications 4.3k17.9M388](/packages/easycorp-easyadmin-bundle)[shopware/platform The Shopware e-commerce core 3.4k1.5M3](/packages/shopware-platform)[metamodels/core MetaModels core 10156.4k67](/packages/metamodels-core)[shopware/core Shopware platform is the core for all Shopware ecommerce products. 585.6M572](/packages/shopware-core)[open-dxp/opendxp Content & Product Management Framework (CMS/PIM) 9421.6k61](/packages/open-dxp-opendxp) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)