Wayfinder styling menu items

Hi guys, first of all lemme just express all my joy in finding such a great CMS; I’ve coming through a lot of open source CMS and i can tell that IMHO MODX is a breeze.

Well, it took me a while, but not so long, b4 starting to grasp the basic concepts that stand behind the surface, and that let u organize ur content in a very fresh and well structured way.

Now, i am opening this new thread since i got some newbie questions about Wayfinder, one of the resources i found most useful and appealing for creating menus and navigation elements along with DITTO.

Well, the fact is this, actually I am trying to recreate a navigation system that replicates exactly the bahaviours i have in my "draft" html template.

In the template, i have this simple navigation i’ve created and styled using some css and SIFR that works flawlessly and of which i am posting the code:


<ul>

<li class="folder"><a href="#">Folder1</a></li>
<li class="folder"><a href="#">Folder2</a></li>
<li class="folder"><a href="#">Folder3</a></li>
<li class="folder"><a href="#">Folder4</a></li>

<li class="folder">Folder5</li>

<li><a href="#">Folder5_SubPage1</a></li>
<li><a href="#">Folder5_SubPage2</a></li>

<li class="folder">Folder6</li>

<li><a href="#">Folder6_SubPage1</a></li>
<li><a href="#">Folder6_SubPage2</a></li>
<li><a href="#">Folder6_SubPage3</a></li>
<li><a href="#">Folder6_SubPage4</a></li>

</ul>



As u can see this is nothing but a vey simple <ul> styled accordingly to the class elements i’ve set up into my style sheet.

I’d like to reproduce such a thing using Wayfinder so that let’s say all the Folders (parent elements) i have in the page tree got green text color and all the pages contained inside the Folders got the color of text set as grey.
On my "draft" template i’ve used the .folder class to style the elements (Folders) i want to be green, and being a newbie, i could only think that i should let Wayfinder uderstand that i want to "call" that class for all my Folders (or parent) elements in the tree.

Well, i am actually stuck on how to "call" the class and create the chunks to use for the styling and how to tweak those when i call the snippet, till now i just have [!Wayfinder? &startId=`myfolderID`!] on the template i am using for my pages, but i am really lost on how to call all the needed params to let it works as i’d like.

Any help in making me understand how to create the structure for such a lame navigation would be appreciated, and thanks in advance for having the time to read through all of my post.

ok i`m still new myself but have wayfinder working, what you need to do to, to create your own <ul><li> formats  is create little chunks, then in the wayfinder call,  you tell wayfinder what that chunk is called and it will use your formatting, however please note that in each call you need to define what is going to be styled or formatted, that could be outer container,  row items, current doc etc.

So if you wanted say an id on the <ul> tag you would have to
1. Create a chunk called wfOuterMenu
2. Insert your formatting, something like this (notice I have added a container div, and given my <ul> its own style.



3.Then in your wayfinder call would look like this



The &outerTpl=`wfOuterMenu` would use the chunk we just created, the start id for wayfinder is 39, its also using &rowTpl=`wfRow` - this is just another chunk that looks something like



The chunk names (i think) can be called anything (as long as it exists) so you could have




The placeholders or template chunks can be found in the documentation, but have listed them below, but please check the wiki at http://wiki.modxcms.com/index.php/Wayfinder for examples on how you use them within your chunk.


&outerTpl
&rowTpl
&parentRowHereTpl
&hereTpl
&innerTpl
&innerRowTpl
&innerHereTpl
&activeParentRowTpl
&categoryFoldersTpl

So if you wanted class="folder" on all your <li> tags add this call to wayfinder &rowTpl=`wfRow` and then create a chunk called wfRow and inside add



Hope it helps a bit, feeling your pain.

Simon