Wie du SIRIUS, SOLO oder SPLASH 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. Im folgenden Beispiel siehst du die Farben für das SIRIUS Theme:

$color-brand: $color-green;
$color-brand-secondary: $color-turquoise;
$color-highlight: $color-brand;

Beim SIRIUS Theme heißen die Hauptfarben $color-brand und $color-brand-secondary (bei SOLO und SPLASH verwenden wir lediglich $color-brand, da es keine zweite Farbe gibt). Im Beispiel wurden die Variablen $color-green und $color-turquoise zugewiesen, denen wiederum weiter oben Farben als HEX-Werte zugewiesen wurden. Um die Hauptfarbe zu ändern, ersetzt du

$color-brand: $color-green;

durch eine eigene Variable oder einen Farbwert:

$color-brand: $color-blue;

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

Schriften anpassen

Schriftarten kannst du theoretisch über die _variables.scss anpassen. Dafür findest du in der _variables.scss (je nach Theme) folgende Variablen:

$base-font-family-serif:          "Merriweather", Georgia, "Times New Roman", serif;
$base-font-family-sans-serif:     "PT Sans", "Helvetica Neue", Helvetica, sans-serif;

$base-font-family:                $base-font-family-serif;

Das Beispiel oben zeigt die Schriftarten des SOLO-Themes. Die Variable $base-font-family-serif ist der Schriftart Merriweather 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 Schrift PT Sans, die wir der Variable $base-font-family-sans-serif zugeordnet haben, wird an unterschiedlichen Stellen im Theme wieder aufgegriffen. Zum Beispiel wird sie in der base/_type.scss den Überschriften zugeordnet.

Google Webfonts nutzen

Sofern es sich bei der Schriftauswahl nicht um websichere Fonts (Arial, Georgia, Times New Roman etc) handelt, müssen diese noch als Webfonts integriert werden. Der bekannteste Anbieter für kostenlose Webfonts ist Google Fonts, weshalb wir uns die Integration einmal genauer ansehen.

Um Google Webfonts in Contao zu nutzen, bietet Contao im Seitenlayout dafür ein eigenes Textfeld an. Hier kannst du einfach die Liste der Schriften eintragen und die Google Fonts werden geladen. Und das geht so:

Nachdem du deine Schriften in Google Fonts zusammengestellt hast, wird dir ein Link zur Einbettung der Schriften angezeigt. Der kann zum Beispiel so aussehen:

<link href="https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i|PT+Sans:400,400i,700,700i" rel="stylesheet"> 

Aus dem Link kopierst du dir nun die Schriftinformationen und trägst sie im Feld Google Fonts ein:

Merriweather:400,400i,700,700i|PT+Sans:400,400i,700,700i

Diese Art der Integration hat allerdings einen Haken: Nach aktueller Rechtsprechung (Stand November 2019) ist unklar, ob Google Webfonts auf einer Website eingesetzt werden dürfen oder gegen die DSGVO verstoßen, da Besucherinformationen wie IP-Adresse, Browser uvm. an Google übermittelt werden.

Wer auf Nummer sicher gehen möchte, der speichert die Webfonts auf dem eigenen Server:

Google Webfonts lokal einbinden

1. Lade dir die Webfonts herunter. Am Einfachsten 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
4. Ändere wie im ersten Teil beschrieben die Variablen für die Schriftarten in der _variables.scss