We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 18253
    • 34 Posts
    Hello Everyone,

    I am thrilled and jumping around my house in joy showing off your system to my girlfriend on how flexible the templete system is with MODx. After a few hours I finally figured it out and couldn’t not believe how conditioned I had become to other CMS and shopping cart applications. This is the future for sure.

    I have one quick question. I am testing my new install at http://www.haztufiesta.com/index.php?id=55 while trying to reproduce a website that I initiated manually using static pages at http://www.ampisancarlos.org/

    I am almost there and only need one little detail to make it match my current site. How do I get the left menu section heading to split? And make headers available? (a space in between)

    I created a simple template using the same .css file from the model site and add this line on my new template based on the original file:
    <div id="leftnav">[!Wayfinder?startId=`0` &hereClass=`current` &level=`1` &outerClass=`topnav`!] </div>

    I am referring to the left menu on www.ampisancarlos.org that says: AMPI INFORMATION for example

    my normal .html code on this site is:

    <li><a href="">Membership Qualifications</a></li>
    </ul>
    <ul>
    <li class="header"><a href="">Categories</a></li>
    <li><a href="">Library</a></li> the headers defined as <li class="header"> and then separated with:

    </ul>
    <ul>

    How do I get the template to recognized that Headers are class="header" and then make a space after a few menu items or so?

    Thanks everyone for such an awesome system. ModX has renewed my spirit in webdesign for 2008 !!!
      • 14050
      • 788 Posts
      Make documents that represent the headers. Then make these documents containers, that contain the pages listed under each header. In your Wayfinder call, utilize &parentRowTpl with a chunk with the following:

      <li class="header"><a href="">[+wf.linktext+]</a></li>[+wf.wrapper+]


      Here is great documentation for Wayfinder:

      http://www.muddydogpaws.com/development/wayfinder/parameters.html
        Jesse R.
        Consider trying something new and extraordinary.
        Illinois Wine

        Have you considered donating to MODx lately?
        Donate now. Every contribution helps.
        • 18253
        • 34 Posts
        Hello again,

        Thank you Jerry for the instructions. I have been working on it since yesterday to no avail. I seem to think that the Wayfinder may be wrong since it does not seem to recognize it. This is what I did:

        (1) Created a chunk called {{parentRowTpl}} with <li class="header"><a href="">[+wf.linktext+]»</a></li>[+wf.wrapper+] within the Chunk code (html)

        I associated it on this chunk with an Existing Category ampi2 which is the category name of the template ampi that I am using for this menu.

        (2) Actually before that I created a document to represent the headers, one called AMPI INFORMATION, I checked the box that made it a container and then created two pages listed under that header called Code of Ethics and Overview (there is another overview already on the menu but this is another one)

        (3) Then I started to read the muddydogpaws documentation and concluded that I needed to make my Wayfinder look like this:


        <div id="leftnav">[!Wayfinder?startId=`0` &hereClass=`current` &level=`1` &outerClass=`topnav` &parentRowTpl=`parentRowTpl`!]</div>

        What happened is that the application created the AMPI INFORMATION at the bottom of the menu on this page for example: http://www.haztufiesta.com/index.php?id=59 (Code of Ethics) but the Code of Ethics did not show up on the menu.

        If I go to the home page, www.haztufiesta.com it does show up but of course that is a different template. Can you diagnose what I did wrong?


          • 28042 ☆ A M B ☆
          • 24,524 Posts
          If that’s a parent row (ie it should have child menu items under it) then the [+wf.wrapper+] needs to go inside the final </li> tag.
            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
            • 18253
            • 34 Posts
            I thought that looked funny with it outside. I tried this:

            <li class="header"><a href="">[+wf.linktext+]</a>[+wf.wrapper+]</li>

            According to your post but have the same issue, it does not seem to work. Any idea why?
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              It’s kind of hard to tell from what’s posted here. If I could see your template (the one where your Wayfinder calls are used) then I could make a better judgement.
                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
                • 18253
                • 34 Posts
                Thanks a bunch.

                The template is this:

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
                <head>
                <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
                <base href="[(site_url)]" />
                <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
                <link rel="stylesheet" type="text/css" href="media.css" />
                <script src="[(base_url)]assets/templates/default/styleswitcher.js" type="text/javascript"></script>
                <title>[(site_name)] | [*pagetitle*]</title>
                <script src="manager/media/script/scriptaculous/prototype.js" type="text/javascript"></script>
                <script src="manager/media/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>
                <script type="text/javascript">
                function highlight(el,endcolor,duration) {
                $(el).style.background = '#ffd700';
                var fx = $(el).effects({duration: 1000, transition: Fx.Transitions.linear});
                fx.start.delay(duration/2,fx,{
                'background-color': endcolor
                });
                return false;
                }
                </script>
                </head>
                <body>
                <a name="pagetop"></a>
                <!-- top navigation begin -->
                <div id="topnav">
                  <div id="topleft"><img src="images/san-carlos-bay.jpg" alt="San Carlos Bay" width="220" height="200" class="bigpic"></div>
                  <div id="topright"><!-- #BeginLibraryItem "/_logo.lbi" --><div id="toprightphone">Call 011 52 622 855 8268 for AMPI Information [[Languages]]</div>
                <a href="index.htm"><img src="images/ampi_logo.jpg" alt="AMPI San Carlos" width="585" height="80" border="0" class="logo"></a><!-- #EndLibraryItem --></div>
                  <div id="bread"><!-- #BeginLibraryItem "_breadcrumb.lbi" -->
                <ul>
                  <li><a href="ampi-site-search.htm" class="left">Site Search</a></li>
                  <li><a href="http://www.sancarloslistings.com/listings.asp?strTemplatesURL=http://www.sancarloslistings.com/ampi-san-carlos/" class="regular">Property Search</a></li>
                  <li><a href="" class="regular">Articles</a></li>
                  <li><a href="" class="regular">News</a></li>
                  <li><a href="" class="right">Resources</a></li>
                </ul>
                <!-- #EndLibraryItem --></div>
                  <br class="clear">
                </div>
                <!-- top navigation end -->
                <div id="overlord">
                  <!-- begin containerleft -->
                  <div id="containerleft">
                    <div id="main">[*#content*] </div>
                    <div id="leftnav">[!Wayfinder?startId=`0` &hereClass=`current` &level=`1` &outerClass=`topnav` &parentRowTpl=`parentRowTpl`!]</div>
                    <!-- end leftnav -->
                  </div>
                  <!-- end containerleft -->
                  <!-- begin containerright -->
                  <div id="containerright"><!-- #BeginLibraryItem "/_quickland.lbi" -->
                  <div class="quickland">
                    <div class="quicklandimage">
                      <p><a href="homes-for-sale.htm"><img src="images/side-image1.jpg" alt="Homes For Sale" width="130" height="130" border="0" class="imagelink"></a></p>
                    </div>
                    <div class="quicklandtext">
                      <p><a href="homes-for-sale.htm">Homes For Sale</a></p>
                      <p>View Homes For Sale.  Visit the San Carlos Multiple Listing Service, MLS website to find homes. </p>
                      <p>Contact Real Estate Agents and browse San Carlos homes. </p>
                      <p><a href="homes-for-sale.htm">view our home portfolio ></a></p>
                    </div>
                    <br class="clear">
                  </div>
                  <div class="quickland">
                    <div class="quicklandimage">
                      <p><a href="land-for-sale-san-carlos.htm"><img src="images/side-image2.jpg" alt="San Carlos land for sale" width="130" height="130" border="0" class="imagelink"></a></p>
                    </div>
                    <div class="quicklandtext">
                      <p><a href="land-for-sale-san-carlos.htm">Land For Sale</a></p>
                      <p>Find Land For Sale. Visit the MLS website for San Carlos, Mexico to browse land for sale.</p>
                      <p>Your search for land in Mexico starts here.</p>
                      <p><a href="land-for-sale-san-carlos.htm">find your lot by clicking here ></a></p>
                    </div>
                    <br class="clear">
                  </div>
                  <div class="quickland">
                    <div class="quicklandimage">
                      <p><a href="condos-for-sale-san-carlos.htm"><img src="images/side-image3.jpg" alt="Condos For Sale" width="130" height="130" border="0" class="imagelink"></a></p>
                    </div>
                    <div class="quicklandtext">
                      <p><a href="condos-for-sale-san-carlos.htm">Condos For Sale </a></p>
                      <p>Condos For Sale in San Carlos, Mexico can be found by visiting the MLS website today.</p>
                      <p>Search for oceanview Condominiums in San Carlos, Sonora</p>
                      <p><a href="condos-for-sale-san-carlos.htm">view our condo listings ></a></p>
                    </div>
                    <br class="clear">
                  </div>
                  <div class="quickland">
                    <div class="quicklandimage">
                      <p><a href=""><img src="images/side-image4.jpg" alt="San Carlos Vacation Rentals" width="130" height="130" border="0" class="imagelink"></a></p>
                    </div>
                    <div class="quicklandtext">
                      <p><a href="">San Carlos Vacation Rentals</a></p>
                      <p>Vacation, holiday rentals on the beach or with spectacular ocean views can be found in San Carlos.</p>
                      <p>Find Mexican vacation rental availabilty here.</p>
                      <p><a href="">browse vacation rentals ></a></p>
                    </div>
                    <br class="clear">
                  </div>
                  <div class="quicklandbottom">
                    <div class="quicklandimage">
                      <p><a href="commercial-property-for-sale-san-carlos-mexico.htm"><img src="images/side-image5.jpg" alt="Commercial Property" width="130" height="130" border="0" class="imagelink"></a></p>
                    </div>
                    <div class="quicklandtext">
                      <p><a href="commercial-property-for-sale-san-carlos-mexico.htm">Commercial Property</a></p>
                      <p>Investment property for sale & development is available in the Tourist Destination of San Carlos, Mexico </p>
                      <p>Browse development parcels and land here.</p>
                      <p><a href="commercial-property-for-sale-san-carlos-mexico.htm">find development land ></a></p>
                    </div>
                    <br class="clear">
                  </div>
                  <!-- #EndLibraryItem --><br class="clear">
                  </div>
                  <!-- end containerright -->
                  <br class="clear">
                </div>
                <script type="text/javascript">
                var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                document.write("\<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
                </script>
                <script type="text/javascript">
                var pageTracker = _gat._getTracker("UA-1387913-1");
                pageTracker._initData();
                pageTracker._trackPageview();
                </script>
                </body>
                </html>
                


                Please let me know if you need access to the admin. It is a test site to go live on www.ampisancarlos.org anyway so no problem on my end.
                  • 28042 ☆ A M B ☆
                  • 24,524 Posts
                  Ok, your main problem is that you have &level=1 here. So you’ll only get the first level, the root level, menu items. Try setting that to 2.

                  I’m working this up on my loripsum site as my first menu demo, it should be up and working in a few minutes. It just needs styling.

                  http://loripsum.co.uk/separated-menu.html
                    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
                    • 18253
                    • 34 Posts
                    Yes, that seemed to be the right thing to do. Very interesting though. For some reason, it is not quite like the www.ampisancarlos.org
                    menu that I was trying to replicate. I am using the exact .css, divs and stuff. ...
                    It seems like the style of letters (ie, CAPITAL and Normal ) are inverted.

                        <div id="leftnav"><!-- #BeginLibraryItem "/_left.lbi" --><ul>
                      <li class="header"><a href="">AMPI Information</a></li>
                      <li><a href="">Overview</a></li>
                      <li><a href="ampi-code-of-ethics.htm">Code of Ethics</a></li>
                      <li><a href="ampi-history.htm">AMPI History</a></li>
                      <li><a href="">AMPI Governance</a></li>
                      <li><a href="">AMPI Recognition</a></li>
                      <li><a href="">Find a Professional</a></li>
                      <li><a href="">Association Executives</a></li>
                      <li><a href="">AMPI National Sections</a></li>
                      <li><a href="">Membership Qualifications</a></li>
                    </ul>
                    <ul>
                      <li class="header"><a href="">Categories</a></li>
                      <li><a href="">Library</a></li>
                      <li><a href="">Education</a></li>
                      <li><a href="">News Media</a></li>
                      <li><a href="">Directories</a></li>
                      <li><a href="">Law & Policy</a></li>
                      <li><a href="">Form Committee</a></li>
                      <li><a href="">Property Search</a></li>
                    </ul>
                    <ul>
                      <li class="header"><a href="">Resources</a></li>
                      <li><a href="">About Us</a></li>
                      <li><a href="">Contact Us</a></li>
                      <li><a href="http://www.sancarloslistings.com">San Carlos MLS</a></li>
                      <li><a href="ampi-founding-documentation.htm">AMPI Founding Documentation</a></li>
                      <li><a href="ampi-2008-billing.htm">2008 AMPI Billing</a></li>
                      <li><a href="">Useful Links</a></li>
                      <li><a href="">Site Map</a></li>
                      <li><a href=""><img src="images/rss.gif" alt="RSS Feed" width="32" height="15" border="0"></a></li>
                    </ul>
                    <!-- #EndLibraryItem --></div>


                      • 28042 ☆ A M B ☆
                      • 24,524 Posts
                      I fiddled with that quite a bit, and made some major changes. You might want to check it out again.
                        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