Angepasste Templates in TORNADO

Wir passen so wenige Contao-Templates wie möglich an. Das erleichtert den Einstieg ins Theme und sorgt dafür, dass bei einem Contao-Update möglichst wenig auseinanderläuft. Diese Übersicht zeigt, welche Templates TORNADO mitbringt und was darin geändert ist.

Alle Templates liegen als Twig-Templates im Theme-Bundle (erdmannfreunde/tornado-theme-bundle) und werden über Composer aktualisiert. Eigene Anpassungen nimmst du nicht dort vor, sondern über das Template Studio (siehe Theme individualisieren).

Überschriebene Contao-Templates

Template	Änderung
be_tinyMCE	Lädt das Theme-Stylesheet aus assets/tornado-theme/css/tinymce.css in den Editor, ergänzt die Theme-Styles Button Primary, Button Secondary, Button Tertiary und Text Lead und passt die Toolbar an.
news_latest, news_full	Erben vom Core-Template und zeigen in der Info-Zeile nur das Datum, ohne Autor. Das Format kommt aus dem Feld Datums- und Zeitformat im Startpunkt.

Für die Onepage-Navigation bringt TORNADO kein eigenes Template mit. Ab Version 2.3 der Erweiterung setzt das Modul sein ARIA-Label selbst: Du trägst es im Modul Navigation - Onepage-Navigation im Feld ARIA-Label ein, in der Demo „Hauptnavigation“.

Templates für Erweiterungen

Template	Änderung
portfolio_short	Kachel der Referenzen-Liste im Markup einer Galerie-Kachel: Bild und darunter der Titel als Link. Mit der Klasse gallery--references wird die ganze Kachel klickbar.
portfolio_full	Referenz in der Leser-Ansicht mit Überschrift, den Fakten Kunde (optional), Leistung (aus den Kategorien) und Jahr, Hauptbild und Text. Dasselbe Markup erscheint im Dialog.

Neues Inhaltselement: Zitat

TORNADO bringt das Inhaltselement Zitat mit (Template content_element/quote). In der Demo bildet es die Kundenstimmen. Es hat die Felder Zitat, Autor, Zusatz (steht unter dem Namen, z.B. Leistung und Ort), Bewertung von 1 bis 5 Sternen (Standard: 5, leer = keine Sterne) und optional ein Bild. Die Sterne sind für Screenreader ein Bild mit Text („4 von 5 Sternen“).

Templates des Themes

Template	Zweck
js_nav--mobile	Bindet navigation.js für das mobile Menü und die Untermenüs ein.
js_forms	Bindet forms.js für die Ajax-Formulare ein.
js_portfolio-dialog	Bindet dialog.js ein und öffnet Referenzen in einem Dialog.
js_news-dialog	Bindet dialog.js ein und öffnet Nachrichten in einem Dialog.
js_hero-video	Bindet hero-video.js ein: Ein Hero-Element mit Hintergrundvideo bekommt einen Button zum Anhalten und Abspielen. Die Beschriftungen „Video anhalten“ und „Video abspielen“ kommen aus der Übersetzung des Bundles.

Die js_-Templates wählst du im Seitenlayout im Bereich JavaScript aus. Die beiden Dialog-Templates nutzen dasselbe Skript und lassen sich einzeln aktivieren. Alle binden das Theme-JavaScript über die Twig-Funktion theme_js() ein, der Pfad enthält damit automatisch einen Versionsparameter fürs Cache-Busting.

Insert-Tag mark

Der Insert-Tag hebt Wörter in Überschriften in der Markenfarbe hervor und gibt <span class="mark">…</span> aus. Mehr dazu unter Theme individualisieren.

Templates aus dem Nutshell Framework

Zwei Anpassungen, die du in TORNADO siehst, stammen nicht aus dem Theme, sondern aus dem Nutshell-Core-Bundle (nutshell-framework/core-bundle):

Template	Änderung
mod_article	Die Inhaltselemente werden zusätzlich in einem <div class="inside"> ausgegeben.
component/_headline	Gibt die optionale Dachzeile zusammen mit der Überschrift aus.

Stand: TORNADO 1.0