Einfache Template Entwicklung mit TYPO3 – Step by Step zum eigenen Sitepackage Teil 3

In Teil 2 meiner Blogreihe haben wir damit begonnen, unser eigenes Sitepackage zu erstellen. Ich habe dir gezeigt, wie du dein Logo einfach und schnell einbinden kannst. Heute erkläre ich dir, wie du ganz easy die Anpassung der Farben vornimmst.
 

  1. Nutze Variablen für die individuelle Einstellung deines Themes
    1. $primary und $secondary für die Anpassung der Farben
    2. Farbe des Footers ändern
  2. Andere Dateien kompilieren
    1. Eigene CSS-Klassen einfügen
    2. Layout mit CSS
  3. Letzter Teil: Änderungen in HTML und Suchleiste platzieren

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.

Template-Werkzeug im Bootstrap Package

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. 

Farbe des Footers ändern

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.

Die Farben des Footers kannst du in deinem Sitepackage mit Bootstrap Package ebenfalls ganz einfach ändern.

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!

Kommentar hinzufügen

    Notwendige Cookies akzeptieren
    Notwendige Cookies
    Diese Cookies sind für die korrekte Anzeige und Funktion unserer Website ein Muss, ob sie dir schmecken oder nicht. Sorry.
    Analyse
    Diese Cookies ermöglichen uns die Analyse deiner Website-Nutzung. Nur so können wir deine Suche nach einem geeigneten Tarif zur besten machen.
    Marketing
    Diese Cookies teilen wir. Unsere Partner (Drittanbieter) und wir verwenden sie, um dir auf deine Bedürfnisse zugeschnittene Werbung zu unterbreiten.