[solved] Wayfinder, classe to a element instead of li ??

268 Posts

elz064 Reply #1, 15 years ago

Hi,

As I'm on my first Revo WF2 menu, some questions are coming.

Using a simple RowTpl and a call that will inject all classes I want, I realized those classes or id will be applied ONLY to <li>'s and NEVER to the emded <a>.
This is a working RowTpl:

<!-- rowTpl -->
<li[[+wf.id]][[+wf.classes]]>
<a[[+wf.docid]] [[+wf.classes]] href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

and the call

[[!Wayfinder?&startId=`1`&level=`1` &rowTpl=`rowTpl` &rowIdPrefix=`id-` &levelClass=`lev-` &selfClass=`current`]]

This will render

 li class="active current first"

when we are on the home page (first item of the menu, active AND current ).
That's cool.
However I want to style with an icon the Home link (only and no one else).
Simple! I can target it with a basic li.first a in my css.

Well, but what bout the active / current state of the FIRST.?
I need to target the li with active (or current) AND first afaik.

I cant target an element using two classes or it depends -maybe - on the kind of browser (?)
Here I'm forced to try to target something like "li.first.current a" wich don't work.
It could be simple if we could add classes to the link and not only to the li.

Any clues ?

thank you

[ed. note: elz064 last edited this post 15 years ago.]

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 15 years ago

I've never had a problem using multiple classnames when targeting an element in the .css file.

http://css-tricks.com/5690-multiple-class-id-selectors/

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

268 Posts

elz064 Reply #3, 15 years ago

yes you're right Thank you

had some cache issues refreshing my pages during test.

However, is there a way to put some Wf classes to link instead of it's parent ?

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 15 years ago

It should insert the classes wherever the wf.classes placeholder is placed. That's why it's a placeholder. On the other hand, I don't use Revo so maybe there's something radically different about how Wayfinder behaves.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

268 Posts

elz064 Reply #5, 15 years ago

Yes it seams to be different because thz +wf.ckasses PL does not output anything if located into the <a> (that's the purpose of this thread).
It works only if located into its embed li

863 Posts

Lucas Reply #6, 15 years ago

The classes should be output wherever the placeholder appears. You can put them anywhere you want and that's no different in Revo. I wonder if there's a problem with having it appear twice.

Can you post your rendered menu html (ie. view source) so we can see exactly what is output by Wayfinder? Along with the rowTpl chunk you are using.

And... what css styles are you trying to apply? Perhaps it could be achieved with two rules instead of trying to target multiple classes in one. Eg:

li.first a {
    background-image: url(icon.png);
}

li.current a {
    color: red;
}

The 'current' styles will then apply to all (including the 'first' element), but as background-image is not specified it will not be overridden. I hope that can be applied in your scenario, does that make sense?

268 Posts

elz064 Reply #7, 15 years ago

The classes should be output wherever the placeholder appears

I'm sorry, but it was right in Evo, but not in this Revo I'm working on.

the RowTpl code is the one listed in my 1st post of this thread.

I've tried to put the +classes PL into

li only : no pb
a only: no classes are outputed
li AND a : classes are outputed into the li only

here's some actual rendered html for the menu:

<ul>
<li class="first lev-1 active current" id="id-2"><a title="A Propos" href="a-propos.html">A propos</a></li>
<li class="lev-1" id="id-7"><a title="Réalisations" href="portfolio/">Réalisations</a></li>
<li class="last lev-1" id="id-4"><a title="Contact" href="contact.html">Contact</a></li>
</ul>

Concerning my question about targeting an element ( the <a> ) with 2 classes from its parent, it's ok, but won't works in IE6 (ok, I'm not focusing on it anymore, but it's still about 6% in France).

Goal was to get a specific bullet for the home link, AND this bullet must be different if we are on Home page OR not (usability, ergonomic thought)
so here's the concerned rules using a double classes targeting. Your example is ok only if all link have the same current icon

#menu-top ul li.home] a {
/* standard icon for home page when not on it */
    background: url("../images/home2.png") no-repeat scroll left 15px transparent;
    padding-left: 20px;

#menu-top ul li.home a:hover, #menu-top li.home.current a {
/* specific icon for home page when on it or at hover */
    background: url("../images/home2.png") no-repeat scroll left -19px transparent !important;
    padding-left: 20px;
}

[ed. note: elz064 last edited this post 15 years ago.]

863 Posts

Lucas Reply #8, 15 years ago

Bizarre. Just tested +wf.classes in an <a> tag and it worked without any problems. Wayfinder (as with MODX in general) does not care where you put the tags.

Have you updated to the latest Wayfinder snippet? Not sure what else to suggest there. If you can replicate it somewhere else it might be worth filing a bug report.

What I was getting at regarding the css is to find a way to style separately without having to target two classes simultaneously. I'm still guessing as I'm not sure how your other nav items are styled, but try something like:

#menu-top ul li.home a {
/* standard icon for home page when not on it */
    background: url("../images/home2.png") no-repeat scroll left 15px transparent;
    padding-left: 20px;
 
#menu-top ul li.home a:hover a {
/* specific icon for home page at hover */
    background: url("../images/home2.png") no-repeat scroll left -19px transparent !important;
}

#menu-top li.current a {
/* icon is already set, let's position it for 'current' state */
    background-position: left -19px;
}

Remember that lower rules override higher ones, so take advantage of that here. If you can link to your menu somewhere I'd be happy to have a crack at it wink

863 Posts

Lucas Reply #9, 15 years ago

Solved... what was the problem in the end?

268 Posts

elz064 Reply #10, 15 years ago

hi,

The pb was...me. As a PL must be proceeced regardless of its location in the code, I finally re re re (again) read my call chunk.

I simply misspell in the WF call the name of MY row tpl (wich is actually mh.RowTpl
. I let in the call a sample name (rowtpl) so I could always make all the changes of the wolrd in MY row tpl .

However WF did not returns any error regarding a row tpl that does not exists...?

It uses the default one (hardcoded in the snippet files I guess)

Regarding the css discussion, maybe I don't understood something, but in you last example, you will change the icon for ANY link that is under li.current, regardless the fact I wanted to change ONLY the home when it becomes .current.
With your rules the icon for a non home page becoming current will have its icon vanishing because It does not use a sprite one (left -19px),
but yes it could be ok if we need to uses a sprite too for evey link.