Does your classnames option work? It should as far as I can tell. In his case, I suspect he is using [[wf.classes]] in his chunk, i.e. <ul [[wf.classes]]> in which case Wayfinder will replace wf.classes with class="nav". It’s been a while since I read the WF book but I believe this is the case.
Remember wf.classnames won’t output class="" but wf.classes will. So if you use wf.classes and don’t specify &outerClass or &innerClass then the output will simply be <ul class="">
Does this make sense?
That does make sense, I think. And the classnames do work. The frustrating thing is that the site defaults to the css of regular anchor tags, and not the style of my ".nav". I’m getting the same output, wither or not I’m using
<ul class="[[+wf.classnames+]] nav">[[+wf.wrapper+]]</ul>
with
[[Wayfinder? &startId=`0` &outerTpl=`menuContainer &outerClass=`nav`]]
or
<ul[[+wf.classes+]]>[[+wf.wrapper+]]</ul>
with
[[Wayfinder? &startId=`0` &outerTpl=`menuContainer &outerClass=`nav`]]
It’s even the same if I just use
[[Wayfinder? &startId=`0`]]
So I’m still not really sure what is doing what. I assume I don’t need the [[+wf.classnames]] in the chunk if i just specify the &outerClass=`nav` on the template, correct? But since I’m getting the same output, no matter what I change, are they all just defaulting to <ul class="">? Is that why they are styled like anchor tags and not li items?
Here’s my CSS just in case, but I’m pretty sure that all checks out:
#sidebar ul.nav{
text-align: left;
margin: 7px 5px 8px 0px; padding: 0;
}
#sidebar ul.nav li {
list-style: none;
padding: 8px 10px;
margin: 0;
border-bottom: 1px solid #111;
}
* html body #sidebar ul.nav li {
height: 1%;
}
#sidebar ul.nav li a {
text-decoration: none;
border: none;
color: #5d5d5d;
font-weight: bold;
font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial, Sans-serif;
font-size: 14px;
/* letter-spacing: .5px; */
}
#sidebar ul.nav li a span {
color: #444;
font-family: Georgia, 'Times New Roman', Times, serif;
font-style: italic;
font-weight: normal;
font-size: 11px;
}
#sidebar ul.nav li a:hover,
#sidebar ul.nav li a:hover span {
color: #fff;
}
#sidebar ul.nav ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.nav ul li { border: none; }
And the complete template code:
<body>
<div id="wrap"> <!-- wrap starts here -->
[[$Color Header]]
<div id="content-wrap"> <!-- content-wrap starts -->
<div id="main">
[[*content]]
</div>
<div id="sidebar">
[[Wayfinder? &startId=`0` &outerTpl=`menuContainer &outerClass=`nav`]]
[[*color home-sidebar info]]
[[*color home-sidebar info2]]
</div>
</div> <!-- content-wrap ends-->
[[$Color Footer]]
</div> <!-- wrap ends here -->
</body>
</html>
I hope this all makes sense
, thanks for your help.
