TutorialTheming

About customizing Fancytree appearance.

See also the online sample.

Recipes

[Howto] Customize icons

Note: the previous options icons (with trailing 's'), iconClass, and iconclass have been deprecated since v2.14:

• [Added] options.icon option/callback.
  Valid values are true, false, a string containing a class name or image url, or a callback returning that.
• [Changed] node.icon option. Valid values are true, false, or a string containing a class name or image url.
  This option existed before, but was stored in the node.data.icon namespace, and did not accept class names.
• [Deprecated] options.iconClass callback: use options.icon instead
• [Deprecated] options.icons: use options.icon instead
• [Deprecated] node.data.iconclass option: use node.icon instead
• [Deprecated] node.data.icon option: use node.icon instead

There are multiple ways to customize the standard icons or display icons depending on node types or attributes:

1. In order to change the overall look and feel, a new theme could be created as described below.

2. Hide icons altogether
   The tree option icon: false will hide all icons (except for nodes that have explicitly set the node option icon: true).

3. Define icons based on initialization data or callbacks
   The node initialization data icon: "icon_path_or_class" is evaluated by the renderer. In addition, the global tree option icon can be used to define defaults or implement a callback that returns custom configuration per node. See details below.

4. Define icons at runtime using the API
   The icon option may also be set at runtime. In this case the node must be rendered again to reflect the change:

   node.icon = "icon_path_or_class";
   node.renderTitle();

5. Override standard CSS with custom rules
   For example override the theme's default folder icons with this CSS: css span.fancytree-node.fancytree-folder > span.fancytree-icon { background-position: 0 0; background-image: url("customFolder.gif"); } span.fancytree-node.fancytree-folder.fancytree-expanded > span.fancytree-icon { background-image: url("customFolderOpen.gif"); }

6. Customize node style depending on extraClasses
   This is yet another option, as explained below.

[Howto] Customize icons using options.icon and node.icon

If opts.icon is a callback function, it will be called like icon(event, data). For example

icon: function(event, data) {
  if( data.node.isFolder() ) { return "myCustomClass"; }
},

If the returned value is a boolean or string, this value will be used.
Otherwise, if node.icon is a boolean or string, this value will be used.
Otherwise, if tree.options.icon is a boolean or string, this value will be used.
Oterhwise show the standard icon as defined by the theme and depends on the type (document/folder) and status (expanded/collapsed).

A boolean value can be used to show / hide an icon.
A string value like icon: "icon_path_or_class" is evaluated like this:
If the icon definition contains a '.' or '/' character, it is considered to be an image URL and will result in an <img src='...'> tag:

<span class="fancytree-node">
  <span class="fancytree-expander"></span>
  <img class="fancytree-icon" src="custom.png"></img>
  <span class="fancytree-title">Node 1</span>
</span>

Otherwise a class name is assumed and added to the markup. Also the fancytree-icon class name is replaced with fancytree-custom-icon:

<span class="fancytree-node">
  <span class="fancytree-expander"></span>
  <span class="fancytree-custom-icon myCustomClass"></span>
  <span class="fancytree-title">Node 1</span>
</span>

We need to add some custom CSS to assign an image:

span.fancytree-custom-icon.myCustomClass {
 background-image: url("customDoc.png");
}

[Howto] Customize node style depending on extraClasses

The node.extraClasses option adds classes to the node markup:

<span class="fancytree-node custom1">
  <span class="fancytree-expander"></span>
  <span class="fancytree-icon"></span>
  <span class="fancytree-title">Node 1</span>
</span>

Note that in contrast to the icon option, the custom class is added to the surrounding node-span. This may be preferred if we want to modify title appearance as well:

span.fancytree-node.custom1 > span.fancytree-icon {
  background-position: 0 0;
  background-image: url("customDoc2.gif");
}
span.fancytree-node.custom1 > span.fancytree-title {
  color: maroon;
  font-family: "Audiowide";
}

This can also be done using the API.

Note: While it is possible to add CSS classes to elements directly, this is not recommended, because those classes would be removed when the node is rendered the next time.
Instead, classes should be listed in the node.extraClasses property to make them sticky. A convenient way to do achieve this, is using special API methods:

node.addClass("custom1");
node.removeClass("custom2");
node.toggleClass("warning", node.data.isCritical);

[Howto] Change the checkbox icons

http://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions

#tree.pinCheckboxes span.fancytree-checkbox {
   background-position: 0 0;
   background-image: url("../app/img/pin_16x16_up.png");
}
#tree.pinCheckboxes span.fancytree-selected span.fancytree-checkbox {
   background-image: url("../app/img/pin_16x16_down.png");
}
#tree.pinCheckboxes span.fancytree-checkbox:hover {
   background-image: url("../app/img/pin_16x16_up_hover.png");
}
#tree.pinCheckboxes span.fancytree-selected span.fancytree-checkbox:hover {
   background-image: url("../app/img/pin_16x16_down_hover.png");
}

<body>
    ...
    <div id="tree" class="pinCheckboxes">
    </div>
</body>

[Howto] Define a new theme

Create a custom theme with custom css rules and sprites (icons.gif) in order to change the overall look and feel.

It is recommended to use the Less CSS pre-processor, create a new theme folder, and add custom ui.fancytree.less file that includes skin-common.less

See here for an example: /src/skin-custom-1