Porting existing Designs to Modx

25 Posts

ballack13 Reply #1, 16 years, 4 months ago

Folks,

I have heard alot of good things about modx so today have taken the step to port 2 deisgns I own.

The problem I am having atm is that for both designs the designer coded them using divs instead of ol/ul.

<div class="menu_area">
      <div class="home_link float_left"><a href="index.html"><img src="images/home_replace.png" alt="Home" width="67" height="77" border="0" /></a> </div>
      <div class="flavours_link float_left"><a href="flavours.html"><img src="images/flavours_hover.png" alt="Flavours" width="67" height="77" border="0" /></a> </div>
      <div class="gallery_link float_left"><a href="gallery.html"><img src="images/gallery_hover.png" alt="Gallery" width="74" height="77" border="0" /></a> </div>
      <div class="logo_area float_left"> <a href="index.html"><img src="images/logo.png" alt="Logo" width="458" height="118" border="0" /></a> </div>
      <div class="contact_link float_left"><a href="contact.html"><img src="images/contact_hover.png" alt="Contactome" width="73" height="77" border="0" /></a> </div>
      <div class="blog_link float_left"><a href="blog.html"><img src="images/blog_hover.png" alt="blogome" width="60" height="77" border="0" /></a> </div>
    </div>

Is there a way/snippet to automatically generate the navigation menu or am I best leaving it hard coded and link to the relevant pages?

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 16 years, 4 months ago

Use the Wayfinder snippet. There is a wonderful ebook here, and I’ve attached a .pdf of a "cheatsheet" that I don’t remember where it came from.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

561 Posts

samba Reply #3, 16 years, 4 months ago

Hi,
And welcome. That’s a very interesting question. The menu app for MODx, as you no doubt know, is Wayfinder, and it’s truly a killer app.

It is true that by default, Wayfinder uses lists and list items by default. But you can template Wayfinder to use almost any sort of HTML that you’d like. If you go here, take a look at "template chunks":

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

So you could change &rowTpl to something like this (you’ll need to adjust it, I’m sure):

<div[+wf.id+] class="menu_area">
	<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a>
	[+wf.wrapper+]
</div>

And then you’ll adjust your Wayfinder call to use this template. For examples of that, the default MODx menu chunks will give you an idea.

And if that proves cumbersome, sure, just use a hard-coded menu. To make it a little more flexible, you could stick your hard-coded menu in a chunk, and then stick {{NellyMenuChunk}} or what-have-you in your templates, so you can edit it quickly for all templates it’s in.

That should get you going!
Dave

MODx and Wordpress development
Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4

25 Posts

ballack13 Reply #4, 16 years, 4 months ago

Thanks for the reply, gonna have a read of the ebooks and links posted?

Another question:
If I do just decide to use a chunk what do I list the a href as? the page ids?

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 16 years, 4 months ago

The preferred way to hand-code a link is

<a href="[~xx~]">

where the xx is the resource ID in question.

But Wayfinder is the best way by far. You can use its mini-templating system to create just about any kind of output you could possibly want. Add some creative CSS, and you have a perfect menu.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

25 Posts

ballack13 Reply #6, 16 years, 4 months ago

Wayfinder and ditto are way over my head atm embarrassed

So I hard coded using the page ids (~xx~) and it displayed correctly. Is there a way to use friendly urls using this method?

I WILL learn Wayfinder but just need these designs ported atm so will be able to get my head right for a clean template.

Thanks for help so far grin

561 Posts

samba Reply #7, 16 years, 4 months ago

Nelly,
Those things can be daunting, indeed. When you feel like wading into Wayfinder (which is one of the best apps I’ve ever seen on any system!), a painless way to start is to simply stick the following call in your template and watch what it does without any parameters (assuming you’re running Evolution):

[!Wayfinder? &startId=`0`!]

Then you can play with parameters to see what happens. That’s the hands-on way, the manual is also excellent for those who like that.

Cheers, D

MODx and Wordpress development
Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 16 years, 4 months ago

By itself, Wayfinder will generate a simple nested unordered list, which for years has been the recommended way to manage menus. It by default sets the current page (and its parents if it’s a submenu item) with a classname of "active", plus the last item of each list has a classname of "last", so just as it is you have a lot of room for using CSS to get it just the way you want it.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org