PDA

View Full Version : Dumb question about styling leaves in asyncTree...



violinista
21 May 2007, 7:35 AM
Hello,

I have a problem with styling my tree, which is made asynchronously: there is "iconCls":"someCustomClass" parameter with every leaf, and it is applyied with IMG tag in tree leaves (checked in source code). The CSS file for styling tree is:



.someCustomClass {
background-image: url("images/icons/someIcon.png");
}

... and it does not working. The path to icon is correct. Also tried:



.someCustomClass .x-tree-node-icon {
background-image: url("images/icons/someIcon.png");
}

And it is again not working - it again displays default 'leaf.gif' image. I am using FF2.0.

The question is: how can I modify this CSS file to get desired behavior of custom leaf image?

I have read a lot of threads but I could not realize what style combination is working. Please help, as I am not a CSS expert. Only sample of CSS file for styling leaves is needed.

Thank you all in advance. And thank you, JSext team for providing such a powerful library.

jsakalos
21 May 2007, 7:37 AM
Just a hint...

Try this:


.someCustomClass {
background-image: url("images/icons/someIcon.png") ! important;
}

violinista
21 May 2007, 7:47 AM
Thank you for the quickiest answer ever! It is working now!

Is it bug or feature, or expected FF2 behaviour?? Just to know what is happening.

Thank you again, man.

Animal
21 May 2007, 7:51 AM
Selector specificity, and the "!important" command: http://www.w3.org/TR/CSS21/cascade.html#specificity

Animal
21 May 2007, 7:53 AM
So you could also have created a selector with higher specificity:



.x-tree-node img.someCustomClass, .x-tree-node-collapsed img.someCustomClass{
background-image: url("images/icons/someIcon.png");
}

violinista
21 May 2007, 7:59 AM
I think your example relates to folder icon, as I see x-tree-node-collapsed class, which is used by folders. Or not?

Best regards to you, and thanks a lot, guys.

Animal
21 May 2007, 10:30 AM
The iconCls is applied to an img tag which is a child of the tree node which is used to display the folder/leaf icon.

So the selector above allow you to target that img. By default it uses a folder icon or a leaf icon as its background, but you can have your class applied so that any image can be used.