Schritt 1

Installation des Modules

Hier zeige ich es in Contao 4.5
Die Installation ist eine andere wie bei Contao 3.5.
Alle weiteren Schritte dürften sich aber nicht unterscheiden.

Schritt 2

das erste Modul im Backend anlegen und die ID vergeben

Wählen Sie das Modul aus vergeben einen Namen.
Weiter unten finden Sie dann den Bereich von man die ID eintragen kann.
Hier habe ich mich auf "dkmenu" entschieden

Schritt 3

das zweite Modul anlegen

Wir gehen wir zu dem Bereich wo wir die Module anlegen können.

Namen vergeben: Mobiles Menü Button

Wir wählen beim Modul-Typ: eigener HTML Code

Jetzt fügen wir folgenden Code ein:

<div id="main-navigation-mobile" class="main-navigation-mobile tl_chosen chzn-done">
	<a href="#dkmenu"><i class="fas fa-bars fa-2x"></i></a>
</div>
Schritt 4

Wir deaktiveren bzw. kann es auch gelöscht werden, das Mobile standard Menü von Rocksolid

Schritt 5

Wir fügen die von uns erstellten Module dem Theme hinzu.

Schritt 6

wir müssen noch Fontawesome hinzufügen und aktivieren

ich habe es folgendermaßen gemacht:

Den Font laden.

Hier aus der Datei brauchen wir:

den Ordner (komplett): webfonts

und aus dem Ordner "CSS" die Datei all.css

Diese Sachen laden wir nun hoch. Das kann über FTP gemacht werden oder über den internen Dateimanager von Contao.
(bitte nicht verwirren lassen !!! Hier im Screenshot heißt es noch fontawesome-all.min.css und nicht wie oben beschrieben all.css)

Schritt 7

Nun müssen wir den Font noch im Theme einbinden:

Das machen wir im Theme unter "Zusätzliche <head>-Tags

von folgendem Code:

link href="{ {env::files_url} }files/opensauce/css/all.css" rel="stylesheet"

Bei den geschfeiften Klammern das Leerzeichen entfernen und und die Tag-Ecken vorne und hinten ran. Wie im Bild zu sehen.

Zurück