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

How to use "here" class in Wayfinder?

    • 1586
    • 33 Posts
    andreww Reply #1, 19 years, 8 months ago
    In simple static HTML I have navigation menu like this:

    <div id="navbar">
    <ul title="??????? ?????">
      <li><a href="#" class="current">???????</a>
      <li><a href="#">???????</a>
      <li><a href="#">??????</a>
      <li><a href="#">??????</a>	
      <li><a href="#">???????</a>
      <li><a href="#">?????????</a>
      <li><a href="#">? ????????</a>
      <li><a href="#">????</a>
      <li><a href="#">?????</a>
    </ul>
</div>

    Where "current" is class for active menu item.

    So, I want to re-make this HTML code into MODx template. I write something like this:

    <div id="navbar">
[[Wayfinder? &startId=`0` &level=`1` &hereClass=`current`]]
</div>


    Menu output is ok, it works, but active element looks like any other! You can see my template in work here: http://fotoalbum.ho.com.ua/index.html

    What I do wrong?

    Thanks!
      • 15987
      • 786 Posts
      kjaebker Reply #2, 19 years, 8 months ago
      Try adding this to your style sheet:


      #navbar ul li a.current {
      backgound: #FFF none repeat scroll 0%;
      color: #41A8E2;
      }
        • 19889
        • 616 Posts
        mmjaeger Reply #3, 19 years, 8 months ago
        I’m still confused on this one too - when do I use selfClass and when hereClass - moreover, how do I set up the stylesheet if there are sub-menus - I experienced that the hereClass is applied to the parent li - so if a e.g style it like this: li.current a, all the child elements get styled.

        thanks for your help.
          • 15987
          • 786 Posts
          kjaebker Reply #4, 19 years, 8 months ago
          the here class gets set for the current item and its parent, grandparent, etc...

          The selfClass gets set for only the current page.

          So if you have submenus and you do not want to style the parents like the current selected child you should use the selfClass
            • 19889
            • 616 Posts
            mmjaeger Reply #5, 19 years, 8 months ago
            got it - thank you
              • 1586
              • 33 Posts
              andreww Reply #6, 19 years, 8 months ago
              kylej, I just repleced my

              #navbar a.current {
background:  #0183CE;
}


              by this one:

              #navbar ul li a.current {
background:  #0183CE;
}


              but it still doesn’t work... another suggestions?
                • 25663 MODX Staff
                • 12,272 Posts
                Ryan Thrash Reply #7, 19 years, 8 months ago
                You’ve got more issues than simple CSS... try running that page through the validator for starters. Typically you don’t want content after the closing body tag.

                Also, your sample did not reflect the actual code output on your site:
                <div id="navbar">

    <ul><li><a href="/index.html" title="???????" >???????</a></li>
<li><a href="/news.html" title="???????" >???????</a></li>
<li><a href="/articles.html" title="??????" >??????</a></li>
<li class="current"><a href="/credit.html" title="??????" >??????</a></li>
<li><a href="/shop.html" title="???????" >???????</a></li>
<li><a href="/support.html" title="?????????" >?????????</a></li>
<li><a href="/about.html" title="? ????????" >? ????????</a></li>
<li><a href="/blog.html" title="????" >????</a></li>
<li class="last"><a href="/forum.html" title="?????" >?????</a></li>
</ul>


                The proper selector is how Kyle originally had it until I altered it to match your code sample:

                #navbar li.current a {
background:  #0183CE;
}


                The CSS you were using would never match anything, ergo it’d not render anything. Hope this helps!
                  Ryan Thrash, MODX Co-Founder
                  Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
                  • 1586
                  • 33 Posts
                  andreww Reply #8, 19 years, 8 months ago 
                  <li><a href="/index.html" title="???????" >???????</a></li>


                  Why MODx puts close </li> descriptor??? It is not required!
                  Also, I try to validate page http://fotoalbum.ho.com.ua/index.html here: http://jigsaw.w3.org/css-validator/ What can I say??? Validator is too stupid ... It say:
                  "Please, validate your XML document first! Line 20 Column 4 The element type "div" must be terminated by the matching end-tag "</div>"."

                  Where it doesn’t found </div>? I’ve checked many times – it’s ALL OK!

                  Some descriptors after <body> tag – it’s not my, it’s inserted automatically by hosting-provider. My HTML + CSS is hand-coded and 100% correct, I know what I do.
                    • 25663 MODX Staff
                    • 12,272 Posts
                    Ryan Thrash Reply #9, 19 years, 8 months ago
                    Your XHTML is completely messed up. From what you stated it sounds like you’re on a free hosting plan and I suspect you’ll have lots of problems with those auto-generated bits. The closing LIs are required for XHTML, and having a validating page makes it infinitely easier to track down bugs.

                    Best of luck.
                      Ryan Thrash, MODX Co-Founder
                      Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
                      • 1586
                      • 33 Posts
                      andreww Reply #10, 19 years, 8 months ago
                      Very very strange....
                      I uploaded my template (not integrated it with MODx, just HTML template) here: http://fotoalbum.ho.com.ua/just_template/
                      And tried to validate it. And validator says the same.... undecided I;ve checked syntax and found nothing... Where may be mistake huh