SOLO 4 Theme individualisieren

Mit SOLO 4 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 SOLO 4 hat sich die Verzeichnisstruktur geändert:

Ordner	Inhalt
layout/solo-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/solo-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/solo-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. Im Abschnitt GENERAL/COLORS findest du die Farbzuweisungen. In SOLO sind sie wie folgt definiert:

// GENERAL/COLORS
--color-gold: #e4a943;
--color-gold-dark: color-mix(in srgb, var(--color-gold), 20% black);
--color-gray-dark: #111;
--color-gray: #555;
--color-gray-light: color-mix(in srgb, var(--color-gray-dark), 90% transparent);
--color-tint: var(--color-gray-light);
--color-brand: var(--color-gold);
--color-brand-dark: var(--color-gold-dark);
--color-brand-primary: var(--color-brand);
--color-highlight: var(--color-brand-dark);
--color-page-background: #fff;
--color-text: var(--color-gray-dark);

Die Hauptfarbe heißt --color-brand. Ihr wurde die Variable --color-gold zugewiesen, der wiederum oben ein Goldton als HEX-Wert zugewiesen wurde. Um die Hauptfarbe zu ändern, ersetzt du

--color-brand: var(--color-gold);

durch eine eigene Variable:

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

oder einen Farbwert:

--color-brand: #2283ce;

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

Wichtig: Das SOLO-Theme leitet aus der Hauptfarbe per color-mix() automatisch Varianten ab – z.B. --color-brand-dark für Hover-Status bei Buttons und Links. 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-brand);
--article-highlight-color: var(--color-text-inverted);
--article-tint-background: color-mix(in srgb, var(--color-brand-dark), 89% white);
--article-dark-background: var(--color-brand-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 farbigen 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 SOLO-Demo verwenden wir standardmäßig die Lato für Fließtexte und Überschriften. Die Schrift wird 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-sans-serif: 'Lato', 'Helvetica Neue', helvetica, sans-serif;
--base-font-family: var(--base-font-family-sans-serif);

Die Variable --base-font-family-sans-serif ist der Schriftart Lato 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 Überschriften greifen im Abschnitt BASE/TYPE standardmäßig ebenfalls auf die Basis-Schriftart zurück:

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

Ersetze einfach 'Lato' durch den Namen deiner installierten Schriftart, und sie wird im Frontend verwendet. Möchtest du für die Überschriften eine eigene Schriftart verwenden, legst du dir eine weitere Familienvariable an und weist sie --headings-font-family zu.

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/solo-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

SOLO 4 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 SOLO-3-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: SOLO 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. 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 SOLO 4 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 Außenabstände (m-t-* / m-b-*) basieren auf der --helper-spacing-unit, die Innenabstände (p-t-* / p-b-*) auf der --base-spacing-unit. Der jeweilige Wert wird mit der Zahl 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 in base/_article.scss definiert und ebenfalls in der Theme Toolbox hinterlegt sind, beeinflusst du Hintergrund, Textfarbe und Breite:

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

Mit .article--hero entfernst du die Maximalbreite und die seitlichen Innenabstände, sodass der Inhalt über die komplette Breite geht. .article--full entfernt die Innenabstände der .inside.