Help with Styling a Wayfinder Menu

Hi,

I have used Wayfinder to create a sidebar menu. Everything is working fine, I have adjusted parameters to show what I need on each page etc.

Now, I want to style the menu I have created. I have checked out all the links above, in the wiki, etc., and I can’t find a simple, step by step tutorial for a normal, non-drop down/popout/flyout whwhatever menu .

I can sort of understand what is going on there in the more complex tutorials, but a basic tutorial would (I think) help me get a better grounding in using Wayfinder to build menus generally.

Is there a tutorial or article that goes step-by-step for styling a standard, one-level, Wayfinder menu? If not, what here...

http://www.muddydogpaws.com/development/wayfinder/examples/example-2.html

...can be removed to help me "see" the process easier? Also, I see CSS styling there, put into chunks rather than the main stylesheet for the template, right? Purely for flexibility, or another reason?

Thanks in advance.

The styling is done 100% with css. Generally you could wrap the wayfinder call in a div (or other block level element) with an ID or a class, or you could add a class/ID directly to the <ul> and style the list items.

The menu output menu will look something like this:

<div id="menu">
<ul>
<li><a href="index.php">Link Title</a></li>
<li><a href="index.php">Link Title</a></li>
<li><a href="index.php">Link Title</a></li>
</ul>
</div>

Or edit the outerTpl and use <ul id="menu"> rather than wraping the menu in a div.


Then in the style you can edit each line:

Search Google for info on using css to style list based menu

Wayfinder also adds the first, last, and active classes to the corresponding list items.

Quote from: dev_cw at Apr 04, 2008, 07:01 AM

Search Google for info on using css to style list based menu

Wayfinder also adds the first, last, and active classes to the corresponding list items.

Hi,

Thanks. Maybe I misunderstand your answer through my lack of familiarity with Wayfinder, but I think you are just showing me how to style a menu using CSS - this I know how to do. What I don’t quite "get" is how to specifically write the commands in Wayfinder that will call on the css. I don’t know, I just find those tutorials as they exist a bit unclear.

So, imagine that I have a Wayfinder instance that works and is unstyled. This wayfinder instance is only 1 level deep, no popups or fly-overs or whatever. It is very simple - [!Wayfinder? &level=`1`!]

And also, I have a div for this called "sidebar-menu" which has all the stylings I want for the said Wayfinder script.

How do I connect the two? I guess (from the tutorials) I need to create a chuck for my DIV "sidebar-menu" - (all one chunk, or separate chunks for <ul>, <li> etc?? not exactly sure from the tutes). After that, I just seem to get lost.....

There are a number of optional parameters to set classnames for the different parts of a default unordered list menu. Or, you can use the templating system to create custom layouts for each part of the menu, again using the classname parameters and the placeholders for them in your templates.

The document you can download here explains each one of these options.

Wayfinder by default will output an unordered list <ul> the style are generally stored in your site’s style sheet but you could use a chunk to hold the style and use the parameter that loads that chunk. The key concept in MODx is to build your site, including your styles. as you would do for a static site (with the appropriate paths). I would only recommend using the custom wayfinder css styles if needed, in most casses you do not need to call them and can simply style the menu as you would normally.

In your example you simply need to add the wayfinder call wrapped in a div directly into your template, no need for an additional chunk:

Quote from: dev_cw at Apr 04, 2008, 08:10 AM

In your example you simply need to add the wayfinder call wrapped in a div directly into your template, no need for an additional chunk:

<div id="sidebar-menu">
    [!Wayfinder? &level=`1`!]
</div>

Ah, deceptively simple! The tutorials had me chasing a *much* more complex solution. Thanks a lot!

Quote from: sottwell at Apr 04, 2008, 08:03 AM

The document you can download here explains each one of these options.

Thanks sottwell - that will be great for future reference. I didn’t see that on Wayfinder page I was looking at in the wiki - this one:
http://wiki.modxcms.com/index.php/Wayfinder