LASR 5 Theme individualisieren

Mit LASR 5 wird auch die neue Version der Theme Toolbox installiert, die einen eigenen Theme Editor mitbringt. Der Theme Editor ist das zentrale Werkzeug, um das Theme an dein Projekt anzupassen.

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

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

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.

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.

Erste Anpassungen vornehmen

1. Hauptfarben anpassen

Um die Hauptfarben des Themes zu ändern, öffnest du die _variables.scss. Dort findest du eine Vielzahl von Variablen, unter anderem für die Farbzuweisung. Die Farben für das LASR-Theme sind wie folgt definiert:

--color-white: #fff;
--color-gray-dark: #090727;
--color-gray: #46465d;
--color-gray-light: #f0f0f0;
--color-gray-lighter: #f2f2f2;
--color-gray-lightest: #f9f9f9;
--color-blue-darker: color-mix(in srgb, var(--color-blue), black 60%);
--color-blue-dark: color-mix(in srgb, var(--color-blue), black 20%);
--color-blue: hsl(206deg, 72%, 47%);
--color-blue-light: color-mix(in srgb, var(--color-blue), white 20%);
--color-blue-lighter: color-mix(in srgb, var(--color-blue), #777 80%);

--color-tint: var(--color-gray-light);
--color-brand-primary-light: var(--color-blue-light);
--color-brand-primary: var(--color-blue);
--color-brand-primary-dark: var(--color-blue-dark);
--color-brand-primary-darker: var(--color-blue-darker);
--color-brand-secondary: var(--color-blue-darker);
--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. Dieser wurde die Variable --color-blue zugewiesen, der wiederum weiter oben ein Blauton als HSL-Wert zugewiesen wurde. Um die Hauptfarbe zu ändern, ersetzt du

--color-brand-primary: var(--color-blue);

durch eine eigene Variable:

--color-brand-primary: var(--color-red);

oder einen 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 generiert per color-mix() automatisch dunklere und hellere Farbvarianten – z.B. für Hover-Status bei Links. Auch die Sekundärfarbe ist eine Variante der Hauptfarbe. 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.

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.