Wie du SOLO für Contao 4 anpasst
Alle SCSS-Dateien werden im folgenden Ordner gespeichert:
files/theme/server/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 Vielzahl von Variablen, unter anderem für die Farbzuweisung. Die Farben für das SOLO Theme sind wie folgt definiert:
$color-green: #00a82d;
$color-brand: $color-green;
$color-highlight: $color-brand;
Die Hauptfarbe heißt $color-brand. Diesen wurden die Variable $color-green zugewiesen, der wiederum weiter oben die Farbe 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 neu 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:
// Bands
$color-band-highlight-background: $color-highlight;
$color-band-tint-background: $color-tint;
$color-band-dark-text: #fff;
$color-band-dark-background: #14252f;
$color-band-dark-background-gradient: radial-gradient(
circle at 0% 0%,
$color-band-dark-background 0%,
darken($color-band-dark-background, 10%) 100%
);
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 der Bereich Kontakt 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.
3. Schriften anpassen
Schriftarten kannst du theoretisch über die _variables.scss anpassen. Dafür findest du in der _variables.scss 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;
Die Variable $base-font-family-serif ist der Schriftart Merriweather zugeordnet, während die Variable mit dem Zusatz -sans-serif der PT Sans zugeordnet ist. 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 wird an unterschiedlichen Stellen im Theme wieder aufgegriffen. Zum Beispiel wird sie in der base/_type.scss den Überschriften zugeordnet.
Da nach aktueller Rechtsprechung die direkte Integration von Google Webfonts auf einer Website gegen die DSGVO verstoßen, da Besucherinformationen wie IP-Adresse, Browser uvm. an Google übermittelt werden, beschreibe ich nur den Weg, um Google Webfonts lokal zu nutzen.
Google Webfonts lokal einbinden
- Lade die gewünschten Webfonts herunter. Am Einfachsten geht das mit dem google webfonts helper
- Speichere die Webfonts im Ordner
/fonts - passe die Datei
/base/_fonts.scssan, indem du die CSS-Anweisungen des Webfont Helper dort einfügst - Ändere wie im ersten Teil beschrieben die Variablen für die Schriftarten in der
_variables.scss
4. Hilfsklassen verwenden
Klassen für Abstände
Standardmäßig haben alle im Theme gestalteten Elemente und Module einen Abstand, der auf der $base-spacing-unit basiert. Auch Artikel (.mod_article) haben standardmäßig einen Abstand nach oben und unten.
Nun kann es je nach Inhalt und Layout vorkommen, dass man Abstände vergrößern oder verkleinern möchte. Dafür gibt es in unseren Themes die Abstandsklassen, die du im Theme unter /trumps/_helper.scss findest.
Abstände lassen sich über folgende Klassen realisieren
m-t-0bism-t-5m-b-0bism-b-5p-t-0bisp-t-5p-b-0bisp-b-5
wobei m-t für margin-top, p-t für padding-top usw. steht. Die Abstände basieren auf der --base-spacing-unit und werden mit dem jeweiligen Wert multipliziert.
Also ist m-t-1 = ($base-spacing-unit * 1)
und m-t-5 = ($base-spacing-unit * 5)
Diese Klassen kannst du sowohl für Artikel als auch Elemente und Module verwenden, um Abstände anzupassen.
Klassen für Artikel
In den Artikeleinstellungen kannst du weitere Klassen hinzufügen und so das Aussehen des Artikel anpassen. Mit der Klasse .band und den jeweiligen Ergänzungen, z.B. .band--highlight, kannst du beispielsweise die Hintergrund- und Textfarbe beeinflussen.
Folgende Klassen stehen zur Verfügung:
.band.band--highlight.band--tint.band--dark.article--fullbzw..hero
Mit .article--full bzw. der Klasse .hero kannst du die Standardmäßig vorhandenen Abstände links und rechts entfernen, sodass der Inhalt über die komplette Breite geht. Die Klasse .hero entfernt darüber hinaus noch das Padding oben und unten.