About Features Downloads Getting Started Documentation Events Support GitHub

Love VuFind®? Consider becoming a financial supporter. Your support helps build a better VuFind®!

Site Tools


Warning: This page has not been updated in over over a year and may be outdated or deprecated.
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