SOLO 4 Theme individualisieren

Mit SOLO 4 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 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
assets/nutshell/	Nutshell Framework – die Basis aller unserer Themes, wird über Composer installiert und aktualisiert – nicht bearbeiten

Anpassungen werden also nicht in layout/solo-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 SOLO-Farbwelten

Am schnellsten kommst du über den Tab Vorlagen zu einem Ergebnis. Neben dem Standard-Look mit Goldton und Lato bringt SOLO 4 drei fertige Vorlagen mit:

Vorlage	Farbe	Schriften
Marine	Klares Blau, dazu eine dunkelblaue Textfarbe	Source Sans 3
Sand	Warmer Sandton	Merriweather für Fließtexte, Source Sans 3 für Überschriften, Hero und Buttons
Beere	Magenta, modern	Systemschrift des Betriebssystems

Ein Klick setzt die Primärfarbe samt dunkler Variante und die Schriften der Vorlage. Anschließend kannst du in der Maske weiter nachjustieren.

Was sich einstellen lässt

Die Maske wird aus einer Token-Registry erzeugt. SOLO 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) und Primärfarbe (dunkel) (--color-brand-dark) – die beiden Stellschrauben für das Farbsystem von SOLO
• Textfarbe, Seitenhintergrund und Rahmenfarbe
• Grundschrift, Überschriften-Schrift und Basis-Schriftgröße
• Basis-Abstand (--base-spacing-unit, von 1 bis 2 in Schritten von 0,125)
• Eckenradius und Rahmenstärke

Über den Bereich „Erweitert" blendest du weitere Token ein, z.B. Link- und Button-Hover, Zeilenhöhe, Spaltenabstand und Button-Radius.

Bewusst nicht editierbar sind --color-brand-primary und --color-highlight: Sie erben von der Primärfarbe bzw. ihrer dunklen Variante und ziehen automatisch nach. So bleibt das Farbsystem 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/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.

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/quote';
@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 SOLO 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 SOLO unter anderem diese Werte fest:

$wrapper-max: 72em;

$additional_breakpoints: (
  menu: (
    min: 54em,
    max: (
      54em - $max-diff,
    ),
  ),
);

• $wrapper-max – die maximale Breite des Inhaltsbereichs
• $additional_breakpoints – zusätzliche Breakpoints. SOLO definiert hier den Breakpoint menu: Ab 54em wird die Hauptnavigation nebeneinander statt untereinander 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

SOLO 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 SOLO-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 SOLO 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 SOLO 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 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.