Anpassungen

CSS-Anpassungen

Wie du Farben, Schriften und eigenes CSS definieren kannst, erfährst du auf der Seite
Farben und Schriften.

JavaScript-Anpassungen

Für eigenes JavaScript legst du am besten eine eigene Datei an und bindest sie anschließend im Theme ein.

Elemente über ein eigenes Insert-Tag platzieren

Unter MATE Elements findest du Artikel, die du mit einem Insert-Tag an jeder beliebigen Stelle der Webseite einbinden kannst.
Gehe dazu im Backend auf Artikel und scrolle ganz nach unten.

In den Artikeleinstellungen (Werkzeug-Icon) kannst du unter Template-Einstellungen den passenden Theme Helper Tag auswählen (siehe Bild 2).
Falls du mehrere Root-Seiten mit dem MATE Theme in einer Contao-Installation nutzt, kannst du zusätzlich bei Seitenname die gewünschte Seite auswählen.

Den Artikel bindest du dann per Insert-Tag in einem HTML-Element oder einem Template ein, z. B.:

{{theme::content::MATE02/01}}

Dabei steht die erste Nummer für den Typ (Header, Modules oder Footer) und die zweite Nummer für den Theme Helper Tag im Artikel.

Wie du eigene Theme Helper Tags anlegen kannst, findest du in der
Theme Helper Dokumentation.

Bild 1: Artikel unter MATE Elements

Bild 2: Theme Helper Tag im Artikel auswählen

Bild 3: Artikel über den Theme Helper Tag einbinden

Header anpassen

Die Inhalte des Headers findest du in den Artikeln unter MATE Elements – 01 Header.
Öffne im Backend den Menüpunkt Artikel und scrolle ganz nach unten.

  • Öffnungszeiten, Telefonnummer und E-Mail inkl. Icons sind im Modul Header / Top eingebunden.
  • Logo, Navigation und Suche werden über das Modul Navigation / Hauptnavigation geladen.

Das Logo kannst du im Artikel 01/04 Logo austauschen. Hier sind zwei Logos eingebunden:
Das zweite Logo erscheint, wenn beim Scrollen die Navigation einen grünen Hintergrund bekommt. Dieses zweite Logo muss die CSS-Klasse fixed-nav haben.

Die Inhalte des Footers liegen in den Artikeln unter MATE Elements – 05 Footer.
Du findest sie im Backend unter Artikel (ganz unten).

Eingebunden werden sie – genauso wie die Newsletter-Box (Infos dazu unter Theme-Elemente) – über das Modul Footer.

Hilfreiche Videos

Einleitendes Contao 4 Tutorial

Grundeinstellungen in Contao treffen