avando / ave
Avando AVE — theme framework for Contao 5.7 LTS and Contao 6
Package info
Language:CSS
Type:contao-bundle
pkg:composer/avando/ave
Requires
- php: ^8.3
- contao/core-bundle: ^5.7 || ^6.0
- enshrined/svg-sanitize: ^0.22 || ^1.0
- matthiasmullie/minify: ^1.3
- symfony/yaml: ^7.4 || ^8.0
Requires (Dev)
- phpunit/phpunit: ^11.5
Suggests
None
Provides
None
Conflicts
None
Replaces
None
README
Ein Theme-Framework für Contao 5.7 LTS und Contao 6. Gestaltung entsteht hier nicht durch Templates, die man kopiert und anpasst, sondern durch Auswahllisten im Backend: eine Sektion bekommt ihren Hintergrund, ihr Raster und ihre Textfarbe über Felder am Artikel, ein Inhaltselement seinen Stil über Felder am Element. Was dabei herauskommt, sind CSS-Klassen — keine Inline-Styles, kein Baukasten-Markup, kein Build-Schritt.
Installation
Öffentlich heißt nicht frei. Das Paket liegt auf Packagist, damit Installation und Updates über Composer laufen. Benutzt werden darf es nur nach
LICENSE.md— kommerziell nur mit gekaufter Lizenz.
Dieses Paket ist der Kern. Das Theme-Paket (Beispielinhalte, Schriften, Hilfe-Seiten) und das Design Studio gibt es im Contao Theme Store — dort als Free- oder Pro-Version.
Mit dem Contao Manager: Das Theme-Paket aus dem Theme Store unter
„Pakete“ → „Pakete hochladen“ auswählen, dann „Änderungen anwenden“. Den Kern
(avando/ave) holt der Manager dabei selbst von Packagist. Danach die
Datenbank aktualisieren.
Mit Composer:
composer require avando/ave
Updates des Kerns kommen wie bei jeder Erweiterung: „Pakete aktualisieren“ im
Contao Manager bzw. composer update avando/ave.
Was es mitbringt
- Sektionen am Artikel — Hintergrund (Fläche, Verlauf, Bild, Video), Spaltenraster, Ausrichtung, vertikale Größe, Textskala. Hintergrundbilder laufen über Contaos eigene Bildverarbeitung, in drei Größen, verzögert erzeugt.
- Element-Stile am Inhaltselement — Karte, Glas, Schatten, Rahmen, Button-Varianten, Bildfilter, Zoom.
- Ein Stylesheet.
dist/ave.min.css(Open Props, Reset, Theme, Starter), 34 KB gzip. Kein Tailwind, kein Bootstrap, keine Utility-Wolke — die Klassen heißenlayout-columns-3undspace-box-md, nichtmd:grid-cols-3 py-8. - Native Bausteine. Akkordeon ist
<details>, Dialog ist<dialog>, Navigation ist<nav><ul>. Kein JavaScript für Dinge, die HTML kann. - Datenschutz ohne Nacharbeit. Alle Dateien liegen auf dem eigenen Server; der Besucher kontaktiert kein CDN und keine Schriftenbibliothek.
- Dunkelmodus über
light-dark(), ohne zweites Stylesheet. - KI-Kennzeichnung. Haken „KI-generiert“ an der Datei, sichtbarer Hinweis
an jeder Stelle, an der das Bild erscheint, auch als Hintergrundbild.
Position, Größe und Darstellung legt der Startpunkt fest. Maschinenlesbar
über schema.org (
digitalSourceType); die IPTC-Markierung des Generators bleibt beim Verkleinern erhalten. Abschaltbar im Startpunkt oder für alle Websites mitavando_ave: ai_label: false. - Erweiterungen mit alten Seiten-Hooks. Contao ruft bei Twig-Layouts
getPageLayout,generatePage,outputFrontendTemplateundmodifyFrontendPagenicht auf. AVE holt sie nach, damit etwa die Oveleon- Cookiebar ihren Banner zeigt; die Cookiebar übernimmt dabei Farben und Rundung des Themes. Erweiterungen, die Twig-Layouts selbst unterstützen, bleiben außen vor. Abschaltbar mitavando_ave: legacy_hooks: enabled: false, einzelne Rückrufe mitlegacy_hooks: skip: ['dienst::methode'].
Anforderungen
| PHP | 8.3 oder neuer (Contao 6 verlangt selbst 8.4) |
| Contao | 5.7 LTS oder 6.x — dasselbe Paket für beide |
| Templates | Twig (die alten .html5-Templates werden nicht unterstützt) |
Nach der Installation
php bin/console assets:install --symlink php bin/console contao:migrate
Danach steht das Theme unter /bundles/avandoave/ bereit. Die Migration legt
bei einer frischen Installation ein Theme „Avando AVE“ an, mit Seitenlayout und
Navigationsmodul. Dieses Layout der Startseite zuweisen, fertig. Außerdem macht
sie den Ordner files/theme/ öffentlich (Datei .public plus Verweis unter
public/files/theme), damit custom.css und die Ausgabe des Design Studios
beim Besucher ankommen. Bildgrößen,
Templates und das Starter-Stylesheet bringt das Bundle selbst mit; eine
Demo-Datenbank oder Projektkonfiguration ist nicht nötig.
theme.css (Starter-Bausteine) und view-transitions.css liegen unter
/bundles/avandoave/starter/. Eine Datei gleichen Namens in files/theme/CSS/
ersetzt die mitgelieferte.
Eigene Anpassungen gehören in files/theme/CSS/custom.css. Diese Datei liegt
außerhalb aller CSS-Layer und gewinnt deshalb immer gegen das Theme — auch ohne
!important, und auch nach einem Update.
Von Contao 5.7 auf Contao 6
AVE braucht dafür keinen eigenen Schritt, wohl aber die Reihenfolge, die Contao vorgibt:
- Zuerst auf das neueste Contao 5.7 aktualisieren (mindestens 5.7.13) und
die Datenbank migrieren (
contao:migratebzw. „Datenbank aktualisieren“ im Contao Manager). Dieser Schritt merkt sich, welche Felder Contao 6 anders kodiert — auch die Felder von AVE. - Dann auf Contao 6 aktualisieren und erneut migrieren.
Wer Schritt 1 überspringt, sieht danach doppelt kodierte Zeichen, etwa
Daten & BI statt Daten & BI in der Navigation. Abhilfe: zurück auf
den Stand vor dem Update und den Weg über 5.7 gehen.
Ein Datenbank-Backup vor jedem der beiden Schritte ist ohnehin Pflicht.
Wo was steht
| Frage | Datei |
|---|---|
| Welche Klassen gibt es? | cheat-sheet.md |
| Welche Werte hat ein Backend-Feld? | contao/dca/tl_article.php, tl_content.php |
| Wie ist eine Klasse umgesetzt? | public/theme/layout.css |
| Welche Tokens kann ich überschreiben? | public/theme/tokens.css |
| Anleitung für Redakteure | files/theme/help/ (im Theme-Paket) |
| Regeln für die Weiterentwicklung | ai-instructions.md |
Das Design Studio
Farben, Schriften, Radien, Schatten und Kopfzeile lassen sich mit dem
kostenpflichtigen Zusatz Avando AVE Design Studio
(avando/ave-editor) im Backend einstellen, mit Vorschau, sechzehn Vorlagen,
Kontrastprüfung und Versionsverlauf.
Das Theme braucht es nicht. Ohne das Studio steht jeder Wert als CSS-Token in
tokens.css und lässt sich in custom.css überschreiben — ein eigener Test
(FreeThemeStandsAloneTest) hält fest, dass kein Stylesheet auf eine Datei
angewiesen ist, die erst das Studio erzeugt.
Lizenz
Zwei Wege, ausführlich in LICENSE.md (English: LICENSE.en.md):
- Kommerziell — einmalig je Domain, beliebiger Zweck, ohne Namensnennung.
- Frei — unbegrenzt viele Webseiten, aber nur nichtkommerzielle, bei denen niemand für den Bau bezahlt wird, und die Zeile im Seitenfuß bleibt stehen.
Sobald jemand Geld für die Erstellung erhält, gilt der freie Weg nicht mehr — auch dann nicht, wenn die Webseite selbst nichtkommerziell ist.
Im freien Weg steht eine Zeile im Seitenfuß. Mit einer kommerziellen Lizenz entfällt sie über das Pro-Token aus der Lieferung — nicht durch Ändern des Templates, denn das fällt beim nächsten Update zurück.
Eingetragen wird das Token im Backend: Seitenstruktur → Startpunkt der Website bearbeiten → Avando AVE → Pro-Token, dann speichern. Ein falsches Token meldet das Formular sofort; ein Cache-Leeren ist nicht nötig.
Wer die Konfiguration als Code ausrollt, kann es stattdessen in der
config/config.yaml setzen — dann gilt es für alle Startpunkte der
Installation (Cache danach leeren):
avando_ave: license: 'AVE-XXXXX-XXXXX-XXXXX-XXXXX'
Fremdbestandteile und Schriftlizenzen: THIRD-PARTY.md.
Entwicklung
composer install vendor/bin/phpunit # Tests laufen gegen das umgebende Projekt php bin/console ave:css:build # → dist/theme.min.css und dist/ave.min.css
Der Testbestand ist zum größeren Teil Konsistenzprüfung, nicht Verhaltenstest: dass die Klassen im Spickzettel den Klassen im Stylesheet entsprechen, dass jedes Token einen Rückfall hat, dass die Attributionszeile noch da ist. Diese Tests fangen die Fehlerart, die dieses Projekt wirklich bedroht — stille Abweichung zwischen zwei Orten, die dasselbe behaupten.
tests/ wird per export-ignore nicht mit ausgeliefert. Entwickelt wird in
einem eigenen Repository; das öffentliche Repository enthält nur die
veröffentlichten Stände, ohne Tests.