LASR 5 Theme individualisieren

Mit LASR 5 wird auch die neue Version der Theme Toolbox installiert, die einen eigenen Theme Editor mitbringt. Mit dem Theme Editor lassen sich

  • eigene Varianten von SCSS- und JavaScript-Dateien anlegen
  • Icons ersetzen und
  • Webfonts über den Editor hochladen oder aus dem Google Webfont-Katalog auswählen und installieren.

Theme-Anpassungen über den Theme Editor

Mit LASR 5 wurde der Speicherort der SCSS-Dateien geändert. Sie liegen jetzt unter:

layout/lasr-theme/

und lassen sich am einfachsten über den Theme Editor der Theme Toolbox bearbeiten:

SCREENSHOT

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.

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 sind zwar Google Webfonts, werden aber lokal vom eigenen Server geladen (siehe files/theme/fonts).

3.1 Eigene Schriftart verwenden

Um eigene Schriftarten – z.B. von Google Webfonts – zu verwenden, sind zwei Schritte notwendig:

Schritt 1: Webfonts herunterladen

Webfonts sollten immer lokal und nicht über Anbieter wie Google Webfonts oder Adobe Fonts eingebunden werden.

Hier die Umsetzung anhand von Google Webfonts:

  1. Lade die gewünschten Webfonts herunter. Sehr einfach geht das mit dem google-webfonts-helper.
  2. Speichere die Webfonts im Ordner files/theme/fonts.
  3. Passe die Datei base/_fonts.scss an, indem du die CSS-Anweisungen des Webfonts-Helpers dort einfügst.

Schritt 2: Anpassung der Variablen

Um die Schriftart zu verwenden, findest du in der _variables.scss folgende Variablen:

--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);

Nachdem du deine neue(n) Schriftart(en) hochgeladen hast, musst du nur noch die Variablen anpassen.

4. Templates anpassen mit dem Template Studio

LASR 5 verwendet ausschließlich 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 System » Template Studio.
  2. Suche das Template, das du anpassen möchtest (z.B. eine Modul- oder Element-Vorlage).
  3. Lege eine projektspezifische Kopie an und passe sie im Template Studio an.

Wichtig: Damit Anpassungen wirksam werden, musst du nach Änderungen den Prod.-Cache erneuern (Contao Manager » Systemwartung). In der Entwicklungsphase empfiehlt sich zusätzlich, „Skript Cache umgehen“ zu aktivieren.

Eine Einführung in Twig-Templates für Contao findest du in der offiziellen Contao-Dokumentation.

5. 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. Dafür gibt es in unseren Themes Abstandsklassen, die du im Theme unter trumps/_helper.scss findest. In LASR 5 sind die Hilfsklassen bereits über die Theme-Toolbox 4.x 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.

  • lasr
  • individualisieren
  • scss
  • twig
  • template-studio
  • theme-editor

Zur Übersicht