Setting "active" class to instead of

Hey, I have a slight problem with wayfinder. I’m trying to style the active item so that the user would know which page he is browsing. So I style the link:

#navigation ul li.active a {
color: #666666;
}

However, as the class is applied to the <li> element, the same effect is applied to all <li> elements of the nested 2nd level list. My wayfinder call looks like this:

[!Wayfinder? &startId=`[[UltimateParent]]` &level=`0`!]

When browsing one of the 2nd level pages, this will output:

<ul>
<li class="first active"><a href="/sl/turvallisuusratkaisut/lukitukset" title="Lukitukset" >Lukitukset</a>
<ul>
<li class="first"><a href="/sl/turvallisuusratkaisut/lukitukset/iloq" title="iLoq" >iLoq</a></li>
<li class="active"><a href="/sl/turvallisuusratkaisut/lukitukset/dorma" title="Dorma" >Dorma</a></li>
<li class="last"><a href="/sl/turvallisuusratkaisut/lukitukset/hid" title="HID" >HID</a></li>
</ul>
</li>
<li><a href="/sl/turvallisuusratkaisut/helat" title="Helat" >Helat</a></li>
<li class="last"><a href="/sl/turvallisuusratkaisut/ovisulkimet" title="Ovisulkimet" >Ovisulkimet</a></li>
</ul>

Because the 2nd level list is nested within the active <li> element, all the links now show as grey, regardless of being active or not. I know setting "active" class to <a> instead of <li> would solve the problem, but I have no idea how to do it. Or if there’s a better way to do it I’m open to suggestions. Thanks in advance.

How about styling the active level like this:


Or you could change the template for the active row.

Quote from: rajfantastic at Apr 09, 2010, 11:59 PM

How about styling the active level like this:

ul li.active ul li a { ... }

Well, now I feel stupid. Of course, that does it, thanks! Only requires a few more rows of css, but that’s no problem.

You can always make a custom rowTpl with

In other words, you can put the various wayfinder placeholders wherever you want in the tpl.

Quote from: sottwell at Apr 10, 2010, 11:51 AM

You can always make a custom rowTpl with

<li [+wf.classes+]><a [+wf.classes+] .....

In other words, you can put the various wayfinder placeholders wherever you want in the tpl.

What are tpls? Assume zero knowledge of the application. Any chance you could point me to a step-by-step tutorial or something that would show me how to edit tpls?

Many of the more complex snippets (Wayfinder, Ditto and Jot among others) allow you to create a mini-template to control the output. Wayfinder allows you to make such mini-templates (we call them "tpl" to distinguish them from the main site templates) for every part of the menu, from the outer container, to each individual row of the menu. Usually you use chunks for these. The snippet provides placeholders for the various data it gets from the database or generates for each item, so you can put the desired HTML markup plus the appropriate placeholders to produce the final structure you want.

http://modxcms.com/forums/index.php/topic,34176.msg207851.html#msg207851
http://modxcms.com/forums/index.php/board,182.0.html

Wayfinder has fairly complete documentation here: http://www.muddydogpaws.com/development/wayfinder/features.html all parameters and settings along with some examples are available for you.

Basically you just need to create a chunk and tell Wayfinder what it’s called for the rowTpl. I actually do the same thing as you are asking. I prefer the "a" element to be the active one. Here is what my chunk for the rowTpl looks like:



The key piece of this is moving the[+wf.attributes+] and [+wf.classes+] placeholders into the "a" element from the li.

Hope this helps.

Great, thanks for all the answers, this really helped. Now I finally get how this thing actually works, sort of. It’s not much, but it’s a start. Btw tried the example you provided and it works just the way I needed.