Wijmo UI for the Web
Apply CSS Styles
Wijmo User Guide > Widgets > Tree > Tree Features > Apply CSS Styles
Show All
Hide All

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.

  1. 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>
  2. 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.
  3. 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
Tree Features

Reference

wijtree API

Concepts

ThemeRoller
Style Options
Themes and Styles

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page