About Features Downloads Getting Started Documentation Events Support GitHub

Site Tools


development:architecture:jstree

jsTree

VuFind uses the jsTree library for rendering collapsible hierarchies in its interface. This is useful when working with hierarchical facets and 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 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 required icon images to your custom theme's CSS folder.

development/architecture/jstree.txt · Last modified: 2020/09/22 14:16 by demiankatz