ModX Tutorial

Changing the net, one site at a time…

Wayfinderoutput formatieren
Mittels des Wayfinders kann man im handumdrehen eine dynamische Sitemat erstellen, die mit den neu angelegten Dokumenten wächst.
Die Formatierung der Sitemap wird meist von einem Style-Sheet vorgenommen, das die gesamte Navigation definiert. Sind hier die Beiträge indented (eingerückt, stellt der Wayfinder sie auch so dar. Je nach Template / Styling der Navigation ist das aber manchmal nicht der Fall.

Aber auch dann kann man sich helfen: Man fügt der Navigation ein Inline-Stlye an. Das kann einfach mittels eines Includes geschehen und ist einfach zu bewerkstelligen.

Wir ziegen hier, wie's geht:
   
1. Styling der Site-Map in Erfahrung bringen
   
firebug Um das Styling einer Seite eines Elements herauszufiinden, ist der Firebug ein tolles Werkzeug. Einmal in Firefox integriert, findet man das Start-Icon in der rechten unteren Leiste des Browserfensters. Einach auf das Icon klicken, und schon gibt die Seite ihre Geheimnisse presi.
 elementauswahl In der Menüleiste des Firebugs klicken wir in das Auswahl-Icon und bewegen es in das Fenster mit der Darstellung der Website darüber. Alle Elemente dieser Site werden durch blaue Kästchen angezeigt, die die jeweiligen IDs und Klassen anzeigen, die diese stylen.
   
Hier links dargestellt sieht man die Site-Map der Homepage der Freiherr-vom-Stein-Schule. Es werden zwar alle Seiten angezeigt, doch ist das Styling unübersichtlich.

sitemap-before
Der Wayfinder übernimmt die Parameter für den Aufbau der Sitemap aus den Vorgaben für die Seitennavigation aus dem dafür zuständigen Stylesheet - und die sind nicht indented und haben die Werte: margin: 0; padding: 0". styling-before
   
Um die Formatierung des Outputs der Site-Map zu erreichen, müssen wir dieser einen neuen Style zuweisen, der die Anweisung margin: 0; padding: 0" überschreibt:
   
2. TV für einen Header-Include erstellen
   
 Wir erzeugen zuerst ein HeaderInclude und benennen die TV [ **]. Diesen Call setzen wir dann in den Header-Bereich des Templates ein, welches die Sitemap generient.  Siehe Tutorial
   
3. Neuen Style in die HeaderInclude TV einfügen
 top-icon  

Wie hier im Screenshot rechts  zu sehen, ist der Site-Map eine neue Klasse  hinzugefügt worden, die die Untereinträge mit dem Wert padding-left: 40px; um 40 Pixel nach links einrückt.

Den rechtsstehenden Code geben wir nun in das Eingabefeld der HeaderInclude TV ein.

style
   
Wie auf dem Screenshot rechts zu erkennen, ist der Code, den wir in die HeaderInclude eingegeben haben, in der Ressource bereits geändert worden.  new-style
   
Im Frontend sieht die Darstellung der Site-Map nun aus wie folgt:  site-map-new-style
 
top-icon