This sample demonstrates how you can apply custom colors to the WebObjectTree elements.
This can be accomplished by making some changes to the core Cascading Style Sheets (CSS) file.
A custom color palette is applied to the root items using the following CSS selector definitions.
This causes these five colors to be rotated through all the root items and their children.
.cwotControl > .cwotChildren > .cwotItem:nth-child(5n+1)
{
background-color: #d8ceaf;
}
.cwotControl > .cwotChildren > .cwotItem:nth-child(5n+2)
{
background-color: #c6d5a0;
}
.cwotControl > .cwotChildren > .cwotItem:nth-child(5n+3)
{
background-color: #89bc9d;
}
.cwotControl > .cwotChildren > .cwotItem:nth-child(5n+4)
{
background-color: #89adbc;
}
.cwotControl > .cwotChildren > .cwotItem:nth-child(5n+5)
{
background-color: #d39d97;
}
A bottom border and some padding are also added to all the root items using the following definition:
.cwotControl > .cwotChildren > .cwotItem
{
border-bottom-color: #606060;
border-bottom-style: solid;
border-bottom-width: 1px;
padding-right: 0.2em;
padding-left: 0.2em;
}
All other changes to the CSS properties are for cosmetic purposes only.
In this sample the WebObjectTree is allowing you to select some food, organized by food group and item.
Clicking the "Submit" button will display the full path for your selection below:
Click the "Reset" link to clear your selection.