Wie du das LASR oder OPTIMIST Theme anpasst

Farben anpassen

Um die Farben des Themes zu ändern, öffnest du die _variables.scss. Dort findest du u.a. folgende Variablen für die Farbzuweisung:

--color-blue-darker:        #284456;
--color-blue-dark:          hsl(206, 72%, 37%);
--color-blue:               hsl(206, 72%, 47%);
--color-blue-light:         hsl(206, 72%, 67%);
--color-blue-lighter:       #738591;

…

--color-brand-primary:     var(--color-blue);
--color-brand-secondary:   var(--color-blue-darker);

Unsere Hauptfarben heißen oftmals --color-brand, bzw. --color-brand-primary und --color-brand-secondary. Ihnen wurden Farbvariablen (z.B. --color-blue) zugewiesen, denen wiederum Farben als HEX- bzw. HSL-Werte zugewiesen wurden. Wenn du nun eigene Farben festlegen möchtest, empfehlen wir dir, dafür eigene Variablen mit dem Farbnamen anzulegen und diese den Variablen --color-brand Variablen zuzuweisen. Also zum Beispiel

--color-red: #FF0000;
--color-green: #88bb00;

…

--color-brand-primary: var(--color-red);
--color-brand-secondary: var(--color-green);

Auf diese Variablen wird innerhalb des Themes immer wieder zurückgegriffen und die Farben werden ersetzt. Auch die anderen Farben kannst du ersetzen, indem du entweder neue Variablen ergänzt oder bestehende Farbwerte änderst.

So passt du die Linktext-Farbe an, indem du --color-links änderst. Entweder indem du eine andere Variable zuordnest, z.B.

--color-links: var(--color-red);

Oder indem du direkt einen Farbwert zuordnest

--color-links: #FF0000;

wobei die erste Methode den Vorteil hat, dass du anhand des Variablennamen besser nachvollziehen kannst, welcher Farbwert hier verwendet wird.

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-1:  'Rubik', 'Helvetica Neue', Arial, sans-serif;
--base-font-family-2:  'Raleway', 'Helvetica Neue', sans-serif;

--base-font-family:    var(--base-font-family-1);

Das Beispiel oben zeigt die Schriftarten des LASR-Themes. 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 Schrift Raleway, die wir der Variable --base-font-family-2 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