Building on the Quick Start example, you can change the colors and styles of each element in the tree using CSS styling. For available tree CSS selectors, see the jquery.wijmo.wijtree.css file in your installation folder.
- In the <head> section of your HTML file, above the script to initialize the widget, add the following style which changes the text color and background-color for several elements of the Tree.
Drop down and copy styles to paste in <head> section
| Style |
Copy Code
|
<style type="text/css">
.wijmo-wijtree
{
background-color: LimeGreen;
color: White;
}
.wijmo-wijtree-child
{
color: Black;
}
.wijmo-wijtree-parent
{
color: White;
}
</style> |
- No changes are necessary in the script or in the <body> section of your HTML file. The basic <ul> tag is sufficient to create the tree.
- Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with green background and white text, and black text for child items.
See Also
Reference
Concepts
Show All
Hide All