# Example: Theming

Include a custom CSS after the standard CSS to override theming.
Some nodes have their `data.addClass` attribute set.
Finally, the last two nodes use the `data.icon` attribute.
See the Theming Tutorial for details.

Skin:

- Standard nodes, modified by extra CSS rules
  - Sub-item 4.1
  - Sub-item 4.2
- Override CSS style per node
  - class="custom1": Additional classes are copied over to outer <span>
  - class="custom1": Additional classes are copied over to outer <span>
- Use 'data-NAME' attributes to define additional data
  - Node with standard CSS, but custom icon
  - Folder with standard CSS but custom icon
  - 'icon' is directly added to the image <span>, so jQuery stock icons may be used
- Use 'data-json' attribute to define additional data
  - Node with standard CSS, but custom 'data-icon'
- Use render callback
  - Node hat will be handled by 'render' calback

Fancytree project home Link to this page Example Browser View source code