Wie du SOLO anpasst

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 SOLO Theme in Contao 5 sind wie folgt definiert:

  --color-green: #00a82d;
  --color-green-dark: #00751f;
  --color-gray-dark: #111;
  --color-gray: #555;
  --color-gray-light: #f2f2f2;

  --color-tint: var(--color-gray-light);
  --color-brand: var(--color-green);
  --color-brand-dark: var(--color-green-dark);
  --color-highlight: var(--color-brand);
  --color-page-background: #fff;
  --color-text: var(--color-gray-dark);

Die Hauptfarbe heißt --color-brand. Dieser wurde die Variable --color-green zugewiesen, der wiederum weiter oben ein Grünton als HEX-Wert zugewiesen wurden. Um die Hauptfarbe zu ändern, ersetzt du

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

durch eine eigene Variable:

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

oder einen Farbwert:

--color-brand: #2283ce;

Nun sollte an jeder Stelle, an der vorher das Grün zu sehen war der neue festgelegte Farbton zu sehen sein.

Wichtig: Das SOLO Theme enthält standardmäßig noch mehrere Farbvarianten, die weiter unten in der _variables.scss definiert sind. Um deine Änderungen zu sehen, sollte die Standard-Variante im Frontend ausgewählt sein.

3. Schriften anpassen

In der SOLO Demo haben die Varianten (die über den Button an der rechten Seite geöffnet werden können) nicht nur unterschiedliche Farben, sondern auch Schriftarten. Sollte dir eine der anderen Schriftarten besser gefallen, als die standardmäßige Lato, dann kannst du die Variablen einfach in den oberen Teil (an die entsprechenden Stellen) kopieren und ersetzen.

3.1. eigene Schriftart verwenden

Um eigene Schriftarten zum Beispiel von Google Webfonts zu verwenden, sind 2 Schritte notwendig:

Schritt 1: Webfonts herunterladen

Webfonts sollten immer lokal und nicht über Anbieter wie Google Webfonts, Adobe Fonts usw. 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 Webfont Helper 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 in den Varianten überschrieben wird.

Es ist auch möglich, zusätzliche Variablen zu definieren und so unterschiedliche Schriftarten für Überschriften und Fließtext zu verwenden.

Wie das funktioniert wir in Variante theme-1 am Ende der _variables.scss gezeigt:

Die Schrift Merriweather wird in dieser Variante über die Variable --base-font-family dem Fließtext zugeordnet während die Source Sans 3 über die Variable --headings-font-family den Überschriften zugeordnet wird.