====== jsTree ======

VuFind uses the [[https://www.jstree.com/|jsTree]] library for rendering collapsible hierarchies in its interface. This is useful when working with hierarchical [[configuration:facets]] and [[indexing:hierarchies_and_collections|collections]].

The bootstrap3 theme includes custom CSS for the jsTree component. To use the default theme requires that you override the CSS for this component in your custom theme. If you are using SCSS/LESS the easiest way to do this is to copy the jsTree default CSS from the bootstrap3 [[https://github.com/vufind-org/vufind/blob/dev/themes/bootstrap3/js/vendor/jsTree/themes/default/style.min.css|vendor]] folder into the ''themes/%your_custom_theme%/scss'' folder. Then include the file in your SCSS ''@import'' at the top of the theme SCSS file.

To prevent both background image and fontawesome icons appearing in the jsTree it is necessary to hide icons with jstree classes. This can be achieved with something like the CSS below.

''i.js-tree {
  background-image: inherit;
  &:before {
    display: none !important;
  }
}''

Finally copy the [[https://github.com/vufind-org/vufind/tree/dev/themes/bootstrap3/js/vendor/jsTree/themes/default|required icon images]] to your custom theme's CSS folder.