Wayfinder causing headaches - documents make 0 sense

Hello all,

I have recently downloaded and installed a copy of MODx to try out and hopefully use. But after a little experiementing I have come across something which is causing me nothing but headaches. When calling my page thus far the wayfinder snippet seems to produce itself a good way in from the side as apposed to almost flush with the page border which is as it should be.

If you take a look at www.hsnetwork.org/trailcms and look at the cust link you will see what I mean. I am unsure of how this displays using IE7, but the problem appears worse in Firefox 2.0.0.11 then in IE6. I have attempted to read the documentation (which did nothing for me and looks as though it was written for the script developers instead of an end users use).

I have for the life of me tried everything INCLUDING having sourced a copy of the DropMenu snippet which appears...like the wayfinder snippet.

I am wondering if I am actually missing something here. I would like to use the CMS but fear that if it is an uphill struggle like this to customise everything that it is more trouble than it is worth and will stick with my current one.

Regards in advance,

Tom.

The Wayfinder snippet just produces a nested series of unordered lists. How they appear on your page is totally dependent on your CSS styling. This may give you a start at understanding how to style lists:

http://www.alistapart.com/articles/taminglists/

Hi sottwell,

Thanks for your reply and I shall have a look at this in just a moment. However I am wondering why it displays correctly in etomite as is, but when used on wayfinder everything simply falls over?
When using etomite the menu appears perfect across many browsers (if not all) with no further input from me. Is the case here that I have to write seperate codes for different browsers dependant on whether they have their own idea on how things should be displayed?

Wayfinder will output an unordered list that will then be styled completely with CSS. In the example above what is determining the margin is that the menu is a list and by default the list is indented, you need to use CSS to remove the indentation.

Another option would be to use a custom Tpl chunk to display the menu as something other than an unordered list. You could display it in paragraphs or div or even with simple line breaks.

The flexibility of Wayfinder is that you can either use the default unordered list or you can make a custom display as needed.

CHeck this site for good description of the template options:
http://www.muddydogpaws.com/development/wayfinder/parameters.html

And some other good documentation here:
http://wiki.modxcms.com/index.php/Wayfinder200 (check out the download document)

It’s also possible that the menu you had in Etomite had different class names and ids for the ul and li elements. View -> Source from your browser will help you see this.

These are all configurable with Wayfinder, plus the option of using chunks for templates for every part of the menu structure, in whatever form you want.

The etomite menu as far as I am aware has indentation (if this is what it is) removed and does not use ul and li.

Thankyou for the links, unfortunately I had already looked at the muddydogpaws website and although it appears to be an impressive parameters list, the descriptions somewhat lack a point not to mention a way to show you how to do it and what it does (in english not code).

If you were to look at the domain I linked above without the extended dir you will see how I currently have the menu, and would preferably like to to keep it this way (with the exception of perhaps removing the background colour from hovering as this breaks up if the link wraps).

If someone could show me where on earth I wold start (as I am seriously at a loss here)

Here is how to get the output you requested. You need to create a few tpl chunks with the parts of the navigation (this is where the power and flexibility of Wayfinder come in handy).

I don’t know enough about Etomite to know how the menus were built there, so I don’t know if the part that says "MAIN MENU" is part of the menu output or the template. I am assuming that it is part of the template in this example:

1) First you need the outer most structure (what holds the nav together, by default these are <ul> tags). Create a chunk, name it whatever makes you happy, I will name it MyOuterTpl to make it easy:
MyOuterTpl =

<tr style="padding: 0px; margin: 0px;">
<td align="left" valign="top" class="navigation" style="padding: 0px; margin: 0px;"><img src="manager/media/images/_tx_.gif" alt="" height="4" />

[+wf.wrapper+]
</td>
</tr>

2) now we create the rowTpl chunk, or the way each link will be displayed within the structure we defined above. We call this chunk MyRowTpl =

<a [+wf.linktext+] href="[+wf.link+]">[+wf.linktext+]</a>

3) now we define the class that the active row will use. By default wayfinder uses the active class for this but you have a class called "highLight", so to over ride the default we use the &hereClass parameter and set it to highlight:

&hereClass=`highlight`

4) now we put it all together in a Wayfinder call:



In your template it would look like this:


Note this is not tested but looks like it should work. Hope this works.

The way I break down navigation with wayfinder is to isolate the parts of the navigation structure and then rebuild it in layers.

BTW - this image ’manager/media/images/_tx_.gif’ is not available in the MODx manager.

Note: there are a few bad practices here like using tables and having embedded inline styling. But that is a discussion for another day

Hi dev_cw,

Thank you so much for helping out It is very much appreciated.

Could I ask, where abouts in your example above does it remove the indent?

And on step 3 you meantion using the &hereclass=

How does this work? Create a chunk called &hereclass and then in there also put &hereclass? This is one bit which has more than scrambled my mind as to how to style the menu.

Also do I only have to include it in the call or does it have to be set in the snippet or a chunk or anything else?

I know what you mean about my site and tables, but I have found it works, and to be fair it displays perfectly across all browsers without the need for any hacks. Using div’s no doubt would lead to one browser displaying different from the next causing me more headaches.

There are a few inline styles but non that w3c validation should throw a fit about. The only thing I actually need to look at are the embedded flash videos which are currently using the <object> call and causing a melt down for w3c lol. But I think I have found what I need to be able to strip it right down.

Many thanks again...

It doesn’t remove the indent as such, rather it doesn’t put it in because it’s using your styling.
On the &hereClass bit, just use the snippet call dev_cw has shown, it will put in the css class from your existing stylesheet.
Just remember to add it to your template header.

Hmm,

I think I am starting to see how it all comes together. Ill have to admit its a very weird system to get used to (the wayfinder snippet I mean).

I think I will play about with the menu a little more, to see if I can get it looking....just right.

I am wondering how would you change it so it displays the links horizontally?