We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 29799
    • 8 Posts
    I have one item in my navigation that I want to display in a different color from all the others. (the "buy now" link)

    How do I create the parameter in wayfinder to add a unique class="buynow" to only that item in the navigation?

    I would guess that I could do it with a template Variable, but I am not sure how to implement this.... I am fairly new to ModX.

    Thanks in advance!
      • 16183
      • 1,390 Posts
      There’s probably 4 different ways you can achieve this, I think wink

      1. If the "buy now" menu link is the last item in the menu, you can use the wayfinder class parameter &lastClass. The only thing to remember here is that this lastclass will be applied to all last items in all levels - meaning, menus, sub-menus, etc....So, if you have sub-menus, this may not work for you since your class will be applied to all last items at all levels. If you want to use this method you specify it like this in your wayfinder call:

      &lastClass=`buynow`


      WF will output the menu like so:
      <ul>
      <li >First Item</li>
      <li >Second Item</li>
      <li class="buynow">buy now</li>
      </ul>
      


      2. You can use the &firstClass, which you can guess does the opposite of &lastClass - it will appear in the first menu item, but again, at all levels. So, if you have sub-levels - sub-menus, it will appear there too.

      In the above two examples, the CSS class name specified in these parameters will appear in the [+wf.classes+] and [+wf.classnames+] placeholders. If you have read the documentation, you will know that these placeholders are placed in your WF templates (chunks)

      3. The third method involves giving your menu items unique ids. The problem with this approach is that all your menu items will have ids even if you won’t be referencing them in you CSS. In your case, you will only be interested in the id for the  "buy now" menu item. The position of the "buy now" link does not matter in this case. If you decide to do it this way, you use the parameter &rowIdPrefix.

      example

      &rowIdPrefix=`topMenu` 


      will output the following for doc # 29: id="topMenu29"

      So, something like this will be output:

      <ul>
      <li id="topMenu14">First Item</li>
      <li id="topMenu25">Second Item</li>
      <li id="topMenu29">buy now</li>
      </ul>
      


      So, all you menu items will have unique ids prefixed with "topMenu" , e.g. topMenu31, topMenu67, etc. The 31 and 67 are document ids in the tree. You will then be able to reference the "buy now" menu item in your CSS

      What you specify in this parameter, WF will place where you have the [+wf.id+]placeholder in your template chunks.

      4. The fourth method is a bit tricky and I am not sure about it. It involves playing around with the WF placeholders and referencing that as a class in your WF template chunks. Forget about this one for now wink

      I have a feeling this is not very clear...coz I have to rush out...hope it helps.

      Suggestion: Download this WF document. It will help immensely

      cheers and welcome to modx!

      /k
        • 29799
        • 8 Posts
        kongondo,

        Thank you so much. As the menu item is the 2nd in the list, I chose option 3. It outputs beautifully, now i’m just trying to figure out the css! smiley

        The help is very much appreciated, best wishes!

        Joseph
          • 16183
          • 1,390 Posts
          Joe,

          Am glad it’s working out for you....How good are your CSS skills? There’s massive tutorials on the net...could point out a few if you want...
            • 29799
            • 8 Posts
            kongondo,

            My skills are sucky, to say the least. I’m the business owner filling in for the absent designer.... smiley

            I have the <li> but then most of the definitions for links are in the embedded <a> tags.

            Am I correct that if i remove the text color definition from the <a> tag and move it to the <li> that it should be inherited to the <a>?

            Check me out at: www.vinemultimedia.com/dev/ I’m trying to change the color on the ’buy now’ link.

            I’ve played with it a bit, but put it on the burner for a while. I’ll probably take another look at it tomorrow after I clear my head.

            J
              • 16183
              • 1,390 Posts
              Quote from: thevine at Nov 06, 2008, 04:58 PM

              kongondo,

              I have the <li> but then most of the definitions for links are in the embedded <a> tags.

              Am I correct that if i remove the text color definition from the <a> tag and move it to the <li> that it should be inherited to the <a>?

              Check me out at: www.vinemultimedia.com/dev/  I’m trying to change the color on the ’buy now’ link.

              J

              You can specifically reference the <a> tags within <li> using a CSS method known as "Descendant Selectors". See the references below for more of this....

              A very basic example
              li a {some CSS properties}


              will target all links <a> within all list items <li>

              Now in your case, remember the "buy now" menu item <li> has an id. You can uniquely select the <a> of the <li>with that id and style it the way you want in your CSS. Since ids are unique, you can make the "buy now" <li> (and its links, etc) look different from the other menu items.

              Example CSS using the topMenu29 example in the post above
              #topMenu29 a {color: #E47833;
              text-decoration: none;}
              


              or to be even more specific (and better)

              li#topMenu29 a {color: #E47833;
              text-decoration: none;}
              


              In this last example, the style rule will only match the <a> of an <li> element that has an id value of "topMenu29"

              I suggest that you use this "id method" to change the color of the "buy now" menu item.

              I had a look at your dev site (nice site btw) but couldn’t see the "buy now" link/menu....

              CSS Descendant Selectors refs:

              http://css.maxdesign.com.au/selectutorial/selectors_descendant.htm
              http://www.westciv.com/style_master/academy/css_tutorial/selectors/descendant_selectors.html
              http://www.websiteoptimization.com/speed/tweak/descendant/
              http://www.w3.org/TR/CSS2/selector.html
                • 29799
                • 8 Posts
                kongondo, thanks so much, that worked perfectly!

                Buy Now = Request a Quote. smiley

                (btw, i think i’m going to change the orange to red before I go live....)
                  • 16183
                  • 1,390 Posts
                  Brilliant! Glad it worked for you... grin

                  hmm, the dev site is off-line, but I guess I will see the live site....

                  all the best!

                  /k