Post Reply 
 
Thread Rating:
  • 270 Votes - 2.77 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Wayfinder...show me the way
08-28-2011, 12:26 AM (This post was last modified: 08-28-2011 01:38 AM by raindog.)
Post: #1
Wayfinder...show me the way
Hello again.

i've got a simple top navigation menu I'm working on for this site http://www.welcometoperdition.com/ and I've got 2 things that i need to accomplish for it with Wayfinder.

currently i only have one document i'm using for building the template, no chunks, snippets, etc. to keep things simple for me at the moment while i figure out how things work in modx, and hopefully over time, develop a good work flow for future projects as i understand more.

the first thing I want to do is make the logo the 'home' button and remove it as a button. i may be wrong, but i thought it might work if i just hardcoded the link in the logo to act as the 'home' (right now it is a normal link w/out wayfinder). And then if i wanted to take care of removing it as a button to tell the wayfinder call, which is currently
[[!Wayfinder?startId=`0` ]] , and set it to [[!Wayfinder?startId=`1` ]] . but, when i tried that the top nav buttons disappeared Sad for which, i'm guessing because 'web' is the root (0) holding all the resources which are 1,2,3,4,5 , and when i change the wayfinder call to anything other than '0' , in my case, each document resource doesn't have any children, etc. to render in wayfinder. which brings me to this great forum to ask for some help Smile

in the same top navigation, i have custom css classes applied to the buttons. a, a:hover, a:active . (you can see all of those states if you hover and click http://www.welcometoperdition.com/ in the top nav) i would like to make the active link stay 'active' when you click on any of those pages.

the wayfinder is confusing to me (at the moment) and i don't really know how to make it do what i want it to do, or the potential for the many uses of it. my only success has been copying and pasting the default code Smile

any help and/or direction is GREATLY APPRECIATED!!!

thanks

raindog


Find all posts by this user
Quote this message in a reply
08-28-2011, 04:43 PM
Post: #2
RE: Wayfinder...show me the way
Have you gone through the written tutorial at http://codingpad.maryspad.com/2011/02/21...te-menus/? That's a great starting point and explains the basics of Wayfinder and what the parameters such as startId mean. In addition, it talks about templating the output to accomodate custom css. Work through that tutorial and then let us know what specific issues you're running into as you work through your menu.


Find all posts by this user
Quote this message in a reply
08-28-2011, 10:06 PM (This post was last modified: 08-28-2011 10:30 PM by raindog.)
Post: #3
RE: Wayfinder...show me the way
Hey Mary!

Hopefully after i learn how to design and understand MODx i will be able to contribute back to fellow MODx users in your forum and modx forums.

I understand basically how wayfinder works, and have gone through your tutorial. But i am still having some issues.

since i only have one row of links with no submenus i only have two chunks i created:

Chunk1: TopMenuULouter:
Code:
<ul>[[+wf.wrapper]]</ul>

Chunk2: TopMenuTPl:
Code:
<li[[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]><span>[[+wf.linktext]]</span></a>[[+wf.wrapper]]</li>

wayfinder call in template:
Code:
        [[!Wayfinder?
                  &startId=`0`
                  &displayStart='false'
                  &outerTpl=`TopMenuULouter`
                  &rowTpl=`TopMenuTPl`
                  &hereClass=`current_page_item`
                  &firstClass=``
                  &lastClass =`` ]]

Topmenu CSS
Code:
#menutop ul {
    height: auto;
    width: auto;
    line-height: 80px;
    display: block;
    position: relative;
    float: right;
    margin: 0px;
}
#menutop ul li {
    border-top-style: none;
    display: block;
    list-style-type: none;
    float: left;
    position: relative;
    margin: 0px;
}
#menutop ul li:first-child {
    border-left-color: #030303;
    border-left-style: solid;
    border-left-width: 2px;
}
#menutop ul li a {
    display: inline-block;
    padding-left: 15px;
    padding-bottom: 0px;
    padding-right: 15px;
    padding-top: 0px;
    float: left;
    text-decoration: none;
    color: #5e5b4a;
    border-right-color: #030303;
    border-right-style: solid;
    border-right-width: 2px;
}
#menutop ul li a:hover {
    height: 74px;
    border-bottom-width: 6px;
    border-bottom-style: solid;
    border-bottom-color: #8c886f;
    display: inline-block;
    color: #8c886f;
}
#menutop ul li a:active {
    height: 74px;
    border-bottom-width: 6px;
    border-bottom-style: solid;
    border-bottom-color: #8c1a00;
    display: inline-block;
    border-top-color: #8c1a00;
    color: #8c886f;
}

http://www.welcometoperdition.com/

The first issue is the 'active' class which you are using a 'wf.classes' to override the 'active' class. does this call use the a:active css style to style that? or should i create another css class to use for that?

I did copy/paste the wayfinder call used in your tutorial to give me a good start, but i was curious as to what and why you have &firstClass and &lastClass in your wayfinder call and why is it empty in the ' '? I didn't use a &innerTpl or &innerRowTpl in my wayfinder call because I do not have any submenus, so i deleted them in the wayfinder call.

The other issue I have with my wayfinder call is I would like to omit the 'Home' link as a button and make the logo the home link. When i try to set the &startId='0' to &startId='1' in mine, the entire menu disappears. If i can figure this out, I think i know how to hard code the dynamic home link into the logo <a>. i also tried to add &displayStart='false', but this didn't work either.

Thanks a lot Mary for all of your help!!!!


Find all posts by this user
Quote this message in a reply
08-29-2011, 10:25 AM
Post: #4
RE: Wayfinder...show me the way
(08-28-2011 10:06 PM)raindog Wrote:  The first issue is the 'active' class which you are using a 'wf.classes' to override the 'active' class. does this call use the a:active css style to style that? or should i create another css class to use for that?


wf.classes does not override the active class. What it does is insert whatever classes you've specified in your wayfinder call into the relevant places. If you look at the Wayfinder documentation at the section on parameters (http://rtfm.modx.com/display/ADDON/Wayfi...arameters) you will see what each class represents and what their defaults are. So for example &hereClass tells wayfinder what you want the class of the currently active item to be. The default is active, which is what most people tend to use, so if your template uses class="active" for the currently active item you're fine, you don't need to add &hereClass to your call. I added it in the tutorial because the template I was using had replaced "active" with "current_page_item". If for example you were using a template where the active menu item had a class of "active_menu_item" then you would set &hereClass=`active_menu_item`. Does this make sense?

(08-28-2011 10:06 PM)raindog Wrote:  I did copy/paste the wayfinder call used in your tutorial to give me a good start, but i was curious as to what and why you have &firstClass and &lastClass in your wayfinder call and why is it empty in the ' '? I didn't use a &innerTpl or &innerRowTpl in my wayfinder call because I do not have any submenus, so i deleted them in the wayfinder call.

The template I used in the tutorial did not use a different class for the last and first menu items so I emptied those items by setting them to '' to make sure there were no conflicts. Does this make sense?

(08-28-2011 10:06 PM)raindog Wrote:  The other issue I have with my wayfinder call is I would like to omit the 'Home' link as a button and make the logo the home link. When i try to set the &startId='0' to &startId='1' in mine, the entire menu disappears. If i can figure this out, I think i know how to hard code the dynamic home link into the logo <a>. i also tried to add &displayStart='false', but this didn't work either.

Thanks a lot Mary for all of your help!!!!

Look again at the documentation (http://rtfm.modx.com/display/ADDON/Wayfi...arameters) and read what &startId and &displayStart are for Smile You'll find they don't serve the purpose you're after. The parameter you're probably after is &excludeDocs.

Hope this helps and makes a bit more sense.


Find all posts by this user
Quote this message in a reply
08-29-2011, 10:31 AM
Post: #5
RE: Wayfinder...show me the way
One more thing, if you want the logo to link to the home page, don't hard code it. Use the anchor tag <a> but reference the site start page system setting. This way if you ever change your home page your link won't break. That's one of the advantages of using a dynamic cms system Cool


Find all posts by this user
Quote this message in a reply
08-30-2011, 03:49 AM
Post: #6
RE: Wayfinder...show me the way
got it! Big Grin

wayfinder call:
Code:
[[!Wayfinder?
                  &startId=`0`
                  &displayStart='false'
                  &outerTpl=`TopMenuULouter`
                  &rowTpl=`TopMenuTPl`
                  &hereClass=`active`
                  &excludeDocs=`1`
                  &firstClass=``
                  &lastClass =`` ]]

and the problem i was having with the active link was the css. i read on the modx forum that the active link should be like
Code:
ul li.active a

i didn't have it like that before, i was using the pseudo a:active style.

almost works exactly like i want...i wasn't sure if i wanted the link after you click it to still be clickable after you are on that page, but it's good enough.

i also got the logo 'home' working now...so i'm good to go on the topnav!!!!

thanks a lot mary...now i'm in for the super scary part...getResources Huh

wish me luck!


Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread:
1 Guest(s)

Return to TopReturn to Content