We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

simple Wayfinder call

    • 43358
    • 19 Posts
    dclayton Reply #1, 13 years, 6 months ago
    Hi,

    i am new to Wayfinder and Modx. I appreciate the community here.

    Please note the simple inline footer menu on the bottom right....it is just a simple <a href> line with pipes:

    http://c0175.paas2.tx.modxcloud.com/

    I am trying to construct the simplest of Wayfinder calls...here is the HTML from the footer of the It-Fits template with my unsuccessful start of a Wayfinder call.:

    <p>
    <span class="left">CSS Junction © - 2012 | Released under Creative Common License. <a href="#">Goto Top</a></span>
    <!--[[!Wayfinder?

    &startId=`0`

    &rowTpl=`right_footer_menu`

    &firstClass=``

    &lastClass =`` ]]-->


    <a href="index.html">HOME</a> | <a href="http://c0175.paas2.tx.modxcloud.com//index.php?id=4">IDEA Courses</a> | <a href="http://c0175.paas2.tx.modxcloud.com//index.php?id=5">Project Tender</a> | <!--a href="blog.html">BLOG</a--><!--a href="contact.html">CONTACT US</a-->
    </p>

    Maybe somebody can point me towards the proper chunks and wayfinder call?...gracias
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #2, 13 years, 6 months ago
      You'll need an outerTpl like this
      [[+wf.wrapper]]

      And a rowTpl like this
      <a [[+wf.classes]] href="[[~[[+id]]]]">[[+wf.linktext]]</a>

      Since it's only the one level, I don't think you need the [[+wf.wrapper]] in the rowTpl.

      Use the CSS to put a border-left on the links, except for the a.last link.
        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
        • 43358
        • 19 Posts
        dclayton Reply #3, 13 years, 6 months ago
        that looks good except for the pipe menu dividers... can you explain the .css part?

        also, if anybody has an idea why the youtube linked video in <aside> (right side) has that weird top half shading I would be obliged. I changed the photos and they all have the same shading...something in the .css I cannot identify...

        footer[role=contentinfo] {
        background: url(../images/leather-pattern.png);
        border-top: 4px dotted #444;
        -moz-box-shadow: inset rgba(0, 0, 0, 0.1) 0 10px 10px, rgba(255, 255, 255, 0.7) 0 10px 10px;
        -webkit-box-shadow: inset rgba(0, 0, 0, 0.1) 0 10px 10px, rgba(255, 255, 255, 0.7) 0 10px 10px;
        box-shadow: inset rgba(0, 0, 0, 0.1) 0 10px 10px, rgba(255, 255, 255, 0.7) 0 10px 10px;
        color: #dfe9f2;
        padding: 10px 0;
        }
        footer[role=contentinfo] p {
        margin: 0 auto;
        width: 960px;
        font: 11px/16px Helvetica, Arial, Tahoma;
        text-align: right;
        overflow: hidden;
        }
        footer[role=contentinfo] p .left {
        text-align: left;
        }
        /*
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          sottwell Reply #4, 13 years, 6 months ago 
          .footer a{border-right: 1px solid #000;}
.footer a.last{border-right: none;}


          Actually, I would just use the default Wayfinder unordered list and style that, using display:inline for the li elements. It's a lot easier.

          Either that, since this is in the footer and I really don't intend to change the appearance of the links when active, I'd just leave it hard-coded. It's not like those are going to change, after all. Usually it is a site utilities type menu, with various legal pages (terms of use, privacy policy, site map, contact, etc) and what-have-you anyway, it doesn't need to be dynamic. [ed. note: sottwell last edited this post 13 years, 6 months ago.]
            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
            • 28042 ☆ A M B ☆
            • 24,524 Posts
            sottwell Reply #5, 13 years, 6 months ago
            Line 236 of main.css
            section[role=banner] article[role=main] aside:after {
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.8) inset, 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -6px 0 rgba(0, 0, 0, 0.3) inset, 0 -7px 0 rgba(255, 255, 255, 0.2) inset;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
              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
              • 43358
              • 19 Posts
              dclayton Reply #6, 13 years, 6 months ago
              ....<snip>
              Either that, since this is in the footer and I really don't intend to change the appearance of the links when active, I'd just leave it hard-coded. It's not like those are going to change, after all. Usually it is a site utilities type menu, with various legal pages (terms of use, privacy policy, site map, contact, etc) and what-have-you anyway, it doesn't need to be dynamic.

              I agree...I am just going to hardcode this. It is easier...I wanted to see what I could do with Wayfinder and since I am new to Modx (and almost new to html) I am experimenting a little...thank you MIss Sotwell... [ed. note: dclayton last edited this post 13 years, 6 months ago.]