Navigation menu to MODx with Wayfinder

152 Posts

mDesign Reply #1, 18 years ago

Hi there,

I want to nave the following HTML+CSS menu in Wayfindercode+CSS:

Template in HTML (works):

  <div id="sidebar">
	<h2 class="nav">Navigation</h2>
	<a class="menu" href="?v=welkom">Welkom</a>
	<a class="menu" href="?v=wiebenik">Wie ben ik</a>
	<a class="menu" href="?v=taarten">Taarten</a>
	<a class="menu" href="?v=kleingebak">Klein gebak</a>
	<a class="menu" href="?v=tipsentrucs">Tips en trucs</a>
	<a class="menu" href="?v=aandeslag">Aan de slag!</a>
	<a class="menu" href="?v=contact">Contact</a>
	<a class="menu" href="?v=linkjes">Leuke linkjes</a>
  </div>

My own CSS styling for the menu (works):

.menu{
display:block;
width:100px;
padding:4px 2px 4px 10px;
font-size:1.1em;
font-weight:bold;
background-color:inherit;
color:#c52e54;
}

.menu:hover{
background-color:#DCADD1;
border:0px solid #cfa4f6;
}

Template in MODx aiming for Wayfinder (works):

  <div id="sidebar">
	<h2 class="nav">Bladeren</h2>
	[[Wayfinder? &startId=`0`]]
  </div>

The problem is, my own CSS I want to use for the Wayfinder snippet doesn’t work sad

Here is a working screenshot example of HTML + CSS: http://img141.imageshack.us/img141/4126/gooddt0.jpg
Here is a non-working screenshot of Wayfinder + CSS: http://img241.imageshack.us/img241/3194/wrongql5.jpg

I did read all wayfinder documents but I just don’t get it. Help!

Kind regards,
Michael ’mDesign’

Quality doesn't need a big signature.

4,205 Posts

dev_cw Reply #2, 18 years ago

You need a custom rowTpl. Put this in a chunk:

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

Now add &rowTpl=`theChunkName` to the wayfinder call (where you replace theChunkName for tha actual name you give your chunk with the code above.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

132 Posts

motoxer4533 Reply #3, 18 years ago

Quote from: dev_cw at Sep 12, 2008, 09:28 AM

You need a custom rowTpl. Put this in a chunk:
<a class="menu" href="[+wf.link+]">[+wf.linktext+]</a>
Now add &rowTpl=`theChunkName` to the wayfinder call (where you replace theChunkName for tha actual name you give your chunk with the code above.

Basically what dev_cw is saying is try this:

[[Wayfinder? &startId=`0` &rowTpl=`theChunkName`]] and replace theChunkName with whatever you named it.

152 Posts

mDesign Reply #4, 18 years ago

Okay thanks for the fast reply guys.
I’m going to try it out tomorrow at work. I’ll keep you updated.

Cheers,
Mike

Quality doesn't need a big signature.

152 Posts

mDesign Reply #5, 18 years ago

Okay guys I’m back

First of all your ’fix’ did the trick.

---------------------

The only minor problem left now is the menu being floated outside my container.

This is what I’m talking about: http://img125.imageshack.us/img125/3241/menualmostwd6.gif

I think I should make the complete navigation float more to the left but I don’t know and am unsure if that will work?

Cheers for helping me out so far already!
mDesign

Quality doesn't need a big signature.

132 Posts

motoxer4533 Reply #6, 18 years ago

Quote from: mDesign at Sep 15, 2008, 04:27 AM

Okay guys I’m back

First of all your ’fix’ did the trick.

---------------------

The only minor problem left now is the menu being floated outside my container.

This is what I’m talking about: http://img125.imageshack.us/img125/3241/menualmostwd6.gif

I think I should make the complete navigation float more to the left but I don’t know and am unsure if that will work?

Cheers for helping me out so far already!
mDesign

Hi mDesign,

I’ve just gone through your posts very quickly, and looked at the last screenshot you posted. My inital thoughts would have to be that your CSS is pushing those links out of the box they are supposed to be in.

Do they have any padding or margin set to them?

152 Posts

mDesign Reply #7, 18 years ago

Quote from: motoxer4533 at Sep 15, 2008, 10:06 PM

Hi mDesign,

I’ve just gone through your posts very quickly, and looked at the last screenshot you posted. My inital thoughts would have to be that your CSS is pushing those links out of the box they are supposed to be in.

Do they have any padding or margin set to them?

Hi motoxer4533,

I know it’s in the padding AND margin values but the problem is I don’t know how to fix it wink

I sort of fixed it for Internet Explorer but it’s still not well positioned in the navigation menu.

Anyway this topic can be locked or put in thrash or how you moderators like it wink

If I get some problems in the near future I’ll get you guys posted

Thnx for all you help.

mDesign

Quality doesn't need a big signature.