Dynamic "current state" CSS with Wayfinder navigation?

Hi, I really like the look of a menu system where the current page is highlighted in the navigation.
For a simple example, see the K2 wordpress menu theme: http://getk2.com/
This is an easy way to let the user know where he is right in the menu.

With PHP, one would dynamically control the CSS-styled navigation with an ordered list like this:

<div id="navigation">
<ul>
<li<?php if ($thisPage=="Page One")
echo " id=\"currentpage\""; ?>>
<a href="#">Page One</a></li>
<li<?php if ($thisPage=="Page Two")
echo " id=\"currentpage\""; ?>>
<a href="#">Page Two</a></li>
<li<?php if ($thisPage=="Page Three")
echo " id=\"currentpage\""; ?>>
<a href="#">Page Three</a></li>
<li<?php if ($thisPage=="Page Four")
echo " id=\"currentpage\""; ?>>
<a href="#">Page Four</a></li>
</ul>
</div>

...And a small bit of PHP at the beginning of each page which identifies the page, such as this:
<?php $thisPage="Page One"; ?> <!--- Identifies "currentpage" for navigation menu in header.php --->


However, I can’t figure out how to get such a dynamic current-state navigation system in MODx using Wayfinder.
Can anyone point me in the right direction?

Thank you!

This functionality is already built into WayFinder, so you don’t need to add any PHP to make it work. The snippet uses "here" templates for each specific case in which you might need one, and has a here class parameter that you can set as well. Take a look at the parameter list and explanations here for more detailed info:
http://www.muddydogpaws.com/development/wayfinder/parameters.html

Thank you! I will check it out.

... Coming back, now...

I really don’t get it.

The wayfinder script [!Wayfinder?startId=`0`!] just automagically fills in the demo-installed menu and content.

How do I style this "here" state? I’m sure the Wayfinder is recognizing where "here" is, but there isn’t any indication on the menu. I would guess it should be styled with CSS, but how?

A brief example line or two of code would be helpful... I don’t know what to edit in order to make the menu actually display as "here" (current state). If I’m supposed to edit the CSS, could someone give an example such as: #here { color:#333; } or whatever. If it’s something else, could I get an example of that?

If you don’t set your own "here class" as a parameter, then the default class ("active") will be added automatically. So you can just style that class however you like in your CSS. If you need to do more than just change the class for active menu items (or their parents), you can use different templates for those specific instances (see the examples on the author’s site linked in my post above), and you can do the same thing for the first and last items in a menu or submenu.

li.active a { color: #c00; } would style this state. This is the default setup.

You can also set a custom &hereTpl and set up your own here state. Take a look at the templates section of the parameter for wayfinder.

http://www.muddydogpaws.com/development/wayfinder/parameters.html

Thanks, this helped me, but for some reason...

#Navigation li.active a {
color: #000;
background-color: #fff;
}

...is putting white type on a white background, though #000 is black.

I am guessing there are a lot more default setups like li.active a that need to be styled.
The above error is most likely due to the fact that I have not styled some other default.

Is there a place where I can find all these defaults?
The MuddyDogPaws.com link shows me a bunch of tpl Templates, not default CSS attributes.

I have no idea where I can modify the Wayfinder script or tpl files. But, for now, I just want to be able to style the default attributes with CSS. That will go a long way to help me figure out how Wayfinder works.

Oh, I guess it’s just standard CSS and I must have something wrong with my specificity? Sound about right?

Yes, that sounds right.

The best way I can suggest to figure out the default results if to just use it and see the results in the source code. It will be a standard unordered list:



The simplest way to style it would be to wrap it in a <div id="id-name">.

The best way that I know to work out CSS conflicts is to use the Web Developer add-on for Firefox to edit the CSS and watch the changes live. You probably have a more specific or later declaration in your stylesheet that is changing the color of these links to white. If WayFinder is creating the XHTML the way you want it, then you just have to play with your CSS until it cooperates also.