First up, apologies if it looks like I am bombarding these forums. I am just trying to convert from chameleon theme to Valo, and am having issues left, right & centre. This is probably due my very limited CSS knowledge!
Anyway, we had custom icons in our chameleon tree, defined in a fashion similar to as follows:
.v-tree-node.v-tree-node-searchResults {
background-image: url('results.gif');
background-repeat:no-repeat;
background-position:0px 4px;
}
I would simply add the style “searchResults” to my tree node, and my custom icon would appear.
This still happens in Valo, but whenever I select a row the image disappears. It appears to be drawn over by the gradient background put up by the following selector.
.v-tree-node-selected:after{}
If I inspect using dev tools, and lower the ‘opacity’, I can start to see my custom icon coming through.
I don’t really know what these before & after pseudo elements are, but its obvious the tree are styled differently from chameleon. In chameleon, the ‘selected’ background wouldnt actually span across the ‘icon’ part of the tree, but only the ‘text’ part.
Any quick ideas on how I can resolve this would be greatly appreciated. I have spent hours on it already, and am not really getting anywhere.
Any ideas guys? I have temporarily reduced the opacity as mentioned in my first post, but it looks slightly odd having a different selection colours in our trees & tables.
Hi Lee, and sorry for keeping you waiting all this time. I haven’t taken the time to scan the forums in a while for Valo related questions. But here I am now
You’re totally correct about Valo styling Trees differently than other themes. It is a bit of a hack (CSS wise), to get the desired end result of the selection spanning the whole item “row”, not just the text part of it. The Tree element structure should really be rewritten, but that wasn’t an option in 7.3, so I took the liberty of hacking it.
Nonetheless, I think you can still achieve what you’re after, by altering your CSS a bit.
I tried your solution, and it does indeed now show the icon when the tree row is selected.
However, It has a few side-effects though that make it unusable for me:
The whole tree looks as if its shifter slightly to the right (I assume because the component where the icon used to be drawn is still there, just now with nothing in it). I could live with this, but…
… the part of the tree that the user needs to click on to expand/collapse is still in the original position, and our icon is no longer there. It means when the user clicks on the icon to expand/collapse nothing happens, but if they click to the left on a seemingly empty space, it works.
