Wayfinder - different colours on first level?

Hello,

I’ve done a dropdown menu with wayfinder, which works fine.

But now I’m trying to have different colours on first level and they’re childs (see http://www.tuv.com/de/produkte_leistungen.html to get a clue of what I mean) - but I’ve no idea how to do this or whether this can be done at all.

To make it more specific, it should like this (colour names instead of menu titles):

BLUE GREEN ORANGE
blue-child green-child orange-child
blue-child green-child orange-child
blue-child green-child orange-child
blue-child green-child orange-child
blue-child orange-child
blue-child
blue-child

Could one tell me if that’s possible and how this can be achieved? At the moment I use:

[[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]]

But this doesn’t give me a possibility to change colors within a row - but maybe there are already parameters for this?

Cheers, Frisco

I found a solution if there are not more than three items in the first row. It could be done with a combination of

&levelClass, &firstClass and &last class.

BLUE would have class="first level1"
GREEN would have class="level1"
ORANGE would have class="last level1"

thus they’re distinguishable and I could write some CSS for these three different class namings.

But I’ll run into problems if it’s more than three items, and furthermore I didn’t find a possibility to give the child the color of the parent, as for example "first" does not only belong to the first menu item and it’s children, but exists in other childs as well (with menues more then two levels deep).

Hm, I really wouldn’t like end up hacking wayfinder

Maybe someone has another idea?

Cheers, Frisco

Hi Frisco,
just an idea - not tested: You could use a Template Variable [*menuclass*] in the &outerTpl, i.e.
[!Wayfinder? .... &outerTpl=`[*menuclass*]` .... !]
This TV has to be of type CheckBox with the optional values
menublue||menugreen||menuorange
Of course, these values are class names in your CSS, f.i.
ul.menugreen li {.... background-color: green; ....}.
Now, in the backend, you only have to assign the wanted value to every first level document.
(I think you could get this done more automatically using PHx.)
Good luck
ottogal

I would try usng the beta version of Wayfinder 2.5 which has the built in level placeholder and supports PHx. By using these two together you can do something like this in the tpl:



I am not that good with PHx syntax, but I think to get multiple if options you need to nest the phx calls.

Well, I made something out of ottogals suggestions, which should work.

@ottogal: You were pretty close! It’s not possible to have the TV in call to wayfinder, as &outerTpl expects the name of the chunk holding the template part. But within this template (chunk cssplay_parentRow, I could put the TV inside like this:

<a id="[*menuclass*]" [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>

I used not a checkbox but a listbox (single choice), and this works, resulting in:

<a id="menugreen" class="first level1 hide" href="/cms/modx/index.php?id=2" title="Test">Test</a>

But stop! Unfortunatly, as I see right now while doing copy&paste, every menu item of the first row gets "menugreen", nevertheless what I selected in the listbox! It seems as only the value of the active document is taken.

Hm, what a pity, I really liked your idea and thought the problem was solved now

Cheers, Frisco

Quote from: dev_cw at Mar 26, 2009, 01:45 PM

I would try usng the beta version of Wayfinder 2.5 which has the built in level placeholder and supports PHx. By using these two together you can do something like this in the tpl:

<li class="[+phx:if=`[+wf.level+]`:is=`2`:then=`green`+]">...</li>

I am not that good with PHx syntax, but I think to get multiple if options you need to nest the phx calls.

Hm, thanks dev_cw, I could try WF2.5. I don’t know PHx, is that a template language? I know some PHP, so I think I could work that out too.

I really liked ottogals idea with using the template var, because that would be more scalable then changing the WF template with every new top menu item.

Do you have any idea why only the TV value of the active document is taken, or how I could get the TV value of each menu item for a class or id definition?

Cheers, Frisco

PHx = Place Holders Xtended (or something like that). It is a template logic syntax specific to MODx that can used as a plugin for general use, but it readily available to use within some snippet tpl chunks (Ditto, AjaxSearch, Jot and MaxiGallery are some examples of snippets that support PHx natively). The wiki has some good documentation: http://wiki.modxcms.com/index.php/PHx

And today Packt books released an article on PHx: http://www.packtpub.com/article/phx-place-holders-extended-modx

This latest release of Wayfinder has built in PHx. You do not need to install PHx as a plugin (unless you want to use it outside of snippet tpl chunks).

Well, good to know about PHx, thanks for making that clear!

I solved know my problem with WF2.5beta2 in combination with TVs (suggested by ottogal, thanks for that!) in the chunks used by WF. I now have id="menuorange" for all ORANGE menu items (including subs) and other colors for the other menu items. @INHERIT works fine, so I only have to define the colour at top menu level - that’s great!

Thanks for your help!

Cheers, Frisco

Hi Frisco,
I’m glad you made it and that my idea wasn’t too far from it. There was just a typo in my proposal - instead of &outerTpl it should read &outerClass.
But of course handling the template is a good way too.
What about PHx - that is a great tool. But for the moment I’m a bit frustrated, having some problems I don’t understand. >:(

Quote from: ottogal at Mar 26, 2009, 04:35 PM

What about PHx - that is a great tool. But for the moment I’m a bit frustrated, having some problems I don’t understand. >:(

Post your problems, someone is bound to know the answer. I would start a new post though to keep things clear