Help on getting wayfinder to output with different classes.

Hey guys, I styled an unordered list, but I can't figure out how to get wayfinder to output it this way:

<ul>
<li class="list1 active"><a href="#">Percheron Energy</a>
<ul>
<li class="list1 active"><a href="#">Technology</a></li>
<li class="list1"><a href="#">Leadership Bios</a></li>
<li class="list1"><a href="#">Process</a></li>
</ul>
</li>
<li class="list2"><a href="#">Field Services</a>
<ul>
<li class="list2"><a href="#">Technology</a></li>
<li class="list2"><a href="#">Leadership Bios</a></li>
<li class="list2"><a href="#">Process</a></li>
</ul>
<li class="list3"><a href="#">Survey</a>
<ul>
<li class="list3"><a href="#">Technology</a></li>
<li class="list3"><a href="#">Environmental Page</a></li>
<li class="list3"><a href="#">Leadership Bios</a></li>
<li class="list3"><a href="#">Process</a></li>
</ul>
</li>
</ul>


I want the children to stay the same class as the one above it. Is this possible? Any help would be greatly appreciated.

G

Why? You can use something like .list1 ul li to style anything under list1.

Here is what I have for my CSS:

#leftnav{width:216px; margin:0 0 10px 0; padding:10px 0 20px 0; float:left; background-color:#fff; font-family: "proxima-nova-alt",sans-serif; font-style: normal; font-weight:600; color:#294e78; font-size:14px; letter-spacing:1px;}

#leftnav ul{margin:0 10px 0 10px; padding:0; list-style:none;}
#leftnav ul li{border-bottom: 1px dashed #000; padding:10px 0 10px 0; text-transform:uppercase;}

#leftnav li.list1 a{color:#27aae1; text-decoration:none;}
#leftnav li.list1 a:hover{color:#294e78; text-decoration:none;}
#leftnav li.list1 a:visited{color:#294e78; text-decoration:none;}

#leftnav li.list2 a{color:#f15c22; text-decoration:none;}
#leftnav li.list2 a:hover{color:#294e78; text-decoration:none;}
#leftnav li.list2 a:visited{color:#294e78; text-decoration:none;}

#leftnav li.list3 a{color:#00a195; text-decoration:none;}
#leftnav li.list3 a:hover{color:#294e78; text-decoration:none;}
#leftnav li.list3 a:visited{color:#294e78; text-decoration:none;}

#leftnav ul li ul{margin:5px 0 5px 0;}
#leftnav li li{margin-left:30px; margin-top:5px; border:0; margin-bottom:5px; padding:0; text-transform:none;}
#leftnav li li.list1.active{list-style-image:url(assets/images/elements/lightblue_bullet_icon.png);}
#leftnav li li.list2.active{list-style-image:url(assets/images/elements/orange_bullet_icon.png);}
#leftnav li li.list3.active{list-style-image:url(assets/images/elements/green_bullet_icon.png);}

It styles my list like the image below:

I guess I don't know how to get the call right:

Here is my current call:

[!Wayfinder?startId=`2` &hideSubMenus='true'!]

You'll need custom tpls for the outerRowTpl at least. Once you get distinct classnames for the outer row (parent) items, then styling their children is simply a matter of adding the selectors to the CSS instruction. http://sottwell.com/articles/wayfinder.html

You can also try making three separate wayfinder calls, one for each color.

No need for that. You can have the outerRowTpl make use of the &rowIdPrefix property:

&rowIdPrefix default: FALSE
values: name of prefix
description: If this parameter is set, Wayfinder will replace the placeholder [+wf.id+] with a unique id consisting of the specified prefix plus the document id.
example: &rowIdPrefix=`topMenu` will output the following for doc # 29: id="topMenu29"

Then the outer (topmost) row will have a unique ID that you can use in the CSS. Of course, this would need to be adjusted if more items were added to the top row of the menu, but in the vast majority of cases that top menu level doesn't change.

I didn't suggest that because I think it will append an id to all levels of the menu (though I might be wrong).
Anyway another suggestion (if you have only three categories), is to use &firstClass and & lastClass to give different classes to the first and last item.

I does provide the [[+wf.id]] for all resources, but you don't have to use it in all of the tpls.

So I should put &rowIdPrefix='list1' in my call?