For beginners the following remarks may be helpful to understand Wayfinder placeholders.
If you don’t have defined your own template &outerTpl, WF will use this one as default:
<ul [+wf.classes+]>[+wf.wrapper+]</ul>
Question: How WF does know which classes to insert for the placeholder [+wf.classes+] ?
Answer: All about classes is found in the CSS-definitions (which preferably are written in own css-files).
So WF will look for a style definition for an unordered list <ul>, and f.i. will find the following:
ul.mymenu
{
....
}
The WF call then creates this output:
<ul class="mymenu"> .... </ul>
But what happens if I’ve got several different ul-classes in my CSS, f.i.
ul.firstclass
{
....
}
ul.secondclass
{
....
}
- and it’s the second one (f.i.) which refers to the menu WF should create?
Just for that there exists the parameter &outerClass (It can be omitted if there is no ambiguity). In our example the WF-call must contain &outerClass=`secondclass` - and that’s enough for WF to know that he has to build the menu using the styles of ul.secondclass and not of any other ul.
In the template &rowTpl (be it the default one or your own) we again have the placeholder [+wf.classes+], f.i.
<li [+wf.classes+] ><a href= ....>[+wf.linktext+]</a>[+wf.wrapper+]</li>
From where WF will fetch the class(es) to insert here?
A style definition for a list element <li> must exist, and it has to be a child of the adequate <ul>. So in the css file you have to write the following (observe the blank - no comma!):
ul.secondclass li.myrow
{
....
}
Consequently, for each list item WF will create this output:
<li class="myrow" ><a href= ....> .... </a> .... </li>
WF knows from the parameter &outerClass that the <li> lies in an <ul> of class "secondclass" and therefore takes the class "myrow" for it, even if there may exist other style definitions for <li> elsewhere in the CSS.
(There exist some special parameters allowing an extra styling for the first, last and actual row: &firstClass, &lastClass and &selfClass or &hereClass; see the documentation for details.)
What you have learned here:
Wayfinder relies on well-built CSS. So before you try to transform an existing Website in a MODx version you should have made a strict and tidy separation of the semantic structure (HTML)) from the layout (CSS) in your website. Doing this you already learn a lot. Later on you will see how straight the conversion into a MODx website is.
