hummingbird-treeview
hummingbird-treeview copied to clipboard
Question: How do I change the text color of end node?
This tool is awesome.
And I have a question to reach out: how do I change the foreground text color of end node which class is 'hummingbird-end-node' like: item = item + '<label ' + data_str + '>' + "\n"; item = item + ' ' + treeText; item = item + '' + "\n";
I have defined data_str in 'li' tag: li id="id_str" data-str='style="color:green;" '>--Robin Wright</li But the text color is still: label style="color: rgb(0, 0, 0);"
Appreciate if you have time to help on this.
Hi, Thanks for using the hummingbird-treeview.
Normally you can define the colors via the options
prior to initializing the treeview:
$.fn.hummingbird.defaults.hoverColorText2 = "#6879e3";
To change the text color on mouse hover use:
$.fn.hummingbird.defaults.hoverColorText1 = "#e36834";
And to change the background color on mouse hover use:
$.fn.hummingbird.defaults.hoverColorBg1 = "#5acb29";
However, I was able to reproduce what you have observed. It's true, data-str='style="color:green;"' does not work. In general "color" will not work here. Thanks for pointing to this issue. I will add this info to the documentation. The reason is, that the text-color changes dynamically on hover. Even if "hover" is disabled, the colors are overwritten by the above options.
Therefor I have now included new data-* attributes to change text colors and backgrounds for individual nodes via the data-nonHoverColor, data-nonHoverColor_bg, data-HoverColor, data-HoverColor_bg
Have a look here: https://github.com/hummingbird-dev/hummingbird-treeview#2-simple-pseudo-html-plus-height-scroll-id-data-id-data-css-data-str-data-nonhovercolor-data-nonhovercolor_bg-data-hovercolor-data-hovercolor_bg