Wayfinder in Andreas00 template

11 Posts

Trollkjeft Reply #1, 16 years, 8 months ago

Hi everyone,

I just started using MODx since a few days back and I really like the platform. However, as I’m a designer not programmer, I can’t really find out a way to make the Wayfinder to behave the way I want it to. In a project of mine I found MODx CMS to be just perfect I think. You can find it here for reference: http://modx.systemalfacet.org/

I have started using Andreas Viklunds Andreas00 template but modded it quite heavily - although just design-wise in the CSS and not much else (except for a few HTML rows in the template, but not much), especially not the snippets themselves.

In the Manager I have created a few new resouces (pages) just to see how the information will look like. Now, I can’t get the template to show these submenus properly (attached to the parent page with an indent), and I wonder of course if I have done something wrong or if it is just plain impossible with that template.

So, therefore I wonder if anyone here easily could help me out by drawing up a few guidelines so I can make it work?

I should mention that my skills are barely letting me in here

I manage basic HTML and CSS with a tutorial next to me. But that’s the way I learn quickest.

Thanks in advance!

/Chris the Swede

EDIT: Oh, I almost forgot. Here is the Wayfinder code:

[[Wayfinder? &startId=`1` &level=`0` &displayStart=`1` &startItemTpl=`startItem` &outerTpl=`outer` &selfClass=`current` &rowTpl=`row`]]

And here is the sidebar and menu CSS:

#leftside {clear:left; float:left; margin:0 0 10px; padding:0; width:200px;}
#leftside ul.avmenu {list-style:none; margin:10px; padding:0; width:200px;}
#leftside ul.avmenu li {display:inline; padding:0; width:200px;}
#leftside ul.avmenu li a {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; float:left; font-size:1em; font-weight:700; margin-bottom:5px; padding:5px; text-decoration:none; width:160px;}
#leftside ul.avmenu li a:hover,#leftside ul.avmenu li a.current {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; border-bottom:1px solid #b0b0b0; border-left:4px solid #505050; border-right:1px solid #b0b0b0; border-top:1px solid #b0b0b0; color:#505050;}
#leftside ul.avmenu ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px 0; width:133px;}
#leftside ul.avmenu ul a {padding:3px 1px 3px 5px; width:123px;}
#leftside ul.avmenu ul ul {font-size:1em; width:120px;}
#leftside ul.avmenu ul ul a {width:108px;}
#leftside h2 {font-size:1.5em; font-weight:400;}
#leftside .announce {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; clear:left; color:#505050; line-height:1.3em; margin:10px 0; padding:10px; width:150px;}
#leftside p,.announce p {font-size:0.9em;}

☆ A M B ☆
2,213 Posts

AMDbuilder Reply #2, 16 years, 8 months ago

You need to set the menu UL class to: avmenu

Try adding this to wayfinder call: &outerClass=`avmenu`

Patrick | Server Wrangler
About Me: Website | Tweets | MODX Hosting

11 Posts

Trollkjeft Reply #3, 16 years, 8 months ago

Thanks for your reply AMDbuilder! Now, the Wayfimnder call looks like this:

[[Wayfinder? &startId=`1` &level=`1` &displayStart=`1` &outerClass=`avmenu` &startItemTpl=`startItem` &outerTpl=`outer` &selfClass=`current` &rowTpl=`row` ]]

However, it still doesn’t bring forth the submenu. What can I have done wrong? Appriciate any help!

/Chris

654 Posts

mconsidine Reply #4, 16 years, 8 months ago

Not sure exactly what the result should look like. But using Firebug in Firefox I
- commented out the menu links
- added #menulist li {margin : 0 10px;} to the style sheet.
That resulted in submenus being visible and moved over by 10px.

Just a thought,
MattC

Scratch that. I see where you’re trying to put the start menu. Need to take another look ...
MattC

654 Posts

mconsidine Reply #5, 16 years, 8 months ago

Are these documents sub documents of another? What happens if you change "&level=1" to "&level=0" in the Wayfinder call?
MattC

654 Posts

mconsidine Reply #6, 16 years, 8 months ago

Using Firebug, I changed your commented-out menu code to this and it seems to display in the same manner as your existing start link :

<div id="leftside"><ul class="avmenu"><li class="active"><a href="http://modx.systemalfacet.org/" title="Välkommen">Start</a></li>
<li class="last"><a href="/index.php?id=3" title="Rollpersonen">Rollpersonen</a><ul><li><a href="/index.php?id=4" title="Poäng">Poäng</a></li>
<li><a href="/index.php?id=2" title="Bakgrund">Bakgrund</a></li>
<li><a href="/index.php?id=5" title="Egenskaper">Egenskaper</a></li>
<li><a href="/index.php?id=6" title="Ställning">Ställning</a></li>
<li class="last"><a href="/index.php?id=7" title="Finputsning">Finputsning</a></li>
</ul></li>
</ul></div>

Hope this helps ...
MattC

11 Posts

Trollkjeft Reply #7, 16 years, 8 months ago

Hi Matt and thanks for your quick reply! I have tried Firebug out as well, but as I am not that savvy with code I really don’t know where to begin.

I have tried to alter the Wayfinder call all ways possible (I tried 12 combos), both with 0 and 1, 2 and 3 even. And to answer your previous question, I have 2 level 1 pages, and five or six children to one of them, so they are the ones I want to be shown as submenues.

The strange thing is that I haven’t done anything to the snippet code from the package the template came with, and I have only changed the CSS to make it wider and with different colors, so it really should look proper.

I really appreciate the help!

11 Posts

Trollkjeft Reply #8, 16 years, 8 months ago

Quote from: mconsidine at Jan 24, 2010, 08:40 AM

Are these documents sub documents of another? What happens if you change "&level=1" to "&level=0" in the Wayfinder call?
MattC

EDIT: I have now changed it to "&level=0" so you can see what it looks like.

654 Posts

mconsidine Reply #9, 16 years, 8 months ago

How does it look when startId is changed to 0?

Forgot to mention : you could probably use the includeDocs and excludeDocs parameters to tailor what is shown as well. I’ve been trying to replicate your Wayfinder output on a local install and when startId was 0, I got the document tree. When I set it to a container, I got nothing. That’s when the idea of the includeDocs parameter came to mind.

Update : Turns out my container had some restricted doc inside which is why I didn’t see anything. Another container worked fine though ... So I’m still puzzled. Except for styling, this call

[[Wayfinder? &startId=`65` &level=`0` &displayStart=`1` &outerClass=`avmenu` &startItemTpl=`startItem` &outerTpl=`outer` &selfClass=`current` &rowTpl=`row` ]]

shows a menu of three documents that live under the one with id=65.

MattC

11 Posts

Trollkjeft Reply #10, 16 years, 8 months ago

Okay, I’m not sure what to do with this, but when entering the following call:

[[Wayfinder? &startId=`0` &level=`0` &displayStart=`1` &outerClass=`avmenu` &startItemTpl=`startItem` &outerTpl=`outer` &selfClass=`current` &rowTpl=`row` ]]

...I’m actually getting an

ul

list: http://modx.systemalfacet.org/

What did you mean Matt by includeDocs? Is that something I should put into the call like "&includeDocs=`something`"? And in such case, whats supposed to be there?