TYPO3 v13.4 || v14.1
v13.4 funktioniert aktuell nicht
PHP 8.2 - 8.5
Aktuell:
TYPO3 v14.1.1
PHP Version 8.5.2
Neue Option im Site Set “T3S Bootstrap - IMAGE SETTINGS”: “Custom file extension to use”
Ich nutze hier “webp”!
Für eine Neuinstallation von TYPO3 und die Einbindung der Extension “t3sbootstrap” wird die folgende Reihenfolge für eine korrekte Installation empfohlen:
Composer support
Die empfohlene Methode zur Installation der Erweiterung ist die Verwendung des Composers.
Dazu im Composer-basierten TYPO3-Projektverzeichnis einfach folgenden Befehl ausführen:
composer require t3sbs/t3sbootstrap
… oder aus dem TYPO3 Extension Repository (TER)
Erweiterung im Erweiterungsmanager-Modul herunterladen und installieren.
Nach der Installation prüfen, ob die benötigten DB Tabellen und Felder erstellt wurden (Analyze Database Structure).
Folgende Extensions werden benötigt und ebenfalls installiert/eingebunden:
- Fluid Styled Content (fluid_styled_content)
- Container Content Elements - (container)
Content Defender - (content_defender) - aktuell für TYPO3 v14 NICHT verfügbar!
- T3SB Package - (t3sb_package) - sollte nicht als eigenes Sitepackege genutzt werden!
Die EXT:t3sb_package ist nicht im TER verfügbar!
Wenn du eine “klassische” Installation ohne Composer nutzt, musst du t3sb_package hier downloaden und lokal einbinden!
TypoScript Datensatz bearbeiten
Wenn die Website eine gemischte Konfiguration aus einer TypoScript-Vorlage (sys_template) und Site-Sets verwendet, ist es wichtig, das Kontrollkästchen “Löschen” für Konstanten und Einstellungen in der TypoScript-Vorlage zu deaktivieren.
Bei einigen Installationen, wird standardmäßig ein Page-Objekt eingefügt - z.B.: TS-Setup:
# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!Dieses ist zu entfernen - ansonsten funktioniert t3sbootstrap nicht!
Site-Konfiguration
Das erforderliche Site Set “T3S Bootstrap - MAIN SETTINGS” ist einzubinden.dependencies: typo3/fluid-styled-content
Folgende Sets sind optional:
T3S Bootstrap - VERSION (optional - erforderlich für den Scheduler)
T3S Bootstrap - IMAGE SETTINGS (optional)
T3S Bootstrap - BOOTSTRAP OPTIMIZE (optional)
T3S Bootstrap - OTHER SETTINGS (optional)
T3S Bootstrap - PAGES OVERRIDE (optional)
Site Einstellungen
Nach der ersten Installation werden die JS- & CSS-Dateien per CDN (extern) geladen.
Ich empfehle jedoch die Dateien lokal einzubinden:
Hierfür müssen die benötigten JS- & CSS-Dateien in das Sitepackage t3sb_package ausgelagert und lokal eingebunden werden.
Die Site Option “Enable CDN” ist zu deaktivieren und der Scheduler Task “T3SB CDN to local” auszuführen.
Weitere Informationen siehe unten!
T3SB Config
Im BE Modul "T3SB Config", können alle relevanten Konfigurationen für dein "Bootstrap-Layout" angepasst werden.
Zuerst muss eine Konfiguration auf der Root-Page erstellt werden.
Diese kann jederzeit editiert werden, ein Löschen im Backend ist nicht möglich!
Nach dem Speichern der Konfiguration in die Datenbank, werden die Dateien t3sbconstants.typoscript und t3sbsetup.typoscript mit der gespeicherten Konfiguration in der EXT:t3sb_package erstellt bzw. aktualisiert.
Wenn “Custom SCSS” aktiviert und der Task ausgeführt wurde, werden auch die Dateien custom-x.scss und custom-variables-x.scss aktualisiert.
Scheduler Tasks
In der Site-Konfiguration ist das Set “T3S Bootstrap - VERSION” einzubinden.
Hier kannst du Versionen bei Bedarf aktualisieren/anpassen.
CDN to local
Im Planer (Scheduler) den Task "T3SB CDN to local" hinzufügen und einmalig ausführen.
(Console: ./typo3cms t3sbootstrap:cdnToLocal )
Jetzt liegen die benötigten CSS- & JS-Dateien im Sitepackage t3sb_package im Verzeichnis ./Resources/Public/ (T3SB-CSS & T3SB-JS - s.Screenshot) und werden automatisch lokal eingebunden.
Custom SCSS
Nachdem “Enable CDN” deaktiviert wurde kann "Custom Scss" aktiviert werden!
Im Planer (Scheduler) den Task "T3SB CDN to local" hinzufügen, dass Argument “Root page ID” eintragen und einmalig ausführen.
(Console: ./typo3cms t3sbootstrap:customScss )
Die benötigten SCSS-Dateien liegen jetzt im Sitepackage t3sb_package im Verzeichnis ./Resources/Public/ (T3SB-Bootstrap & T3SB-SCSS - s.Screenshot) und werden automatisch eingebunden.
Danach können die Bootstrap-SCSS-Variablen & Mixins im BE Module “T3SB Config” editiert werden (s. Screenshot).
Multidomain Setup
Wenn im Seitenbaum mehrere Seiten mit der Option "Als Anfang der Webseite benutzen" (Root-Page) aktiviert wurden, wird für jede eine eigene custom-variables-xx.scss sowie custom-xx.scss erstellt (s.Screenshot).
Nehmen wir einmal an, es gibt eine weitere "Root-Page" mit der id=205, dann wird in dem Sitepackage t3sb_package unter fileadmin/T3SB/Resources/Public/SCSS/ , die Dateien custom-variables-205.scss und custom-205.scss erstellt.
Wenn der Task erneut ausgeführt wird, wird eine Kopie der letzten SCSS-Dateien mit einem Unterstrich und Timestamp erstellt.
Maximal 30 Kopien werden hier gespeichert!
SCSS editieren
Wenn der Scheduler Task “Custom Scss” ausgeführt wurde, können die Bootstrap-SCSS-Variablen sowie eigene Variablen und Mixins im BE-Module “T3SB Config” im Configuration Type “Custom SCSS” für jede Site angepasst werden.
Migration nach "textmedia"
Mit den restlichen Scheduler Tasks kannst du die Content-Elemente “text”, “textpic” und “image” bei Bedarf nach “textmedia” migrieren.
Sinnvoll, wenn diese Content-Elemente mit den “Register static Page TSconfig files” deaktiviert wurden.
Bootswatch Themes
In den “Site Einstellungen” unter "Bootswatch Themes" kann ein Theme ausgewählt werden.
Beispiele & Info: https://bootswatch.com/
CDN ist aktiviert:
Das Bootswatch Themes wir per CDN automatisch eingebunden!
SCSS ist aktiviert:
Nach Auswahl und speichern eines Themes muss der Task "T3SB Custom Scss" ausführt werden!
Die SCSS-Dateien "custom-variables-x.scss" und "custom-x.scss" können dann im BE Module T3SB Config editiert werden (s. Screenshot).
Damit wäre die Installation abgeschlossen!
Auf der Root-Page unter “Seite bearbeiten” → “Erscheinungsbild” muss noch ein Backend-Layout ausgewählt werden.