Einfache Template Entwicklung mit TYPO3 – Step by Step zum eigenen Sitepackage Teil 3
Nutze Variablen für die individuelle Einstellung deines Themes
Das Bootstrap Package arbeitet mit Sass (scss) und hat einen eingebauten Sass Compiler, der aus den .scss-Dateien .css-Dateien erstellt. Ein riesen Vorteil von Sass: Du kannst mit Variablen arbeiten, auf die du innerhalb der .scss-Dateien zurückgreifen kannst. Und genau auf solche Variablen greifen wir nun zurück. Unser erstelltes Sitepackage beinhaltet dafür bereits eine Datei, die du nutzen kannst. Diese heißt _variables.scss und ist zu finden unter Resources/Public/Scss/Theme.
$primary und $secondary für die Anpassung der Farben
Einen guten Überblick über die verfügbaren Variablen bekommst du im Konstanten-Editor, zu finden im Backend unter dem Reiter Template. Dort nennt sich die Kategorie „BOOTSTRAP 4.x: Styling“. Die zwei wichtigsten Variablen, die du kennen solltest: $primary und $secondary. Sie steuern die primäre und sekundäre Farbe deiner Website.
Wir öffnen nun die Datei _variables.scss in einer IDE unserer Wahl und tragen Folgendes ein:
$primary: #014876;
$secondary: #72bf44;Selbstverständlich solltest du die HEX-Farbcodes durch die deiner Wahl ersetzen. ;-) Und schon hast du die grundlegenden Farben des Themes angepasst.
Im Standard ist der Footer in zwei dunklen Grautönen gehalten. Möchtest du hier mit anderen Farben oder ebenfalls mit den primary und secondary Farben arbeiten, trägst du folgenden Code in deine _variables.scss ein:
$footer-sections: () !default;
$footer-sections: map-merge(
(
content: (
background: $secondary,
color: $black,
link-color: $primary
),
meta: (
background: $secondary,
color: $black,
link-color: $primary
)
),
$footer-sections
);
Der obere Bereich nennt sich „content“, der untere „meta“. Hier kannst du entweder mit Variablen arbeiten oder ebenfalls mit Hex-Codes.
Andere Dateien kompilieren
Noch eine wichtige Sache: Eigentlich kompiliert der SASS Compiler nur die Datei theme.scss. Über einen @import kannst du aber andere Dateien inkludieren, die danach ebenso kompiliert werden.
Eigene CSS-Klassen einfügen
Möchtest du eigene CSS-Klassen einfügen? Dann empfehle ich dir, mit einer eigens dafür erstellten Datei zu arbeiten und diese anhand meines Beispiels zu importieren. Meine erstellte Datei heißt hier: beispiel.scss. Damit sie kompiliert wird, muss sie in „theme.scss“ stehen:
@import "beispiel"; Auf die Angabe der Datei-Endung kannst du verzichten.
Layout mit CSS
Möchtest du nun bestimmte Änderungen am Layout vornehmen, die mit CSS umsetzbar sind? Dann habe ich noch einen Tipp für eine smarte Entwicklung für dich. Um beim Erstellen der Seite schnell sehen zu können, welche .scss-Datei für die Ausgabe zuständig ist, kannst du im Backend folgende Option aktivieren (aber bitte nur während der Entwicklung): Template -> Konstanten Editor -> Kategorie: BOOTSTRAP PACKAGE: CSS PARSER. Hier aktivierst du die Option „CSS source mapping“. Im Anschluss löschst du alle Caches, sodass du im Frontend mithilfe der Entwickler-Konsole im Browser nützliche Informationen angezeigt bekommst. Das war’s auch schon. ;)
Letzter Teil: Änderungen in HTML und Suchleiste platzieren
Im letzten Teil der Reihe zeige ich dir, wie du deine Änderungen auch mit HTML umsetzen kannst. Und zum Schluss werden wir eine Suchleiste im Header deiner Website platzieren. Viel Spaß bei der Umsetzung!
