Eigenes CSS und Templates

Eigene Stylesheets

Lege eine CSS-Datei in der Dateiverwaltung an, z. B. files/design/custom.css, und wähle sie im Seitenlayout unter Creuva-Design › Eigene Stylesheets aus. Sie wird nach dem Creuva-CSS geladen, mit dem Änderungszeitpunkt als Cache-Busting. Der Ordner muss öffentlich sein.

Alle Creuva-Styles liegen in CSS-Cascade-Layern (creuva.*). Deine eigenen Styles ohne Layer haben dadurch immer Vorrang – ohne !important und ohne lange Selektoren.

Farben, Abstände und Rundungen

Farben, Abstände und Typografie sind CSS-Variablen und lassen sich einfach überschreiben:

:root {
  --scheme-primary: #123456; /* Primärfarbe inkl. getönter Hintergründe */
  --radius-l: 0.75rem;
}

Für eigene Primär- und Akzentfarben reicht meist das Seitenlayout (siehe Design).

Akkordeon mit eigenem Icon

Vergib dem Akkordeon die Klasse u-accordion-icon und zusätzlich eine eigene Klasse, und setze das Icon per CSS:

.content-accordion.mein-icon {
  --accordion-icon-mask: url("/files/icons/paket.svg");
}

Templates anpassen

Alle Templates sind Twig-Templates und lassen sich wie gewohnt im Ordner templates/ überschreiben, z. B. templates/content_element/creuva_hero.html.twig:

{% extends '@Contao/content_element/creuva_hero.html.twig' %}

Druck

Gedruckt wird nur der Inhalt in Schwarz auf Weiß, ohne Header, Footer, Breadcrumb, Slider-Steuerung und Hintergründe. Links im Text erscheinen mit ihrer Adresse, Akkordeons sind aufgeklappt, Karten und Bilder werden nicht über Seiten getrennt.