Voraussetzungen

Contao Systemvoraussetzungen

Diese Erweiterungen installiert der Contao Manager bzw. Composer automatisch mit:

• Theme Components Bundle ab Version 2.0
• CSS Style Selector Bundle ab Version 2.1

Die Module für News, Events, FAQ, Newsletter, Kommentare und Auflistung gestaltet Creuva mit, sie sind aber optional. Die Demos legen News und Termine nur an, wenn das jeweilige Bundle installiert ist.

Lizenz

Lizenz erwerben

Die Lizenz für Creuva bekommst du auf contao-themes.net. Eine Lizenz gilt für eine Domain inklusive Subdomains; für mehrere Websites gibt es mehrere Einzellizenzen oder eine Lizenz für unbegrenzte Domains. Das Theme darf privat und kommerziell genutzt werden.

Copyright-Hinweis

Die untere Leiste im Footer enthält immer den Link „powered by contao-themes.net“. Er ist Teil der Lizenz und darf nur mit einer Lizenz ohne Copyright-Link entfernt oder verändert werden – auch dann, wenn du das Theme nur als Basis nutzt und anpasst.

Agenturen und Weitergabe

• Du kannst die Nutzungsrechte einmal an deinen Kunden übergeben; die Agentur verliert damit ihre Rechte.
• Für jedes weitere Projekt brauchst du eine neue Lizenz (außer mit der Lizenz für unbegrenzte Domains).
• Der Weiterverkauf des Themes oder einzelner Bestandteile ist nicht erlaubt.

Demo-Inhalte und Bibliotheken

Texte, Bilder und sonstige Medien der Demos dienen nur der Vorschau und dürfen nicht für eigene Websites verwendet werden. Für die mitgelieferten Schriften (Plus Jakarta Sans und Fraunces unter der SIL Open Font License 1.1) und die benötigten Pakete gelten deren eigene Lizenzen; die Übersicht steht in der Datei THIRD-PARTY-NOTICES.md des Bundles.

Die vollständigen Lizenzbedingungen findest du in der Datei LICENSE im Bundle.

Installation

Die Installation besteht aus zwei Schritten: das Paket installieren und danach das Theme einrichten. Das Einrichten geht im Backend unter Layout › Creuva oder auf der Konsole mit creuva:install – beide Wege führen zum gleichen Ergebnis.

1. Paket installieren

Mit dem Contao Manager

Rufe den Contao Manager auf (www.deine-domain.de/contao-manager.phar.php), suche im Tab Entdecken nach creuva, füge das Paket pdir/creuva-theme-bundle hinzu und klicke auf Änderungen anwenden. Aktualisiere anschließend die Datenbank, wenn der Contao Manager dazu auffordert.

Mit Composer

composer require pdir/creuva-theme-bundle
vendor/bin/contao-console contao:migrate

2. Theme einrichten im Backend

Melde dich als Administrator im Backend an und öffne Layout › Creuva. Unter Einrichten wählst du, was angelegt werden soll:

Für einen neuen Startpunkt gibst du Titel, Sprache und optional die Domain an. Die Domain brauchst du, wenn es schon einen Startpunkt mit derselben Sprache ohne Domain gibt. Unter jedem Formular steht der passende Konsolenbefehl, darunter nach dem Ausführen die Ausgabe.

Was angelegt wird

• das Theme „Creuva“ mit den Modulen Hauptnavigation, Header, Footer – Marke, Footer-Navigationen, Copyright und untere Links
• ein Seitenlayout vom Typ „Modern“ mit dem Template page/layout/creuva, alle Module sind ihren Bereichen zugewiesen
• die Bildgröße „Logo“ (480 × 120 px, 2x-Dichte), falls das Theme noch keine hat
• die CSS-Stile für den CSS Style Selector
• die Zuweisung des Layouts zum Startpunkt

Kontakt-, Impressum-, Datenschutz-, Barrierefreiheits-, Sitemap- und Suchseiten einer bestehenden Website erkennt das Theme an ihrem Alias (kontakt, impressum, datenschutz, barrierefreiheit, sitemap, suche …) und verlinkt sie im Header-Button, in der Header-Suche und im Footer. Modulnamen und Texte richten sich nach der Sprache des Startpunkts (Deutsch oder Englisch).

2. Theme einrichten auf der Konsole

# Bestehende Website: Startpunkt wird abgefragt oder per ID übergeben
vendor/bin/contao-console creuva:install --root=1

# Neue Website mit Grundseiten
vendor/bin/contao-console creuva:install --with-pages --site-title="Meine Firma" --dns=example.org

# Komplette Demo-Website mit Beispielinhalten, Bildern, News und Formular
vendor/bin/contao-console creuva:install --demo

Hinweise

Fehlermeldung: Diese Seite funktioniert nicht / Die Seite hat dich zu oft umgeleitet

Bearbeite den Startpunkt und stelle unter URL-Einstellungen das Protokoll auf http:// oder https://, je nachdem wie deine Seite aufgerufen werden soll.

Icons und Downloads der Demo fehlen

Führe vendor/bin/contao-console contao:symlinks aus, damit public/files/creuva-demo angelegt wird.

Suche findet nichts

Baue den Suchindex nach der Einrichtung einmal auf: System › Systemwartung oder contao:crawl.

Demos und Styleguide

Creuva bringt vier Demos mit. Jede wird als eigener Startpunkt importiert – im Backend unter Layout › Creuva › Einrichten (Auswahl „Demo-Website importieren“) oder auf der Konsole. In einer bestehenden Installation legst du die Demo mit einer eigenen Domain (--dns) oder Sprache (--language) daneben.

Alle Demos verwenden nur Core-Elemente, Creuva-Elemente und Templatevarianten und laufen deshalb unter Contao 5.7 und 6 gleich. Die Elemente sind demounabhängig: was eine Demo zeigt, kannst du auf jeder Creuva-Website nutzen.

Standard / Creative

• Seiten: Startseite, Leistungen (Webdesign, Entwicklung, Beratung), Projekte mit sechs Projektseiten, Über uns mit Team, Preise, News & Wissen mit FAQ und Downloads, Kontakt mit Danke-Seite, Impressum, Datenschutz, Zugänglichkeitserklärung, Sitemap, Suche und eine 404-Seite
• Module: Hauptnavigation, Header mit CTA und Suche, Footer mit vier Spalten und Social-Media-Links, News-Liste und -Leser, Sitemap, Suchmaschine
• Bildgrößen für jeden Platz im Layout (Logo, Hero, Karte, Bild & Text, Breit, Team, Avatar, News, Galerie) mit mehreren Breiten, WebP und verzögertem Laden
• News-Archiv mit drei Beiträgen (nur mit installiertem News-Bundle)
• Dateien unter files/creuva-demo/standard/ (Illustrationen, Icons, PDFs) mit Alt-Texten
• Favicon im Startpunkt sowie der Style-Switcher zum Ausprobieren der Farbschemen

Unternehmen

Klassische Firmenwebsite („Kessler Metalltechnik GmbH“, Light, Farbschema Ozean, eckig):

• Seiten: Startseite mit Kennzahlen, Leistungen und Branchen; Leistungen mit Maschinenpark; Branchenlösungen; Referenzen; Unternehmen mit Geschichte, Zertifikaten und Standorten; Karriere mit Stellenangeboten und Online-Bewerbung (Datei-Upload); Download-Center; Aktuelles; Kontakt mit Ansprechpartnern
• Stellenangebote sind Nachrichten im Archiv „Stellenangebote“ mit der Listenvorlage news_creuva_job (siehe News)
• Prozess-Schritte als Templatevariante der Beschreibungsliste

Portfolio / Studio

Für Fotografen, Architekten und Kreativstudios („Studio Lichtung“, Typografie Editorial, Farbschema Terracotta, kleine Ecken):

• Seiten: Startseite mit Vollbild-Hero, Arbeiten mit sechs Projektseiten, Bildarchiv (Masonry-Galerie mit Lightbox), Studio mit Team, Leistungen mit Preisen und FAQ, Journal, Kontakt
• Projektseiten: Vollbild-Hero, Projektdaten (Fakten), Text, je eine andere Galerie-Anordnung oder ein Slider mit Thumbnails und ein Link zum nächsten Projekt
• Bildkacheln (creuva_tile), Logoleiste und die Raster-Klasse „Versetzt“ (u-grid-offset)

Sportverein

Für Fußball- und Sportvereine („TSV Rotenbach 1921“, Light, Farbschema Rot, mittlere Ecken, Wappen als Logo):

• Seiten: Startseite mit nächstem Spiel und letztem Ergebnis, Mannschaften mit Trainingszeiten und Tabelle, Spielplan, Verein mit Vorstand und Sportpark, News, Sponsoren mit Paketen, Mitglied werden mit Online-Antrag und Beitrittserklärung (PDF)
• Spielplan und Ergebnisse sind Termine im Kalender „Spielplan“. Ihre Daten liegen relativ zum Tag des Imports, die nächsten Spiele sind also immer in der Zukunft.
• Inhaltselement „Spielpaarung“ und Tabellen-Klasse „Liga-Tabelle“ (u-table-league)

Styleguide

Der Styleguide zeigt alle Elemente, Templatevarianten, CSS-Klassen und Module des Themes auf einer Seite: Farben, Typografie, Buttons, Listen, Tabellen, Medien, Kennzahlen, Akkordeon, Hintergründe, Animationen, alle Formularfelder, Breadcrumb und News-Liste. Er ist unabhängig von den Demos und lässt sich jeder Creuva-Website hinzufügen – unter Layout › Creuva › Styleguide oder auf der Konsole:

vendor/bin/contao-console creuva:styleguide --root=1
vendor/bin/contao-console creuva:styleguide --root=1 --replace   # nach einem Theme-Update neu anlegen

• Seite „Styleguide“ (Alias styleguide) am Ende der Website, nicht in der Navigation, nicht im Suchindex und mit noindex,nofollow
• eigene Module, ein Formular und ein News-Archiv mit dem Präfix „Styleguide – “
• Dateien unter files/creuva-demo/styleguide/

Die Demos installieren den Styleguide gleich mit.

Zugänglichkeitserklärung

Jede Demo bringt die Seite zugaenglichkeitserklaerung mit, verlinkt im Footer. Jeder Abschnitt ist ein eigenes Text-Element; Abschnitte, die nicht auf jede Website passen (PDF-Dokumente, Videos, Karten, Drittanbieter, BFSG, Schlichtung …), sind ausgeblendet und lassen sich über das Augen-Symbol einblenden. --with-pages legt die Seite mit einem Platzhalter an.

Design

Das Aussehen stellst du im Seitenlayout unter Creuva-Design ein. Unter den Feldern zeigt eine Live-Vorschau Überschrift, Buttons und Boxen mit der aktuellen Auswahl.

Farbschemen

Jedes Schema besteht aus einer Primärfarbe (Buttons, dunkle Flächen, Links; tönt außerdem Hintergründe, Rahmen und Text) und einer Akzentfarbe (Akzente, Badges, Icons, Fokusrahmen). Alle Schemen erfüllen die WCAG-Kontraste (Text 4,5:1, große Schrift und Grafiken 3:1) in Light und Dark.

Den Schlüssel brauchst du für creuva:install --scheme=…, für die demo.yaml und für Links zum Style-Switcher.

Farbmodus „System“

Mit „Light oder Dark nach Systemeinstellung“ erscheint die Website hell oder dunkel, je nachdem, was im Betriebssystem bzw. Browser des Besuchers eingestellt ist, und wechselt mit, wenn sich die Einstellung ändert. Ein kleines Skript setzt den Modus vor dem ersten Rendern, die Seite blitzt also nicht auf. Ohne JavaScript bleibt sie hell.

Design pro Website

Im Startpunkt lassen sich Farbschema, Farbmodus, Typografie und Eckenradius unter „Creuva-Design“ zusätzlich festlegen. Diese Werte haben Vorrang vor dem Seitenlayout; ein Schema im Startpunkt ersetzt auch die eigenen Farben des Layouts. So können mehrere Websites ein Layout nutzen und trotzdem unterschiedlich aussehen.

Der Installer und die Demos lassen die Felder im Startpunkt leer („Wie im Seitenlayout“), damit Änderungen im Seitenlayout sofort sichtbar werden.

Animationen

• Die Klassen u-reveal-* legen die Richtung je Element fest und haben Vorrang; u-reveal-none nimmt ein Element oder einen ganzen Artikel aus.
• Inhalte, die beim Laden schon sichtbar sind, werden nie ausgeblendet; ohne JavaScript ist alles sofort sichtbar.
• Besucher mit der Systemeinstellung „Bewegung reduzieren“ sehen keine Animationen.
• Hover-Effekte (Karten heben sich, Bilder zoomen, Pfeile wandern mit) sind immer aktiv.

Dauer, Weg und Verzögerung kannst du per CSS anpassen:

:root {
  --reveal-duration: 0.6s;   /* Standard 0.8s */
  --reveal-distance: 1.5rem; /* Standard 2.5rem */
  --reveal-stagger: 60ms;    /* Verzögerung je Element im Raster */
  --hover-lift: -4px;        /* Anheben von Karten beim Hover */
}

Schriften

Plus Jakarta Sans und Fraunces werden mit dem Theme ausgeliefert und selbst gehostet, es gibt also keine Anfragen an Google. Fraunces lädt der Browser nur, wenn die Typografie „Editorial“ gewählt ist.

Elemente und Module

Creuva bringt eigene Inhaltselemente und Module mit und gestaltet die Contao-Standardelemente. Wie alles zusammen aussieht, zeigt der Styleguide.

Inhaltselemente

Hero

Das Bild des Heros gibt es in mehreren Formen:

• Organisch – Bild mit organischer Maske
• Abgerundet – ganzes Bild mit Schatten und Akzentform dahinter
• Bild unverändert
• Bild unverändert mit Akzentform – ohne Schatten und Beschnitt, ideal für freigestellte Bilder mit transparentem Hintergrund
• Vollbild (Text auf dem Bild) – Hero über die volle Breite, auf Smartphones hochkant

Das Badge erscheint als kleine Karte mit Häkchen, eine Zeile pro Punkt. Bild und Text sind optional.

Logoleiste

Die Logos verlinkst du über die Metadaten der Dateien (Feld „Link“). Im Dark Mode stehen die Logos auf einer hellen Fläche, damit dunkle und farbige Logos lesbar bleiben. Ausnahmen sind der Hintergrund „Primärfarbe“ und die Klasse u-logos-original, beide für weiße Logos. Die Logoleiste gibt es auch als Modul, z. B. für den Bereich prefooter über dem Footer.

Spielpaarung

Ohne Ergebnis zeigt das Element die Anstoßzeit (nächstes Spiel), mit Ergebnis den Endstand. Dazu passt die Tabellen-Klasse „Liga-Tabelle“ (u-table-league): kompakte Tabelle mit zentrierten Zahlen; die eigene Mannschaft wird hervorgehoben, wenn sie in der Tabelle fett ist.

Module

Ein Kontaktbereich über die volle Breite unter den Footer-Spalten ist ein HTML-Modul mit der Klasse c-footer-contact im Bereich footer (Beispiel in der Standard-Demo).

Gestaltete Standardelemente

Gestaltet werden außerdem:

• die Contao-Standardelemente: Text, Liste, Beschreibungsliste, Tabelle, Bild, Galerie, Content-Slider, Akkordeon, Downloads (mit Dateityp und Größe, z. B. „PDF · 245 KB“), Hyperlink, Code, Toplink, Formulare, Breadcrumb, Suche
• die News-Module (Liste als Karten, Leser, Archivmenü, Seitenzahlen)
• Events (Liste mit Datums-Badge, Leser, Monats- und Minikalender, Menü), FAQ, Newsletter, Kommentare und Listing
• die Elemente des Theme Components Bundles 2.0: Contentbox, Teaserbox, Preisbox, Feature-Element, Simplebox, Icon-Tile, Modal
• Auswahlfelder in Formularen, ohne JavaScript

Akkordeon

Jeder Eintrag ist eine Karte mit einem runden Plus/Minus-Schalter. Ein Icon vor der Frage ergänzt du mit einer Klasse am Akkordeon-Element: u-accordion-icon (Fragezeichen), u-accordion-info oder u-accordion-chat. Ein eigenes Icon geht per CSS, siehe Eigenes CSS.

Abschnitte mit Hintergrund

Die Hintergrundklassen (u-bg-muted, u-bg-accent, u-bg-primary) kannst du auch im Artikel auswählen – der Artikel wird dann zum Abschnitt mit Hintergrund über die volle Breite.

Jeder Artikel hat oben und unten einen Abschnittsabstand. Folgen zwei Artikel ohne oder mit demselben Hintergrund aufeinander, entfällt der obere Abstand des zweiten, damit er sich nicht verdoppelt. Einzelne Artikel passt du im CSS Style Selector unter Abstände an.

Themen

• Templatevarianten
• Überschriften und Text
• Slider und Galerien
• News und Termine

CSS-Klassen

Alle Creuva-Klassen stehen im CSS Style Selector als Stile bereit, im Bereich CSS-Stil von Inhaltselementen, Artikeln und Modulen. Du musst dir also keine Klassennamen merken, sondern wählst sie aus.

Kategorien und Gruppen

Die Klassen sind in Kategorien (z. B. Abstände) und darin in Gruppen (z. B. Innenabstand oben und unten) sortiert. Jede Gruppe erscheint im Element als Auswahlfeld mit genau einem Stil. Ein Element zeigt nur die Gruppen, die zu seinem Typ passen – Raster etwa nur bei Elementgruppen, Buttons nur bei Hyperlink- und Text-Elementen.

Kategorien und Gruppen sind normale Datensätze. Unter Layout › CSS Stile kannst du sie ändern, per Drag & Drop sortieren und eigene Kategorien und Gruppen ergänzen. Bereiche und Elementtypen gelten jeweils für die ganze Gruppe.

Klassen importieren

Die Vorlage importiert

• creuva:install automatisch,
• contao:migrate einmalig bei bestehenden Websites, solange noch keine Creuva-Gruppe existiert,
• nach einem Theme-Update mit neuen Klassen dieser Befehl:

vendor/bin/contao-console creuva:css-styles

Der Import ergänzt nur, was fehlt. Deine Änderungen im Backend – Titel, Elementtypen, entfernte Stile, eigene Kategorien und Gruppen – bleiben erhalten.

Umstieg vom Style Manager

Die Klassen stehen weiterhin im Feld CSS-Klasse, das Frontend bleibt also unverändert. Nach dem Update legt contao:migrate die Creuva-Gruppen an und überträgt die Auswahl. Eigene Style-Manager-Gruppen legst du als CSS-Stile neu an. Danach kannst du die Tabellen tl_style_manager_archive und tl_style_manager sowie die Spalten styleManager löschen.

Übersicht der Klassen

Farben des Elements

Karten, Icon-Boxen, Kundenstimmen, Preis-Karten und die Boxen des Theme Components Bundles bekommen eine Fläche (Weiß, Grau, Akzent hell, Haupt- oder Akzentfarbe) oder nur einen farbigen Rahmen. Auf dunklen Flächen wechseln Text, Links und Dachzeilen automatisch in die Kontrastfarbe.

Den Kreis hinter dem Icon einer Icon-Box stellst du separat ein. Bei Haupt- und Akzentfarbe wird das Icon weiß; das funktioniert mit einfarbigen SVG-Icons. SVG-Icons werden im Farbschema eingefärbt, mit u-icon-original behalten sie die Farben der Datei (z. B. mehrfarbige Icons). PNG- und JPG-Bilder behalten immer ihre Farben.

Bei den Kennzahlen gilt die Auswahl für jede einzelne Zahl. Ohne Auswahl haben sie nur auf dunklem Hintergrund eine leichte Fläche, mit u-card-none auch dort keine.

Technisch setzen die Klassen nur CSS-Variablen (--card-bg, --card-border, --icon-bg …), die alle Karten lesen – siehe Eigenes CSS.

Suche und SEO

Suche

Der Creuva Header zeigt optional eine Lupe (Feld Suche im Header, Legende Suche). Sie öffnet ein Suchfeld über der Seite – auch mit Strg+K (⌘+K) oder / – und schickt die Suchbegriffe an die gewählte Suchergebnisseite. Ohne Häkchen erscheint keine Lupe.

Auf der Ergebnisseite liegt das Core-Modul Suchmaschine. Creuva gestaltet es mit eigenen Templates: großes Suchfeld, Treffer als Karten mit Seitenpfad, hervorgehobenen Suchbegriffen und optionalem Bild sowie Tipps, wenn nichts gefunden wurde.

creuva:install --with-pages und die Demos legen die Seite „Suche“ an (versteckt, noindex, nicht im Suchindex) und aktivieren die Suche im Header. In einer eigenen Demo-Definition genügt header: { search: suche } (Alias der Ergebnisseite).

Das Seitenlayout nimmt nur den Bereich main in den Suchindex auf. Header, Footer und Copyright erscheinen deshalb nicht in den Suchergebnissen.

vendor/bin/contao-console contao:crawl

Suchmaschinen und Linkvorschau

Das Creuva-Layout gibt auf allen indexierbaren Seiten Open-Graph-Tags und twitter:card aus: Titel, Beschreibung, Adresse (wie im Canonical-Link, ohne Tracking-Parameter), Sprache (og:locale, z. B. de_DE) und ein Vorschaubild mit 1200 × 630 px.

Als Vorschaubild nimmt das Layout, in dieser Reihenfolge:

1. auf Seiten mit Nachrichtenleser das Bild des Beitrags – der Beitrag erscheint dann als og:type „article“ mit Veröffentlichungs- und Änderungsdatum
2. das erste Hero-, Bild- oder andere Element mit Bild im Hauptbereich, auch innerhalb von Elementgruppen
3. das Vorschaubild für soziale Netzwerke im Startpunkt (Metadaten, Feld creuvaOgImage)

SVG-Dateien werden übersprungen, WebP, AVIF und GIF als PNG ausgegeben, JPEG bleibt JPEG. Kleinere Bilder werden nicht vergrößert.

Canonical

Startpunkte, die creuva:install anlegt, haben das Canonical-Tag aktiviert. Bei bestehenden Websites schaltest du es im Startpunkt ein. Der Styleguide steht auf noindex,nofollow.

Update

Creuva aktualisierst du wie jedes Contao-Bundle über den Contao Manager oder per Composer:

composer update pdir/creuva-theme-bundle

Führe danach die Datenbank-Migrationen aus – im Contao Manager über Datenbank aktualisieren oder in der Konsole:

vendor/bin/contao-console contao:migrate

Die Migrationen übernehmen Anpassungen an Seitenlayout, CSS-Stilen und Einstellungen. Deine Inhalte und das Design aus dem Startpunkt bleiben erhalten.

Nach dem Update

Je nach Update sind diese Schritte sinnvoll:

creuva:css-styles ergänzt nur fehlende Kategorien, Gruppen und Stile. Änderungen, die du im Backend gemacht hast, bleiben erhalten. Die Option --root gibt die ID des Startpunkts an, unter dem der Styleguide liegt.

Was sich in einer Version geändert hat, steht im Changelog auf GitHub.

Probleme

Sollten bei der Installation oder Einrichtung Probleme aufgetreten sein oder du hast einen Fehler bei der Darstellung des Themes in einem bestimmten Browser festgestellt, dann erstelle bitte ein neues Ticket oder schreib uns an support@pdir.dev.

Übersicht Tickets Neues Ticket erstellen

Bekannte Einschränkungen

# 1 Barrierefreiheits-Werkzeuge und Animationen des Theme Components Bundles wirken nicht

Die Barrierefreiheits-Werkzeuge (Kontrast, Schriftgröße) und die Animationen beim Scrollen des Theme Components Bundles nutzen die Hooks generatePage bzw. parseFrontendTemplate. Diese führt Contao bei Seitenlayouts vom Typ „Modern“ nicht aus. Die Einstellungen im Startpunkt haben im Creuva-Layout deshalb keine Wirkung.

Creuva bringt eigene Animationen mit, siehe Animationen.

# 2 Icons und Downloads der Demo fehlen unter Windows

Die Demo-Dateien (SVG-Icons, PDFs) werden direkt aus files/creuva-demo/ geladen und brauchen den Symlink public/files/creuva-demo (contao:symlinks). Unter Windows schlägt das ohne Administratorrechte bzw. Entwicklermodus fehl.

Für die lokale Entwicklung hilft eine Verzeichnis-Junction:

mklink /J public\files\creuva-demo files\creuva-demo

creuva:install --reset und contao:symlinks kommen mit einer vorhandenen Junction nicht zurecht und brechen ab. Entferne die Junction vorher mit rmdir public\files\creuva-demo (das löscht nur den Link).