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.

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!

Ähnliche Artikel:

Webentwicklung

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

TYPO3 Pro Philipp zeigt dir, wie du dein eigenes Sitepackage mit dem Bootstrap Package erstellst. In Teil 1 erfährst du alle Basics zum Bootstrap Package.

Webentwicklung

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

Im zweiten Teil zur TYPO3 Template Erstellung zeigt dir Philipp Schritt für Schritt, wie du dein eigenes Sitepackage erstellst.

Webentwicklung

TOP 20 der TYPO3 10 Extensions

Mit TYPO3 10.4.x sind schon viele Extensions kompatibel. Welche die beliebtesten Erweiterungen unserer Hosting-Kunden sind, erfährst du hier.

Webentwicklung

Für noch mehr Website-Performance: INT-Objekte im Admin-Panel von TYPO3 10 analysieren

Mit dem Admin-Panel unter TYPO3 10 bekommt man seine Website noch schneller. Wie genau? Das zeigt euch TYPO3 Experte Hannes hier im Blog.

Webentwicklung

Ein optimiertes Frontend für noch mehr Performance: Lazy Loading in TYPO3 10 LTS – Teil 2

Optimiere die Performance deiner Website: Hannes zeigt dir, wie du eine Hybrid-Lösung erstellst und wie du das Lazy Loading für dein TYPO3 10 LTS nutzt.