Custom classes on elements

37 Posts

marclar Reply #1, 18 years, 7 months ago

Hey,

does anyone know a simple solution to this problem:

<ul>
	<li class="home"><a href="#">Home page</a></li>
	<li class="accounting"><a href="#">Some other page</a></li>
	<li class="tax"><a href="#">page 3</a></li>
	<li class="legal"><a href="#">something</a></li>
	<li class="business"><a href="#">whatever</a></li>
</ul>

As you see, there is a custom class on each <li> element. I made Template Variable for each of this pages with the appropriate class inside. But i dont think that is a good solution, or at least I dont know, how to use it properly. If i do it like this

<li class="[*menu_class*]">

all the <li> elements have the same class (all <li> have ’home’ class on homepage).

Thanks in advance.

Gostovanje
Domene

MODX Staff
2,502 Posts

Jay Gilmore Reply #2, 18 years, 7 months ago

I would use the &rowTpl parameter and use something like the following in your chunk:

<li class="[[+wf.linktext+]]"><a href="[+wf.link+]">[+wf.linktext+]</a></li>

This may not be perfect as I have not tried it.

Cheers,

Jay

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

37 Posts

marclar Reply #3, 18 years, 7 months ago

Thanks smashingred for the quick reply.

[[+wf.linktext+]] is not OK, because text in the link can be ’Home page’ but the CSS class is just ’home’.
Any other ideas?

Gostovanje
Domene

37 Posts

marclar Reply #4, 18 years, 7 months ago

Ok, i found quite nice solution.
In the ’Link Attributes’ field, i enter ’class="className" ’, for each page, and then i make a row template like this:

<li [+wf.attributes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

that’s what i needed.

Thanks wink

Gostovanje
Domene

66 Posts

spacefish Reply #5, 18 years, 4 months ago

marclar, I’ve been searching for this kind of solution for days and days ... thank you!

2,310 Posts

bunk58 Reply #6, 18 years, 4 months ago

You could also use the [*description*] TV and then use:

<li class="[+wf.description+]"><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

This can be helpful if you’re using web links and the Link Attributes TV is needed for other purposes.

37 Posts

VanMeter Reply #7, 18 years, 1 month ago

The correct way to do this without using the standard variables (ie. title, description, link) would be to use a Template Variable. This is how you would do it.

First create a TV. Use a name like "linkClass".

Then your code would look like this:

<li class="[+linkClass+]"><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Using [+TVName+] instead of [*TVName*] is how you call a TV from WayFinder. This will leave all of the standard variables available for what they should really be used for. This will also allow you to use @INHERIT to inherit classes from the parent documents if you wanted to so you don’t have to set the TV for every single page!

Hope this helps!

102 Posts

PH!L Reply #8, 17 years, 4 months ago

Quote from: marclar at Feb 04, 2008, 01:48 PM

Ok, i found quite nice solution.
In the ’Link Attributes’ field, i enter ’class="className" ’, for each page, and then i make a row template like this:
<li [+wf.attributes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>  
that’s what i needed.

Thanks

Sorry for bumping an old thread, but this is the exact problem I have. I am trying to use custom class for each li class like in the first post.

Ive tried to execute the solution above, but im a modx noob and cant get it working.

Ive set the page Link Attributes to: ’class="className" ’

Now does the code:

<li [+wf.attributes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Go into a chunk or TV?

Finally how do I call upon it?

[!Wayfinder?startId=`0` &rowTpl= 'rowTpl' !]

?

Sorry for the lack of knowledge

Cheers

1,390 Posts

kongondo Reply #9, 17 years, 4 months ago

@Phil,

Welcome to modx

You will really do yourself a lot of good by reading up on Wayfinder documentation (and modx documentation if you haven’t already done so)

Your WF template goes into a chunk

You then specify the WF template/chunk in your WF call but remember to use backticks for all your parameter values - so &rowTpl=`name_of_the_chunk` NOT &rowTpl= ’rowTpl’

Cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

117 Posts

0ad Reply #10, 17 years, 4 months ago

hi

cheers everyone, when i tried this i lost my ’active’, ’first’ and ’last’ classes.. anyone got any ideas on how to *add* to a unique class to each li rather than replace?