Styling LI with different Icons

I’m using a CSS list menu where is each LI uses a different icon. Example:

<ul class="global-header-links">
<li class="iconItem-default icon-home"><a href="[~1~]" title="Link 01">Link 01</a></li>
<li class="iconItem-default icon-info"><a href="[~2~]" title="Link 02">Link 02</a></li>
<li class="iconItem-default icon-user"><a href="[~3~]" title="Link 03">Link 03</a></li>
<li class="iconItem-default icon-mail"><a href="[~4~]" title="Link 04">Link 04</a></li>
</ul>

I’ve tried using:
[!Wayfinder? &startId=`0` &level=`0` &includeDocs=`1,3,14,6` outerTpl=`wf-OuterTPL` &rowTpl=`wf-RowTPL` &outerClass=`global-header-links` &rowClass=`iconItem-default icon-home icon-info`!]

but it will only style the LI with the same icon that’s last in the list for &rowClass.

wf-OuterTPL
<ul [+wf.classes+]></ul>

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

Looking through the parameters I’m not sure if this can be done, if not what am I doing wrong!?

Yes it can be done...easily

Easiest way, I think, is to give each of the li a unique id. To do this in WF use the parameter



Then in your CSS you can select and style those ids differently

cheers/k

ps: sorry, I’m in some hurry and cannot elaborate further..searching the forums for rowIdPrefix might help too

I think this same problem happened in this thread:
http://modxcms.com/forums/index.php/topic,29724.msg180786.html#msg180786

(It might help)

Thanks for the posts.

I’ve tried &rowIdPrefix=`top-nav` and added <li[+wf.id+]> to my &rowTPL. It seems to work as long as the CSS has the ids set right.

CSS:
#top-nav1 { background-image: url(images/icons/home.gif); }

Output HTML:
<ul class="global-header-links">
<li id="top-nav1" class="iconItem-default"><a href="#" title="Link 01" >Link 01</a></li>
<li id="top-nav2" class="iconItem-default"><a href="#" title="Link 02" >Link 02</a></li>
<li id="top-nav3" class="iconItem-default"><a href="#" title="Link 03" >Link 03</a></li>
<li id="top-nav4" class="iconItem-default last"><a href="#" title="Link 04" >Link 04</a></li>
</ul>