Skinning NavigationTree

[Böhringer Jochen <Jo...@tcc-products.de>]

Hello,

I'm using this fragment to include a navigation tree in my facelet's page.

<tr:navigationTree var="treeNode" value="#{cp_viewIdNavigationModel}"
startLevel="1">
	<f:facet name="nodeStamp">
		<tr:commandNavigationItem action="#{treeNode.executeAction}"
			text="#{treeNode.label}"
			shortDesc="#{treeNode.description}"
			icon="#{treeNode.icon}">
		</tr:commandNavigationItem>
	</f:facet>
</tr:navigationTree>

Now I want to change the colors of the generated links and the icon which is
displayed in front of the tree nodes to expand or close a tree node.

I tried to use this entry in my skinning file to apply a different icon:

af|navigationTree::disclosed-icon  {
content:url(/skins/kn/images/node_open_last.gif); }

it had no effect. I also defined a custom css class in my skinning file:

.cpMenuItem { color: #ff0000; }

And applied it to the tr:commandNavigationItem component to change the color
of the generated links in the tree:

<tr:commandNavigationItem action="#{treeNode.executeAction}"
			text="#{treeNode.label}"
			shortDesc="#{treeNode.description}"
			icon="#{treeNode.icon}" styleClass="cpMenuItem">
</tr:commandNavigationItem>

Also nothing happened. The expand/collapse icon is still a green arrow and
the selected link is still green without being underlined. Unselected links
are underlined.

How can I change the color and the font size of the generated links and the
icon which is used to collapse/expand the tree nodes? Also just changing the
color of the expand/collapse icon would be great.

Environment: Facelets 1.1.11, My-Faces 1.1.5 nightly, Trinidad nightly from
beginning of December.

Any help would be greatly appreciated.

Regards
Jochen