Wie du SIRIUS, SOLO oder SPLASH anpasst

Je nachdem, ob du die Server Edition (SE) oder die Entwickler Edition (EE) verwendest, werden die SCSS-Dateien in unterschiedlichen Ordner gespeichert:

  • Server Edition: files/theme/server/scss/
  • Entwickler Edition: files/theme/src/scss/

Dabei lassen sich viele Einstellungen bereits über Variablen in SCSS anpassen. Solltest du an einer Stelle mit den Variablen nicht mehr weiterkommen, kannst du bestehende Anweisungen überschreiben oder du fügst deine eigenen Anweisungen hinzu.

1. Hauptfarben anpassen

Um die Hauptfarben des Themes zu ändern, öffnest du die _variables.scss. Dort findest du eine Vielzalh 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.

2. Hintergrundfarbe anpassen

Möchtest du eine Hintergrundfarbe unabhängig von der Haupfarbe ändern, findest du weiter unten in der _variables.scss den Abschnitt Bands. Auch hier verwende ich ein Beispiel aus dem SIRIUS Theme:

// Bands
$color-band-highlight-background: $color-highlight;
$color-band-tint-background: linear-gradient(lighten($color-tint, 4%), darken($color-tint, 3%));
$color-band-dark-text: #FFFFFF;
$color-band-dark-background: $color-brand;

Diese Variablen werden u.a. in base/_layout.scss verwendet und geben dir die Möglichkeit Artikel farbig zu hinterlegen. Standardmäßig hat zum Beispiel die Galerie im Abschnitt Referenzen in der Demo einen grünen Hintergrund. Dieser grüne Hintergrund kommt zustande, weil der Artikel die Klasse band--highlight hat und ich in der Klasse den Wert der Variable $color-band-highlight-background verwende.

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

$color-band-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 _layout.scss direkt Anpassungen vornehmen.

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