Wayfinder et image dans le menu

Bonjour à tous,
Tout d’abord je voulais remercier le team pour le super boulot de traduction que vous faites, ça ma plus qu’aidé pour me mettre à modx.

Ma question porte sur wayfinder et la façon de faire pour remplacer chaque item du menu par une image.
Par exemple j’ai 2 items : Accueil et Contact. je voudrais mettre une image différente à chacun de mes items, comment faire ?

Merci

lezebre

Salut,

un début de réponse ici => http://modxcms.com/forums/index.php/topic,14971.0.html

En résumé:
Le plus simple est de recourir à une tv soit pour préciser l’image à utiliser soit attribuer une ID css à chaque item.

:-)

Merci heliotrope,

je vais regarder ça de plus près.

lezebre

merci pour le tuyau heliotrope la tv m’a en effet permis d’avoir un id par item.

j’ai une autre question : comment exprimer l’état a:link et a:visited pour avoir par exemple, si l’on est sur la page contact, l’item d’une couleur ou avec une image différente ?

Il faudrait je pense avoir une classe qui s’affiche seulement quant on est sur une page donnée.
ex Page Accueil :


Mais comment afficher cette classe que lorsque l’on est sur la page ?

lezebre

C’est le comportement par défaut de WF

Il affecte une classe css "here" je crois... et le parametre doit être &hereClass.
En revanche la classe est appliquée à l’ensemble des noeuds actifs !

Donc il faut jouer avec les css, si tu as plus d’un niveau de profondeur
ul li.here
ul li li.here


:-)

En effet je n’ai pas encore saisie toutes les fonctionnalités de ce snippet.

Merci pour les bon conseils.

lezebre

Tu trouveras la documentation complète du snippet dans le repertoire assets/snippets/wayfinder/

:-)

Je commence à effleurer du bout des doigts la puissance de modx .... je suis assez bluffé

Voici la solution que j’ai trouvé à mon problème :

J’ai créé un Chunk WFD_rowTpl


Dans la balise "<li>", [+wf.classes+] me permet d’afficher class="active" lorsque la page est active - logique non ?
Et dans la balise "<a>", id="item[+wf.docid+]" me permet d’avoir un id unique, par exemple pour la page 1 j’aurai "item1"

il ne reste plus qu’a insérer dans le template :

[!Wayfinder? &startId=`0` &level=`2` &outerTpl=`WFD_outerTpl` &rowTpl=`WFD_rowTpl` &hereTpl=`active` &titleOfLinks=`pagetitle`!]

et de faire la css qui va bien (exemple pour le premier item):


merci encore heliotrope.

Bonjour lezebre,

Si tu ne veux pas utiliser l’astuce dans la balise a pour avoir un id unique, tu peux aussi utiliser le paramètre &rowIdPrefix qui ajoute un id unique à chaque li de ton menu (sans modifier le template par défaut). L’id ressemblera à la valeur que tu passes en paramètre de &rowIdPrefix (item) + l’id du doc = id="item10" (par ex).
Ca te permet ainsi d’appliquer des styles sur le li, mais aussi sur le li a

Pour appliquer un style à un élément contenant une class et un id, dans ta css, tu peux utiliser la syntaxe suivante :

#menu .class#id (tout accroché)

Merci Perrine, je vais essayer ça de suite.

Edit : Ca marche très bien.
Merci pour l’ astuce.

lezebre