SOLO Theme individualisieren

Hinweis

SOLO enthält standardmäßig eine eigene Dokumentation (sofern die Demo installiert wurde). Sie ist über den seitlichen Link Dokumentation zu erreichen.

Alle SCSS-Dateien werden im folgenden Ordner gespeichert:

files/theme/scss/

Dabei lassen sich viele Einstellungen bereits über Variablen anpassen. Solltest du an einer Stelle mit den Variablen nicht mehr weiterkommen, kannst du bestehende Anweisungen überschreiben oder eigene Anweisungen hinzufügen.

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 festgelegte Farbton zu sehen sein.

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 den Wert der Variable --article-highlight-background verwendet.

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

--article-highlight-background: #f94300;

Du kannst auch eine andere Variable verwenden (z.B. --color-gray-dark) oder eine eigene Variable festlegen und verwenden.

Solltest du feststellen, dass du mit der Anpassung der Variablen nicht ans Ziel kommst, 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 ist zwar ein Google Webfont, wird 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 /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-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);

Möchtest du für die Überschriften eine eigene Schriftart verwenden, legst du dir eine weitere Familienvariable an (z.B. --base-font-family-serif) und weist sie --headings-font-family zu. Nachdem du deine neue(n) Schriftart(en) hochgeladen hast, musst du nur noch die Variablen anpassen und solltest die Schriftart(en) sehen können.

4. Hilfsklassen verwenden

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. Dafür gibt es in unseren Themes Abstandsklassen, die du im Theme unter /trumps/_helper.scss findest. In SOLO für Contao 5 sind die Hilfsklassen bereits über die Theme-Toolbox 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, um Abstände anzupassen. 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.

  • solo
  • individualisieren
  • scss

Zur Übersicht