Revo Wayfinder Class for one tag

☆ A M B ☆
298 Posts

ojchris Reply #1, 14 years, 3 months ago

Hello.

How do you add a unique class to specific wayfinder <li> tag?

MODX Staff
2,502 Posts

Jay Gilmore Reply #2, 14 years, 3 months ago

Could you provide an explanation of your use case and desired output. It's not exactly clear what your aiming to accomplish.

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

☆ A M B ☆
298 Posts

ojchris Reply #3, 14 years, 3 months ago

Thanks for your response.

I know the Revo WayFinder provides classes for the last and first <li> tag. I now want to attach a class to the <li> tag just before the last <li> tag.

I have a menu bearing Home, Services, projects, Contact Us, About Us. My wire frame implementation will require classes for the home and About Us tag as well as one for the Contact Us tag.

How to attached a class to the Contact Us tag is my difficulty here.

793 Posts

ottogal Reply #4, 14 years, 3 months ago

You could use a &rowTpl chunk containing a modifier which adds the wanted class depending on a condition, for example on the value of [wf.docid].

☆ A M B ☆
298 Posts

ojchris Reply #5, 14 years, 3 months ago

I appreciate. But how do I achieve the conditinal modifier. Can you provide me a code sample?

793 Posts

ottogal Reply #6, 14 years, 3 months ago

&rowTpl:

[[+wf.docid:is=`##`:then=`<li class="special_class">`:else=`<li [[+wf.classes]]>`]]
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

Here ## is to be replaced by the ID of your Contact Us page.

So in the case that the actual "row" of the menu is the Contact Us row, the <li> will get the special_class; otherwise by [[+wf.classes]] the general classes are assigned.

☆ A M B ☆
298 Posts

ojchris Reply #7, 14 years, 3 months ago

Interesting! Never knew Wayfinder has an if/else construct. Seems Revo Wayfinder is quite different from Evo's.

I tried your code and seems to work but How do I attach the active class to the Contact Us tag only when we are on the that specific page. It seems if you dont define the active class in docid statement you lose it totally and if you define it in the statement it remains there perpetually, even when you are not on the Contact Us.

Thanks for your help.

793 Posts

ottogal Reply #8, 14 years, 3 months ago

Okay, I made it a bit too simple.
You want the general classes applied to the Contact Us page too.

You could have the idea to write this in the then-part:

:then=`<li [[+wf.classes]] class="special_class">`

But this would be rendered to

<li class="...the general classes here ..." class="special_class">

that is, the class= occured twice.

To avoid this, you take the placeholder [[wf.classnames]] instead of [[wf.classes]]. The first one fetches the classes without the class=. So you have to put that in seperately, and only once:

:then=`<li class="[[+wf.classnames]] special_class">`

So the whole &rowTpl chunk becomes

[[+wf.docid:is=`##`:then=`<li class="[[+wf.classnames]] special_class">`:else=`<li [[+wf.classes]]>`]]
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

I didn't test it myself, but it should work like this.

54 Posts

pauloneill79 Reply #9, 14 years, 3 months ago

Hello all,
I'm trying to create a sequential order of classes on a list of <li>. It's similiar-ish to this thread and was wondering if anyone knew how to do it.

The desired output would be;

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

8 Posts

Andrew Reply #10, 14 years, 3 months ago

For the incremental classes, I found this thread which was answered

https://forums.modx.com/thread/39456/increment-custom-variable-in-rowtpl-output