Tutorial: Wie passe ich das Template an?

Dir stehen folgende Anpassungsmöglichkeiten zur Verfügung, je nach Grad der Anpassung:

Option 1: TypoScript-Konstanten anpassen

Falls du mit dem Design für deine Zwecke zufrieden bist und nur Logo, Farben und wenige CSS Eigenschaften ändern möchtest, so empfiehlt sich diese Methode. Du kannst als Administrator über die TypoScript-Einstellungen im Hauptmenü die Konstanten anpassen.

Option 2: Überladung bestimmter Bestandteile mittels eigener Dateien

Dies ist eine schnelle und einfache Methode um Templates, Partials zu überladen, eigenen CSS Code hinzuzufügen oder Bilder für Logo und Favicon abzulegen.
Lege hierfür ein Verzeichnis auf der Hauptebene an. Bei einer composer-Installation ist die Hauptebene das public-Verzeichnis. Wir nennen dieses design. Also public/design/ . Lege dort nun die Dateien ab. Um Partials oder Templates von Extensions zu überladen, lege auch diese dort ab.
Hier ein Beispiel, wie man eine CSS Datei nun zum Template hinzufügt:
Über die Listen-Ansicht öffnest du möglichst weit oben im Seitenbaum einen „TypoScript Datensatz“. Dort im setup-Bereich trägst du nun

page.includeCSS.patch = /design/patch.css

ein.

Du kannst auch für Konstanten diesen Ordner verwenden, um beispielsweise das Logo oder die Favicons anzugeben.

Option 3: Überladung bestimmter Bestandteile mittels eigener Extension, aus lokalem Ordner

Du kannst composer anweisen, ein Verzeichnis auf dem Server als Quelle für Pakete zu verwenden. Lege ein Verzeichnis packages auf der Ebene der composer.json an, bearbeite die composer.json und füge folgendes in den Abschnitt „repositories“ hinzu:

"repositories": [
	.......,
	{
		"type": "path",
		"url": "packages/*"
	}
],

Lade dir diese https://git.wappler.systems/T3Bootstrap12/template-patch Beispiel-Extension herunter und lege sie in das Verzeichnis ab. Die Struktur sollte dann folgendermaßen aussehen:

Composer sollte nun per

composer req t3bootstrap/template-patch:dev-main

die Patch Extension laden können.
Danach das TypoScript Template zum Haupttemplate hinzufügen. Composer wird einen Symlink von vendor/t3bootstrap/template-patch auf packages/template-patch anlegen. Da die Daten aus dem packages Verzeichnis geladen werden, muss in der packages/template-patch/Resources/Public/SCSS/patch.scss den Pfad zur init.scss Datei auf

@import "../../../../../vendor/t3bootstrap/template/Resources/Public/SCSS/components/init";

ändern.

Die Template-Patch Extension zeigt in ein paar Beispielen, was man wie manipulieren kann.

Option 4: Überladung bestimmter Bestandteile mittels eigener Extension, mit git Versionierung

Mit einer git-Versionierung zu arbeiten ist immer sinnvoll. Sofern du über ein GIT Basiswissen verfügst, ist diese Option genau wie Option 3, mit dem Unterschied, dass du in die composer.json als Repository das git Repo angibst und den Pfad zur init.scss nicht verändert werden muss. Herunterladen des Beispiels, bearbeiten der composer.json des Beispiels, committen und pushen sollte kein Problem sein. Solltest du hierbei Hilfe benötigen, so können wir dir gerne Support anbieten.

Option 5: Die Template-Extension t3bootstrap/template komplett anpassen

Dies ist natürlich auch möglich und für Projekte mit einem sehr hohen Anpassungsgrad die beste Option. Bei jedem Versionssprung muss das Template dann wieder angepasst werden.