apply a style to certain 's

Hi

Can you apply a style to certain <li>’s in a wayfinder menu? For example, all my buttons are blue but I’d like one of them, the "register" button, to be green. Ideally this would be set from a TV in the resource.

Cheers

Sure, there are several ways you could go about this. You can customise the Wayfinder output by specifying custom template chunks.

Also, using a TV would be easy but might not be the best approach - unless you would potentially have more than one green button or would like the end user to be able to change the colours.

Which modx version are you using?

Thanks for the reply Lucas, I’m using Revo 2.0.8.

There will be 2 buttons that will be green (two register pages for two different marathons on a running site), and one button which will be another colour to indicate the forums.

It would be great if these were triggered by TV, but open to options on how to get the job done. so I could do this with &rowTpl



and define a style name in the tv menuLiStyle and all templates without this tv or not defined would pass it over?

Looks like you’re half way there already! Now I know what you’re doing it probably does make sense to set the classes via TV.

Your rowTpl looks fine. What you need to do is create a new TV called menuLiStyle - if you haven’t already. Set the input type to Radio Button or DropDown List depending on your preference, then drop the following in the ’input option values’ box:



Drop Blue==blue into the default values box.

This will set a class of either ’blue’, ’green’ or ’orange’ to each <li>. Obviously change orange to whatever colour your forum button is. You can leave the upper case colours as is, or change them to a more appropriate name if need be.

If you don’t want blue to show, just set an output filter on the TV like this:

If you don’t mind setting the color with css and do not need to be able to change it without editing the css you can just add $rowIdPrefix=`foo` to the wayfinder call - for a page with an id of 6 this will add id="foo6" to the li tag - then just target it with css
Simple - maybe too simple for your needs