Wayfinder Assitance (For a COMPLETE Nub)

4 Posts

darkoddity8 Reply #1, 14 years, 11 months ago

So, I apologize for asking for help on this, but it's kind of a last resort as I've driven myself to complete frustration. I am attempting to port in a template to MODx Revolution myself. Now a bit about my background; I am not a coder. I can look at code and understand what is being done with it and what the outcome is supposed to be, and sometimes re-configure it. However the understanding of what is what on a technical level still escapes me.

Right now; I've managed to pretty much import everything on my theme and I'm now stuck on the wayfinder setup for menu generation. Even with the wiki, and the most helpful tutorial I've found so far, I'm still struggling significantly.

What I was hoping for, was someone to take the menu code I have, and comment next to each line which ones I should put in what Tpl chunks for the wayfinder call to use. Now.. I know this is kind of a silly request but as I've mentioned I don't have a background in programming, web development or design and I've kinda gotten in over my head.

The site is just for personal use for a clan site for a video game so it's nothing major, but I love MODx and would love to get this working right, because as I'm sure everyone here knows; managing content on a site with MODx once it's been set up is a breeeeeze lol.

Anyways, the code for the nav menu is below... What I was hoping someone would do is go next to each line (not every line) and notate which Tpl chunk should be used for that line so I can learn which ones are needed where. (IE "// Use &outerTpl for this line")

			<!-- START NAV -->
            <div id="nav"> // I know I need to keep this.
				
				<ul class="level-1 black">
					
					<li>
						<a href="index.html">Home</a><span> welcome</span>
						<ul class="sub-menu">
							<li>
								<a href="#">Slider</a>
								<ul class="sub-menu">
									<li><a href="home_full_width_fade.html">Full width fade</a></li>
									<li><a href="home_nivo_big.html">Nivo big</a></li>
									<li><a href="index.html">Slider arrow</a></li>
								</ul>
							</li>
							<li><a href="#">Footer</a>
								<ul class="sub-menu">
									<li><a href="index.html">Big footer</a></li>
									<li><a href="home_small_footer.html">Small footer</a></li>
								</ul>
							</li>
							<li><a href="#">Body</a>
								<ul class="sub-menu">
									<li><a href="home_with_sidebar.html">With sidebar</a></li>
									<li><a href="index.html">Without sidebar</a></li>
									<li><a href="home_without_slider.html">Without slider</a></li>
								</ul>
							</li>
						</ul>
					</li>
					
					<li>
						<a href="#">Colors</a><span> & skins</span>
						<ul class="sub-menu">
							<li>
								<a href="#">Colors</a>
								<ul class="sub-menu">                           
									<li><a href="index.html">Black</a></li> 
									<li><a href="skin_blue.html">Blue</a></li>
									<li><a href="skin_grey.html">Grey</a></li>
									<li><a href="skin_violet.html">Violet</a></li>
									<li><a href="skin_ciano.html">Ciano</a></li>
									<li><a href="skin_white.html">White</a></li>
									<li><a href="skin_red.html">Red</a></li>
									<li><a href="skin_green.html">Green</a></li>
									<li><a href="skin_brown.html">Brown</a></li>
									<li><a href="skin_pink.html">Pink</a></li>
									<li><a href="skin_darkgrey.html">Darkrey</a></li>
								</ul>
							</li>             
							<li>
								<a href="#">Skins</a>   
								<ul class="sub-menu">    
									<li><a href="skin_wood.html">Wood</a></li>
									<li><a href="skin_fun.html">Fun</a></li>
									<li><a href="skin_grunge.html">Grunge</a></li>
									<li><a href="skin_sketch.html">Sketch</a></li>  
								</ul>
							</li>      
						</ul>
					</li>
					
					<li>
						<a href="#">Corporate</a><span> other pages</span>
						<ul class="sub-menu">
							<li><a href="about_us.html">About us</a></li>
							<li><a href="full_width_page.html">Full width page</a></li>
							<li><a href="left_sidebar.html">Left sidebar</a></li>
							<li><a href="right_sidebar.html">Right sidebar</a></li>   
							<li><a href="404.html">404 Page</a></li>
						</ul>
					</li>
					
					<li>
						<a href="#">Portfolio</a><span> our works</span>
						<ul class="sub-menu">
							<li><a href="portfolio_3_column.html">3 Column</a></li>
							<li><a href="portfolio_with_slider.html">With slider</a></li>
							<li><a href="portfolio_big_image.html">Big Image</a></li>
						</ul>
					</li>
					
					<li>
						<a href="#">Shortcode</a><span> html tag & more</span>    
						<ul class="sub-menu">
							<li><a href="shortcode_tipography.html">Tipography</a></li>
							<li><a href="shortcode_alertbox.html">Alert Box</a></li>
							<li><a href="shortcode_buttons.html">Buttons</a></li>
							<li><a href="shortcode_sections.html">33 Icon Section</a></li>
							<li><a href="shortcode_nivo.html">Nivo Slider</a></li>
							<li><a href="shortcode_tabs.html">Tabs and Toggles</a></li>
							<li><a href="shortcode_tables.html">Table</a></li>
							
							<li><a href="shortcode_lists.html">Styled List and Icon</a></li>
							<li><a href="shortcode_columns.html">Columns</a></li>
							
						</ul>
					</li>
					
					<li><a href="blog.html">Blog</a><span> news</span></li>
					
					<li>
						<a href="contact.html">Contact</a><span> get in touch</span>
						<ul class="sub-menu">
							<li><a href="contact.html">With google map</a></li>
							<li><a href="contact_without_map.html">Without map</a></li>
						</ul>
					</li>
					
				</ul>
				
			</div>      // I know I need to keep this.      
			<!-- END NAV -->

Again, I know it's a silly request; but as I'm tromping through and learning what I can, the assistance will be DRASTICALLY appreciated.

Thank you so much to anyone who takes the time to help me out!

This question has been answered by whistlemaker. See the first response.

discuss.answer

387 Posts

whistlemaker Reply #2, 14 years, 11 months ago

You do not need any templates (Tpl) - the defaults will work for your menu
You need to add:
&outerClass=`level-1 black`
&innerClass=`submenu`

this will give your ul tags the classes they need.
To get the outer div just wrap your wayfinder call with the div like this:

<div id="nav">
[[Wayfinder  &innerClass=`submenu`  &outerClass=`level-1 black` &so on ... ]]
</div>

Why do you want

<a href="whatever">Home</a><span>some text</span>

instead of

<a href="whatever">Home<span>some text</span></a>

Quickly off the top of my head I'm not sure how to do the first - probably could be done but not sure why.

4 Posts

darkoddity8 Reply #3, 14 years, 11 months ago

Thanks Whistlemaker for the reply!

The good news is your post has helped me make progress!

I've updated my wayfinder call to be the following:

[[!Wayfinder?
        &startId=`0`
        &level=`0`
        &outerClass=`level-1 black`
        &innerClass=`submenu`
        &rowTpl=`BolderRow`
        &hereClass=``
        &firstClass=``
        &lastClass =`` ]]

And it works.. for the most part. The problem I am running into now is it's not generating the sub-menus at all. I've got the site up in its WIP state here.

The BolderRow being called for the &rowTpl, is coded like this:

<li><a href="[[+wf.link]]" title="[[+wf.title]]" >[[+wf.title]]</a><span> [[+description]]</span></li>

The reason for the span not being part of the link as you asked previously; is so it can have a "mini description" underneath it as you can see on the WIP portion.

The final output of the menu with wayfinder right now as shown from view source on the front end is this:

<ul class="level-1 black"><li><a href="http://taurifederation.com/" title="Home" >Home</a><span> !??!?</span></li>
<li><a href="index.php?id=2" title="This is a test page!" >This is a test page!</a><span> test?</span></li>
</ul>

So, any tips to help me get the sub-menu to show up would be excellent. From there I think I'd be done with setup. All I'd have to do is set up the div tags for the other page layouts I'll be using then voila!

Anyways, thanks again for the help it's been massively appreciated Whistlemaker!

387 Posts

whistlemaker Reply #4, 14 years, 11 months ago

the sub menu should be showing up - I can only suggest checking the obvious first:

1 - you have some resources under either your home page or your test page in the resource tree in the manager
2 - these resources are published, and not hidden from the menu

if this checks out
clear the cache (always try this if something isn't working)
and you could also try &level=`1` - even though what you have should work

4 Posts

darkoddity8 Reply #5, 14 years, 11 months ago

I had already done step 1/2. All the relevant pages are published, and they aren't hidden from the menu. I even moved the pages around, recreated several times over (as they have no important content) with no luck.

I didn't think to clear the cache, unfortunately however it did not work. sad

As far as the menu level, I've tried that with numbers up to 4 with no luck. sad

Thanks for the reply.

4 Posts

darkoddity8 Reply #6, 14 years, 11 months ago

Just figured it out! Yay for experimentation and then having an "omg I can't believe I missed that" moment!

This was my problem:

<li><a href="[[+wf.link]]" title="[[+wf.title]]" >[[+wf.title]]</a><span> [[+description]]</span></li>

I was missing the

[[+wf.wrapper]]

entry to give wayfinder a place to PUT the sub-menu lol...

<li><a href="[[+wf.link]]" title="[[+wf.title]]" >[[+wf.title]]</a><span> [[+description]]</span>[[+wf.wrapper]]</li>

Corrected the same issue with the sub-sub-menus so it can actually go deeper. ^_^

Anyways, I still give you a huge thanks for the help on my initial roadblock Whistlemaker.

I wouldn't have figured that out on my own.

Answered Wayfinder Assitance (For a COMPLETE Nub)