LASR 5 Theme individualisieren

Mit LASR 5 wird auch die neue Version der Theme Toolbox installiert. Sie bringt zwei Werkzeuge mit, um das Theme an dein Projekt anzupassen:

• den Live-Editor im Frontend – für Farben, Schriften, Abstände und Form, direkt auf der echten Seite
• den Theme Editor im Backend – das zentrale Werkzeug für alles darüber hinaus

Mit dem Theme Editor lassen sich

• eigene Varianten von SCSS- und JavaScript-Dateien anlegen
• Icons und Bilder als eigene Varianten ersetzen oder erweitern
• Webfonts aus dem Google-Webfont-Katalog auswählen oder manuell hochladen und installieren

Wo liegen die Theme-Dateien?

Mit LASR 5 hat sich die Verzeichnisstruktur geändert:

Ordner	Inhalt
layout/lasr-theme/	Originaldateien des Themes – nicht direkt bearbeiten, werden bei Updates überschrieben
layout/custom/	Eigene Varianten und projektspezifische Anpassungen – bleiben bei Updates erhalten
assets/nutshell/	Nutshell Framework – die Basis aller unserer Themes, wird über Composer installiert und aktualisiert – nicht bearbeiten

Anpassungen werden also nicht in layout/lasr-theme/ vorgenommen, sondern als Variante unter layout/custom/ abgelegt. Sowohl der Live-Editor als auch der Theme Editor übernehmen das Anlegen der Varianten automatisch.

Auch im Ordner assets/nutshell/ solltest du keine Änderungen vornehmen – sie würden beim nächsten Update überschrieben. Werte aus dem Nutshell Framework überschreibst du stattdessen über die _variables.scss und die _config.scss des Themes (siehe Abschnitt Variablen und Konfiguration).

Der Live-Editor

Der Live-Editor bearbeitet die Design-Token des Themes – Farben, Typografie, Abstände und Form – als Overlay direkt auf der echten Seite, mit sofortiger Vorschau.

Einschalten

Der Live-Editor ist ein Werkzeug für die Design-Phase und standardmäßig ausgeschaltet. Du aktivierst ihn in der Contao-Systemwartung über den Schalter „Frontend-Editor anzeigen". Ist die Gestaltung abgeschlossen, schaltest du ihn dort wieder aus.

Solange er aktiviert ist, erscheint für eingeloggte Backend-Benutzer:innen auf jeder Frontend-Seite unten mittig die Dock-Pille „Theme bearbeiten". Für Besucher:innen ohne Login bleibt das Frontend unberührt.

Vorlagen: die LASR-Farbwelten

Am schnellsten kommst du über den Tab Vorlagen zu einem Ergebnis. Neben dem Standard-Look in Blau mit Rubik und Raleway bringt LASR 5 vier fertige Vorlagen mit:

Vorlage	Beschreibung	Schriften	Eckenradius
Anthrazit	Ruhig & sachlich – Anthrazit mit goldenem Akzent	Inter	8px
Bordeaux	Etabliert & seriös – Weinrot in zwei Tönen	Inter, Playfair Display für Überschriften	4px
Smaragd	Frisch & grün – Smaragdgrün mit orangem Akzent	Nunito	14px
Veilchen	Dunkel & elegant – Violett mit pinkem Akzent	Standardschriften	12px

Ein Klick setzt Primär- und Sekundärfarbe, Textfarbe, Seitenhintergrund, den Eckenradius und – je nach Vorlage – die Schriften. Anschließend kannst du in der Maske weiter nachjustieren.

Was sich einstellen lässt

Die Maske wird aus einer Token-Registry erzeugt. LASR liefert dazu eine eigene tokens.json mit, die die Basis-Registry der Theme Toolbox ergänzt. Standardmäßig siehst du die wichtigsten Token:

• Primärfarbe (--color-brand-primary) und Sekundärfarbe (--color-brand-secondary)
• Textfarbe, Seitenhintergrund und Rahmenfarbe
• Basisschrift (--base-font-family-1), Überschriften-Schrift (--base-font-family-2) und Basis-Schriftgröße
• Basis-Abstand (--base-spacing-unit)
• Eckenradius und Rahmenstärke

Über „Erweiterte Einstellungen anzeigen" blendest du weitere Token ein, z.B. Link- und Button-Hover, Zeilenhöhe, Spaltenabstand und Button-Radius.

Bewusst nicht editierbar sind die Variablen, die in LASR von anderen erben: --color-brand folgt der Primärfarbe, --base-font-family und --headings-font-family folgen den beiden Schrift-Variablen --base-font-family-1 und --base-font-family-2. So bleibt das System in sich stimmig.

Speichern

Während des Gestaltens werden die Werte nur zur Laufzeit als CSS Custom Properties ins :root geschrieben – es ist also noch nichts gespeichert. Erst „Übernehmen" schreibt server-seitig.

Dabei ersetzt der Editor die geänderten Variablen direkt an Ort und Stelle in deiner Custom-_variables.scss – genau so, wie du es von Hand tun würdest. Nur tatsächlich geänderte Werte werden geschrieben, unberührte Token behalten ihren Ausdruck. Danach wird das Theme neu kompiliert.

Das hat einen angenehmen Nebeneffekt: Deine Gestaltung ist Teil der Theme-Quelle – sichtbar, reviewbar und deploybar. Rückgängig machen lässt sie sich im Backend über Theme-Toolbox » Theme Editor » Styles (Diff und „Original wiederherstellen").

Eingehende Werte werden gegen die Registry geprüft – unbekannte Properties werden verworfen, Werte auf ihren erlaubten Bereich geklemmt und auf ausreichenden Kontrast abgesichert.

Schriften im Live-Editor

Der Font-Picker nutzt dieselbe Google-Fonts-Funktion wie der Theme Editor: Die Schrift wird einmalig server-seitig heruntergeladen, self-hosted abgelegt und per @font-face registriert. Der Browser deiner Besucher:innen lädt ausschließlich die lokale Datei – es entsteht kein Google-Request im Frontend und damit kein DSGVO-Problem.

Theme-Anpassungen über den Theme Editor

Du erreichst den Theme Editor im Backend unter Theme-Toolbox » Theme Editor.

In der Dateibaum-Ansicht erkennst du sofort, welche Dateien projektspezifisch angepasst sind:

• Fett gedruckt mit Sternchen (*) = Variante – die Datei weicht vom Original ab und wird aus layout/custom/ geladen
• Normale Schrift = unveränderte Originaldatei aus layout/lasr-theme/

Wenn du eine Datei öffnest, kannst du:

• den Inhalt direkt im Editor bearbeiten
• über Unterschiede anzeigen den Diff zwischen Original und Variante einsehen
• über Original wiederherstellen die Variante entfernen, sodass wieder die Originaldatei verwendet wird

Hinweis: Änderungen im Theme Editor sind unmittelbar im Frontend sichtbar. Du musst weder den Cache leeren, noch unter Systemwartung die Option „Skript Cache umgehen (im Produktivbetrieb)" aktivieren. Das übernimmt die Theme Toolbox automatisch.

Die zentrale Datei für die Anpassung ist weiterhin die _variables.scss. Viele Einstellungen lassen sich bereits über Variablen anpassen. Solltest du an einer Stelle mit den Variablen nicht mehr weiterkommen, kannst du bestehende Anweisungen überschreiben oder eigene hinzufügen.

Eigene SCSS-Dateien hinzufügen

Für eigene Komponenten – z.B. ein Modal – legst du im Theme Editor einfach eine neue SCSS-Datei an, etwa components/_modal.scss. Anschließend ergänzt du sie in der default.scss:

// COMPONENTS
// …
@import 'components/text';
@import 'components/modal';

Sowohl deine neue Datei als auch die geänderte default.scss werden unter layout/custom/ gespeichert. Die Theme Toolbox sucht jede importierte Datei zuerst dort und erst danach im Original – deshalb reicht der Pfad relativ zum SCSS-Ordner.

Wichtig: Sobald eine Variante der default.scss existiert, verwendet die Toolbox nur noch diese. Bringt ein Theme-Update neue Dateien mit, die in der Original-default.scss importiert werden, musst du sie in deiner Variante nachtragen. Über Unterschiede anzeigen siehst du nach einem Update schnell, was sich geändert hat.

Alternative: Direkt im Code-Editor

Wenn dir der Theme Editor nicht zusagt, kannst du sämtliche Anpassungen auch direkt auf Dateiebene unter layout/custom/ mit deinem Code-Editor deiner Wahl vornehmen. Auch dann sind die Änderungen unmittelbar im Frontend sichtbar.

Variablen und Konfiguration

Das Aussehen von LASR wird im Wesentlichen über zwei Dateien gesteuert:

Datei	Inhalt
_variables.scss	CSS Custom Properties (CSS-Variablen) für Farben, Schriften, Abstände, Größen usw. Sie wirken zur Laufzeit im Browser – genau diese Werte bearbeitet auch der Live-Editor.
_config.scss	Sass-Variablen, die beim Kompilieren ausgewertet werden, z.B. die maximale Seitenbreite und die Breakpoints

Die _config.scss

In der _config.scss legt LASR unter anderem diese Werte fest:

$wrapper-max: 72em;

$additional_breakpoints: (
  menu: (
    min: 52em,
    max: (
      52em - 0.0625em,
    ),
  ),
);

• $wrapper-max – die maximale Breite des Inhaltsbereichs
• $additional_breakpoints – zusätzliche Breakpoints. LASR definiert hier den Breakpoint menu: Ab 52em wird die Hauptnavigation nebeneinander statt als mobiles Menü dargestellt. Hat dein Menü viele Punkte, kannst du den Wert erhöhen. Für den Breakpoint werden außerdem eigene Grid-Klassen erzeugt.

Variablen aus dem Nutshell Framework überschreiben

LASR basiert auf dem Nutshell Framework, das viele weitere Variablen definiert. Beide Dateien sind so aufgebaut, dass du jede Nutshell-Variable im Theme überschreiben kannst – ohne assets/nutshell/ anzufassen:

• Sass-Variablen: Die _config.scss setzt zuerst die LASR-Werte und importiert am Ende die Nutshell-Konfiguration. Dort sind alle Werte mit !default definiert und greifen nur, wenn das Theme sie nicht bereits gesetzt hat. Genau so überschreibt LASR z.B. $wrapper-max (in Nutshell 66.625em) und den Breakpoint menu (in Nutshell 48em). Eigene Werte ergänzt du deshalb immer oberhalb des @import am Ende der Datei.
• Custom Properties: Die _variables.scss importiert zuerst die Nutshell-Variablen und überschreibt sie anschließend im :root-Block. Möchtest du eine Nutshell-Variable ändern, die LASR bisher nicht anpasst, ergänzt du sie einfach im :root-Block deiner _variables.scss.

Welche Variablen es gibt, siehst du in assets/nutshell/scss/_config.scss und assets/nutshell/scss/_variables.scss – nur zum Nachschlagen, nicht zum Bearbeiten.

Erste Anpassungen vornehmen

1. Hauptfarben anpassen

Um die Hauptfarben des Themes zu ändern, öffnest du die _variables.scss. Im Abschnitt GENERAL/COLORS findest du die Farbzuweisungen. In LASR sind sie wie folgt definiert:

// GENERAL/COLORS
--color-white: #fff;
--color-gray-dark: #090727;
--color-gray: #46465d;
--color-gray-light: #f0f0f0;
--color-gray-lighter: #f2f2f2;
--color-gray-lightest: #f9f9f9;

// BRAND COLORS
--color-brand-primary: hsl(206deg, 72%, 47%);
--color-brand-primary-light: color-mix(in srgb, var(--color-brand-primary), white 20%);
--color-brand-primary-dark: color-mix(in srgb, var(--color-brand-primary), black 20%);
--color-brand-primary-darker: color-mix(in srgb, var(--color-brand-primary), black 50%);
--color-brand-secondary: var(--color-brand-primary-darker);

// COLOR TRANSLATIONS
--color-tint: var(--color-gray-light);
--color-brand: var(--color-brand-primary);
--color-highlight: var(--color-brand);
--color-text: var(--color-gray-dark);
--color-text-light: var(--color-gray);
--color-text-inverted: var(--color-white);

Die Hauptfarbe heißt --color-brand-primary. Ihr ist direkt ein Blauton als HSL-Wert zugewiesen. Um die Hauptfarbe zu ändern, ersetzt du

--color-brand-primary: hsl(206deg, 72%, 47%);

durch einen eigenen Farbwert:

--color-brand-primary: #e30613;

Nun sollte an jeder Stelle, an der vorher das Blau zu sehen war, der neue Farbton erscheinen.

Wichtig: Das LASR-Theme leitet aus der Hauptfarbe per color-mix() automatisch hellere und dunklere Varianten ab (--color-brand-primary-light, --color-brand-primary-dark und --color-brand-primary-darker) – z.B. für Hover-Status bei Links. Auch die Sekundärfarbe --color-brand-secondary ist standardmäßig eine dieser Varianten und ändert sich deshalb mit. Möchtest du eine eigenständige Sekundärfarbe, weist du ihr einfach einen eigenen Farbwert zu. Unter Umständen musst du die Varianten anpassen, damit ausreichende Kontrastverhältnisse weiterhin sichergestellt sind.

2. Hintergrundfarbe anpassen

Möchtest du eine Hintergrundfarbe unabhängig von der Hauptfarbe ändern, findest du weiter unten in der _variables.scss den Abschnitt BASE/ARTICLE:

// BASE/ARTICLE
--article-highlight-background: var(--color-highlight);
--article-highlight-color: var(--color-text-inverted);
--article-tint-background: var(--color-tint);
--article-dark-background: var(--color-gray-dark);
--article-dark-color: var(--color-text-inverted);

Diese Variablen werden in base/_article.scss verwendet und geben dir die Möglichkeit, Artikel farbig zu hinterlegen. Standardmäßig hat zum Beispiel der Bereich Newsletter-Anmeldung in der Demo einen blauen Hintergrund. Dieser kommt zustande, weil der Artikel die Klasse article--highlight trägt und in der Klasse der Wert der Variable --article-highlight-background verwendet wird.

Möchtest du also die Hintergrundfarbe unabhängig von der Hauptfarbe ändern, reicht es, die Variable --article-highlight-background zu überschreiben, z.B. so:

--article-highlight-background: #f94300;

Du kannst auch eine andere Variable verwenden (z.B. --color-gray-dark) oder eine eigene Variable festlegen. Solltest du mit der Anpassung der Variablen nicht ans Ziel kommen, hast du immer noch die Möglichkeit, in der _article.scss direkt Anpassungen vorzunehmen.

3. Schriften anpassen

In der LASR-Demo verwenden wir standardmäßig die Rubik für Fließtexte und die Raleway für Überschriften. Die Schriften werden lokal vom eigenen Server geladen.

Der Theme Editor bietet einen eigenen Bereich für Webfonts mit zwei Wegen, Schriften einzubinden:

Variante A: Aus dem Google-Webfont-Katalog installieren

Im Theme Editor lässt sich der Google-Webfont-Katalog direkt durchsuchen. Mit zwei Klicks wird die gewünschte Schrift installiert – die Theme Toolbox lädt die Font-Dateien automatisch lokal auf den Server, sodass keine Verbindung zu Google-Servern aufgebaut wird (DSGVO-konform).

Variante B: Eigene Webfonts manuell hochladen

Über einen Link oben rechts im Webfont-Bereich lassen sich eigene Webfont-Dateien hochladen – z.B. lizenzierte Schriften aus deinem Bestand.

Schriftart in den Variablen aktivieren

In beiden Fällen muss anschließend nur noch in der _variables.scss der Name der Schriftart angepasst werden, um sie auch tatsächlich zu verwenden:

--base-font-family-1: 'Rubik', 'Helvetica Neue', arial, sans-serif;
--base-font-family-2: 'Raleway', 'Helvetica Neue', sans-serif;
--base-font-family: var(--base-font-family-1);

Die Variable --base-font-family-1 ist der Schriftart Rubik zugeordnet. Sie dient als Basis-Schriftart (--base-font-family) und wird standardmäßig auf der Website verwendet, wenn sie nicht durch andere Schriften überschrieben wird.

Die Variable --base-font-family-2 ist der Schriftart Raleway zugeordnet. Sie wird weiter unten in der _variables.scss den Überschriften zugewiesen:

// BASE/TYPE
--headings-font-family: var(--base-font-family-2);

Ersetze einfach 'Rubik' bzw. 'Raleway' durch den Namen deiner installierten Schriftart, und sie wird im Frontend verwendet.

4. Icons und Bilder ersetzen

Im Theme Editor gibt es einen eigenen Tab Bilder, in dem sämtliche Bilder und Icons des Themes verwaltet werden.

Du hast dort zwei Möglichkeiten:

• Bestehende Icons 1:1 ersetzen – z.B. um das Standard-Logo durch dein Kundenlogo auszutauschen oder Icons an die Bildsprache deines Projekts anzupassen. Die ersetzten Dateien behalten ihren Dateinamen und werden automatisch überall im Theme verwendet.
• Zusätzliche Bilder und Icons hochladen – die du anschließend in eigenen Templates oder SCSS-Anpassungen referenzieren kannst.

5. Eigene JavaScript-Varianten

Wie bei den SCSS-Dateien lassen sich auch JavaScript-Dateien als Variante anlegen. Die Theme Toolbox verwendet dann automatisch deine Variante aus layout/custom/ statt der Originaldatei aus layout/lasr-theme/.

Zusätzlich kannst du eigene Skripte hochladen und im Seitenlayout einbinden – z.B. für projektspezifische Funktionen, die nicht zum Standardumfang des Themes gehören.

Templates anpassen mit dem Template Studio

LASR 5 verwendet primär Twig-Templates. Anpassungen erfolgen nicht mehr über templates/*.html5, sondern über das Template Studio im Contao-Backend (verfügbar ab Contao 5.7).

So gehst du vor:

1. Öffne im Backend Layout » Template Studio.
2. Suche das Template, das du anpassen möchtest (z.B. ein Element-Template).
3. Lege eine projektspezifische Kopie an und passe sie im Template Studio an.

Hinweis zur Übergangszeit: Wenn du aus einem LASR-4-Projekt kommst und noch eigene .html5-Templates im templates/-Ordner hast, funktionieren diese zunächst weiter – Contao 5.7 zieht ein vorhandenes .html5-Template einem gleichnamigen Twig-Template vor. Möchtest du ein neues Twig-Template testen, das den gleichen Namen wie ein altes .html5-Template hat, musst du die alte .html5-Datei vorher umbenennen (z.B. in mod_navigation.html5.bak). Sonst greift das Twig-Pendant nicht.

Welche Templates LASR selbst mitbringt und was darin geändert ist, steht unter Angepasste Templates. Eine Einführung in Twig-Templates für Contao findest du in der offiziellen Contao-Dokumentation.

Hilfsklassen verwenden

Tipp: LASR enthält standardmäßig eine eigene Dokumentation (sofern die Demo installiert wurde). Sie ist über den seitlichen Link Dokumentation zu erreichen, wo auch die Hilfsklassen gezeigt werden.

Klassen für Abstände

Standardmäßig haben alle im Theme gestalteten Elemente und Module einen Abstand, der auf der --base-spacing-unit basiert. Auch Artikel (.mod_article) haben standardmäßig einen Abstand nach oben und unten.

Je nach Inhalt und Layout möchtest du Abstände vergrößern oder verkleinern. In LASR 5 sind die Hilfsklassen bereits über die Theme Toolbox 4 definiert, d.h. du kannst sie direkt in den Inhaltselementen auswählen.

Abstände lassen sich über folgende Klassen realisieren:

• m-t-0 bis m-t-5 (Außenabstand oben 0 bis 5)
• m-b-0 bis m-b-5 (Außenabstand unten 0 bis 5)
• p-t-0 bis p-t-5 (Innenabstand oben 0 bis 5)
• p-b-0 bis p-b-5 (Innenabstand unten 0 bis 5)

Die Abstände basieren auf der --base-spacing-unit und werden mit dem jeweiligen Wert multipliziert. Also ist p-t-1 = (--base-spacing-unit * 1) und p-t-5 = (--base-spacing-unit * 5).

Diese Klassen kannst du sowohl für Artikel als auch für Elemente und Module verwenden. Wir empfehlen, Innenabstände vor allem für Artikel und Außenabstände vor allem für Elemente zu verwenden.

Klassen für Artikel

In den Artikeleinstellungen kannst du weitere Klassen hinzufügen und so das Aussehen des Artikels anpassen. Mit folgenden Klassen, die ebenfalls in der Theme Toolbox hinterlegt sind, beeinflusst du die Hintergrund- und Textfarbe:

• Hero-Artikel: .article--hero
• Artikel hell: .article--tint
• Artikel dunkel: .article--dark
• Artikel Highlightfarbe: .article--highlight

Mit der Klasse .article--hero kannst du die standardmäßig vorhandenen Abstände links und rechts entfernen, sodass der Inhalt über die komplette Breite geht.