Navigationseinträge mit verschiedenen Icons

[dancger]

Heyho zusammen

Ich möchte folgendes realisieren und kriegs nicht gebacken:
menu.png

Nach einiger Recherche hab ich folgenden Link gefunden: Zweizeilige Menüpunkte mit :before Icon kombinieren

Folgendes habe ich gemacht:

• Testklassen (ico_default, ico_home) in den Menüpunkten hinterlegt
• Im CSS überschreiben (z.B. ul.level_1 li.ico_default a)

So kann ich diese einzeln unterscheiden.

Wie ich nun aber mein Bild in der oberen Zeile zentriert kriege, versteh ich nicht. Mit der Background-Property hab ichs nicht hingekriegt...

Ich spiele gerade mit dem Gedanken, das Template so umzuschreiben, dass er alle "Icon" Klassen abfängt und dann dynamisch das Bild in eine <span/> einfügt.
Scheint mir aber Overkill.

Grüsse
Dancger

[joe]

Schau mal hier rein: https://community.contao.org/de/show...Mod_Navigation Vielleicht hilft dir das.

[one12]

Schau mal hier rein: https://community.contao.org/de/show...Mod_Navigation Vielleicht hilft dir das.

Joe,
Ist es nicht möglich im Backend verschiedene Klassen zu vergeben?

Weil die Variante im Link verstehe ich nicht

Gesendet von meinem SM-N9005 mit Tapatalk

[derRenner]

Hallo,

ungetestet würde ich mal folgendes probieren:
in der Seitenstruktur des jeweiligen Menüpunktes gibst du am unteren Ende der Seite unter 'CSS-Klasse'

{{page::alias}}

ein. Damit bekommt jeder Menüpunkt die Klasse zugewiesen, die genauso heisst wie der jeweilige Seitenalias.

Jetzt kannst du dem jeweiligen <li>-Tag im CSS ein entsprechendes Hintergrundbild/Icon zuweisen, das du entsprechend mittig, oben plazierst.
Den Link selbst <a>-Tag plazierst du via CSS dann ebenfalls mittig, und entsprechend unten ...