Infos für Entwickler

Dieses Template gibt es für die TYPO3 Versionen 13 & 14. Das Templating basiert auf den gängigen Techniken Typoscript, Extbase und Fluid. 
 

Du bekommst von uns das komplette Projekt so wie einen DB Dump geliefert.

Db Dump importieren

Importieren den mitgelieferten Dump der SQL.
Z.B. via PhpMyAdmin (Hängt davon ab was dein Hoster bietet)

 

Installation per Composer (empfohlen)

  1. Dateien hochladen
    Lade die gelieferten Dateien komplett in dein root Verzeichnis hoch.
  2. Setze deine DB Daten in der /config/system/settings.php.

  3. Führe anschließend den Composer‑Befehl aus, um das Template zu installieren:
     

    composer require
  4. TYPO3 Cache leeren & Backend neu laden.

 

Installation im Legacy‑Modus (ohne Composer)

Falls du ohne Composer arbeitest:

  1. Lade die gelieferten Dateien komplett in dein root Verzeichnis hoch.
  2. Wenn nötig, lade die TYPO3 Source hoch und setze die Symlinks.
  3. Setze deine DB Daten in der /config/system/settings.php.
  4. Caches leeren

 

Wichtiger Hinweis: Site‑Set einbinden

Damit das Template vollständig funktioniert, musst du das mitgelieferte Site‑Set aktivieren.
Es enthält:

  • Konfigurationen für Layouts
  • TypoScript
  • Routen
  • Inhaltselement‑Einstellungen
  • Bootstrap‑Konfigurationen

Ohne das Site‑Set funktioniert das Template nicht.

 

Wenn du Probleme oder Fragen hast, melde dich gerne bei mir.

Das Template bringt in den TYPO3‑Site‑Konfigurationen mehrere zusätzliche Felder mit, über die du zentrale Bereiche des Frontends steuern kannst.
Alle Einstellungen findest du in:

Site Configuration → T3‑Lovers Template Einstellungen

Hier eine vollständige Übersicht aller verfügbaren Optionen:

 

1. Header Comment

Hier kannst du einen Kommentar eintragen, der im ‑Bereich des HTML‑Quellcodes ausgegeben wird.
Typische Nutzung:

  • Copyright‑Hinweis
  • Agentur‑Name
  • Projekt‑Informationen
  • Versionshinweise

 

2. Firmenname im Footer

Dieser Text erscheint im Footer‑Copyright‑Bereich.
Z.B. für:

  • Firmenname
  • Agenturname
  • Projektname

Die Jahreszahl wird automatisch generiert.

 

3. Root Page UID of main navigation

Hier trägst du die Seiten‑UID ein, ab der die Hauptnavigation starten soll.

 

4. Show breadcrumb?

Einfacher Schalter (Ja/Nein).
Wenn aktiviert, wird die Breadcrumb‑Navigation im Frontend angezeigt.

 

5. Root Page UID of footer navigation

Hier definierst du die Start‑UID für die Footer‑Navigation.
So kannst du unabhängig vom Hauptmenü einen eigenen Navigationsbaum für den Footer verwenden.
Typischerweise Impressum, Datenschutz und ähnliches.

 

6. Viewport meta tag

Beispiel: width=device-width, initial-scale=1.0

Dieses Feld steuert den ‑Tag im Head.
Du kannst hier eigene Werte setzen, falls du spezielle Anforderungen hast.

 

7. ID der Suchergebnis‑Seite

Wenn du hier die UID deiner Suchergebnis‑Seite einträgst:

  • erscheint das Suchfeld im Header der Seite
  • wird die Suche automatisch verlinkt

Wenn das Feld leer bleibt:

  • wird keine Suche angezeigt
  • Such‑Icons oder Suchfelder werden ausgeblendet

 

8. Colorswitch anzeigen?

Schalter (Ja/Nein).
Aktiviert oder deaktiviert den Light/Dark‑Mode‑Switcher im Frontend.

 

9. ID der Seite, die das Call‑to‑Action enthält

Hier trägst du die UID der Seite ein, die dein globales Call‑to‑Action‑Element enthält.
Das Template zieht sich den Inhalt dieser Seite und zeigt ihn als CTA‑Block an.

Wenn das Feld leer ist wird kein CTA angezeigt

 

10. ID der Seite, die der Startpunkt für die Usernav ist

Die User‑Navigation (z. B. Login, Profil, Logout) kann über eine eigene Seitenstruktur gesteuert werden.

Wenn du hier eine UID einträgst:

  • wird die User‑Navigation im Header angezeigt
  • TYPO3 nutzt die Unterseiten dieser UID als Menüeinträge

Wenn das Feld leer ist wird keine Usernav angezeigt

 

11. Favicons

Hier kannst du deine Favicons pflegen. Generiere diese am besten auf realfavicongenerator.net.
Als Pfad empfiehlt sich /fileadmin/Favicons/.
Lade anschließend die Icons in dein Verzeichnis hoch und kopiere den generierten Code dort hinein.

 

12. Logo

Z.B. /fileadmin/logo.svg

 

13. Logo Alt Text

Alternativer Text falls das Logo nicht angezeigt werden kann.

 

14. Text neben Logo

Optional. In diesem Demo wäre das “T3-Lovers” neben dem Logo

 

Wenn du Fragen hast, melde dich gerne bei mir.

Das T3‑Lovers Template verwendet vollständig Bootstrap 5 auf SCSS‑Basis. Dadurch kannst du das gesamte Styling flexibel erweitern, anpassen oder überschreiben — ohne Bootstrap selbst zu verändern. 
Alle relevanten Dateien findest du im Template‑Ordner unter:
/Resources/Private/SCSS/

Die Struktur ist bewusst klar gehalten, damit Entwickler schnell einsteigen können.

 

1. Schriftarten einbinden (fonts.scss)

In der Datei:
/Resources/Private/SCSS/fonts.scss

kannst du deine eigenen Fonts einbinden.
Typische Beispiele:

  • Google Fonts via @import
  • lokale Webfonts via @font-face
  • Variablen für Font‑Stacks

Diese Datei wird vor Bootstrap geladen, sodass deine Schriftarten direkt in den Variablen verfügbar sind.

 

2. Bootstrap‑Variablen überschreiben (_variables.scss)

Die wichtigste Datei für dein Design ist:
/Resources/Private/SCSS/_variables.scss

Hier kannst du alle Bootstrap‑Variablen überschreiben, bevor Bootstrap kompiliert wird.
Dazu gehören unter anderem:

  • Farben ($primary, $secondary, $success, $gray-100 …)
  • Typografie ($font-family-base, $font-size-base …)
  • Abstände ($spacer, $spacers …)
  • Buttons
  • Borders & Radii
  • Breakpoints
  • Shadows
  • Grid‑Einstellungen
  • usw…

Diese Datei ist der zentrale Ort, um dein Corporate Design oder das Design deiner Kunden umzusetzen.

 

3. Bootstrap‑Komponenten erweitern (Ordner: components)

Wenn du Bootstrap‑Komponenten anpassen oder erweitern möchtest, findest du dafür den Ordner:
/Resources/Private/SCSS/components/

Hier kannst du eigene SCSS‑Dateien anlegen oder bestehende erweitern, z. B.:

  • buttons.scss
  • cards.scss
  • forms.scss
  • navbar.scss
  • accordion.scss
  • usw…

Diese Dateien werden nach Bootstrap geladen, sodass du jede Komponente sauber überschreiben kannst — ohne Bootstrap selbst zu verändern.

Typische Erweiterungen der Bootstrap Komponenten wären zum Beispiel:

  • Hover‑Effekte
  • Schatten
  • Border‑Radius
  • Animationen
  • Layout‑Optimierungen
  • Responsive‑Anpassungen
  • usw…

 

4. Eigene Styles hinzufügen

Für projekt- oder kundenspezifische Anpassungen kannst du eigene SCSS‑Dateien anlegen, z. B.:
/Resources/Private/SCSS/custom.scss/

Diese Datei musst du anschließend in der theme.scss importieren:
@import "custom";

So bleibt das Template update‑sicher und sauber strukturiert.

 

5. SCSS wird automatisch kompiliert

Das Template bringt eine fertige SCSS‑Struktur mit, die beim Build‑Prozess automatisch kompiliert wird.
Dazu verwenden dieses Template die ws_scss Extension von Sven Wappler.
Du musst lediglich:

  • Variablen anpassen
  • Komponenten erweitern
  • eigene Styles ergänzen

Der Rest läuft automatisch. Nach jeder Änderung werden die CSS Dateien neu erzeugt.

 

Wenn du Fragen hast oder Hilfe benötigst, melde dich gerne bei mir.

Alle Template‑Dateien des T3‑Lovers Templates befinden sich im folgenden Verzeichnis:
/Resources/Private/

Dort findest du die drei zentralen Ordner, die für das TYPO3‑Rendering verantwortlich sind:

  • Layouts
  • Templates
  • Partials

Diese Struktur folgt dem TYPO3‑Standard und ist vollständig kompatibel.

 

1. Layouts

Pfad:
/Resources/Private/Layouts/

Hier liegen die Grundlayouts für Seiten und für Inhaltselemente.

Im Unterordner Layouts/Page/ findest du die Layout‑Datei für deine Seiten:

  • Default.html

Dieses Layouts bestimmt den grundsätzlichen Aufbau der Seite.

 

2. Templates

Pfad:
/Resources/Private/Templates/

Hier liegen die eigentlichen Fluid‑Templates, die TYPO3 für die Ausgabe nutzt.

Unterordner:

Templates/Page/

Enthält die Templates für komplette Seiten, z. B.:

  • Standard
  • Seite mit Hero Bereich

Diese Dateien greifen auf die Layouts zurück und füllen sie mit Inhalt.

Templates/ContentElements/

Hier findest du die Templates für die Inhaltselemente von:

  • fluid_styled_content
  • container

Beispiele:

  • Text
  • Text & Medien
  • Bilder
  • Tabellen
  • Akkordeons
  • Container‑Elemente
  • Spaltenlayouts
  • usw….

Diese Dateien steuern das Frontend‑Markup der Inhaltselemente.

 

3. Partials

Pfad:
/Resources/Private/Partials/

Partials sind wieder verwendbare Template‑Bausteine, die in mehreren Templates vorkommen können.

Unterordner:

Partials/Page/

Beispiele:

  • Header
  • Navigationen
  • Footer
  • Suchformular für den header
  • usw…

Partials/ContentElements/

Beispiele:

  • Bild‑Partials
  • Media‑Partials
  • Bullet Lists
  • Table
  • Cards
  • usw…

Partials sorgen dafür, dass du sauberen, modularen und wartbaren Code hast.

 

Zusammenfassung

Die Template‑Struktur ist klar gegliedert:
Durch die Unterordner Page und ContentElements findest du schnell die passende Datei — egal ob du eine komplette Seite oder ein einzelnes Inhaltselement anpassen möchtest.

Solltest du Fragen haben, melde dich gerne bei mir.

Das Template nutzt eine Kombination aus Content Blocks und Container‑Elementen, um Bootstrap‑Komponenten und eigene Custom‑Elemente flexibel und update‑sicher abzubilden.
Damit kannst du sowohl Standard‑Bootstrap‑Elemente als auch individuelle Inhalte sauber strukturiert im TYPO3‑Backend bereitstellen.

1. Content Blocks (für Custom‑Elemente & Bootstrap‑Elemente)

Die Content‑Block‑Elemente findest du im Template unter:

/ContentBlocks/

Dieser Ordner enthält:

Frontend‑Templates

  • Das HTML‑Markup für die Ausgabe im Frontend
  • Sauber strukturiert und Bootstrap‑konform

Backend‑Vorschau

  • Templates für die Darstellung im TYPO3‑Backend
  • So sehen Redakteure sofort, wie das Element aufgebaut ist
  • Erhöht die Usability und reduziert Fehler

CSS & JS pro Element

Jedes Content‑Block‑Element kann eigene Assets enthalten:

  • frontend.css
  • frontend.js

Diese Dateien werden nur geladen, wenn das entsprechende Element auf der Seite verwendet wird.
Das sorgt für:

  • bessere Performance
  • weniger unnötigen Code
  • saubere Trennung der Elemente

Eigene Elemente erstellen

Du kannst jederzeit eigene Content‑Block‑Elemente hinzufügen:
docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/

 

2. Container‑Elemente

Für einige Bootstrap‑Elemente nutzt das Template Container, weil sie sich besonders gut für verschachtelte Inhalte eignen.
Dazu gehören u. a.:

  • Bootstrap‑Spaltenelemente
  • Cards
  • Accordion
  • usw…

Die dafür benötigten Dateien findest du an drei Stellen:

 

a) FlexForms (Konfiguration der Eingabefelder)

Pfad:

/Configuration/FlexForms/

Hier liegen die FlexForm‑Definitionen.
Diese Dateien steuern, welche Optionen Redakteure im Backend auswählen können.

 

b) Templates für Container‑Elemente

Pfad:

/Resources/Private/Templates/ContentElements/

Hier findest du die Fluid‑Templates für die Container‑Elemente.

Diese Templates definieren das Frontend‑Markup der Container‑Elemente.

 

c) Container‑Sets (Site‑Konfiguration)

Pfad:

/Configuration/Sets/ContainerElements/

Diese Dateien registrieren die Container‑Elemente im TYPO3‑System und sorgen dafür, dass sie im Backend verfügbar sind.