Customization

Customization using themes

As of version 0.9.5 jsTree also supports themes - here is a quick intro to themes.

Each theme must reside in its own directory within the themes path.

NOTE: The themes path is either auto-detected (path-to-jstree/themes/), or can be set manually using the settings.ui.theme_path setting.

The theme to use on a tree is set using the settings.ui.theme_name setting - just set it to a string with the name of your directory (for example theme_name : "my_theme"). If you set theme_name to false no theme will be included.

Each theme consists at minimum of a file called style.css within the theme directory. This file gets included after the default theme file, ensuring that any rules you set (even if the selectors have the same weight as the default theme's selectors) will be respected.

You may also want to include various images in your themes directory, so that you can use them in your style.css file.

Classic theme walkthrough

Here is a walkthrough of the classic theme (included). The most important part is the style.css file.

The classic theme
/* 
 * Note all selectors begin with .tree .tree-classic
 * This is necessary - keep to this format. 
 * Just replace classic with your theme name .
 */

/* Setting the icon infront of every closed node */
.tree .tree-classic li.open {
	background:url("minus.gif") 2px 5px no-repeat;
}
/* Setting the icon infront of every open node */
.tree .tree-classic li.closed {
	background:url("plus.gif") 2px 5px no-repeat;
}
/* This should be same as above.
 * Used to "close" nested nodes while dragging */
.tree .tree-classic #dragged li.open {
	background:url("plus.gif") 2px 5px no-repeat;
}

/* The opened folder icon */
.tree .tree-classic li.open a {
	background-image:url("folderopen.gif");
}
/* The closed folder icon */
.tree .tree-classic li.closed a {
	background-image:url("folder.gif");
}
/* The icon used for nodes with no children */
.tree .tree-classic li.leaf a {
	background-image:url("folder.gif");
}
/* If you want one icon for all above three states use this selector:
 * .tree .tree-classic li a 
 * It is also useful for setting the text color */

/* The default theme has round borders in firefox. 
 * Undo that if you want */
.tree .tree-classic li a {
	-moz-border-radius:0;
}

/* The colors used on the hovered node. 
 * Here they match the background color - so no hover.
 * Note the second selector - it is applied when hover_mode is on 
 * and you use the get_* functions (mainly used for keyboard shortcuts) */
.tree .tree-classic li a:hover,
.tree .tree-classic li a.hover {
	background-color:white;
	border-color:white;
}
/* The colors for the selected state of the node */
.tree .tree-classic li a.clicked,
.tree .tree-classic li span.clicked {
	background-color:navy;
	border-color:navy;
	color:white;
}

/* What follows here are the styles for right-to-left alignment 
 * Include such styles only of you want to support RTL languages */
.rtl .tree-classic li.open {
	background-position:right 5px;
	margin-right:-3px;
	padding-right:19px;
}
.rtl .tree-classic li.closed {
	background-position:right 5px;
	margin-right:-3px;
	padding-right:19px;
}
.rtl .tree-classic #dragged li.open {
	background-position: right 5px;
}

Other customizations

The above part does not cover enlarging fonts, or changing the tree background - here is how you do it:

Font size/family & height
.tree .tree-classic li {
	font-size:11px;
	line-height:20px;
	min-height:20px;
	font-family:Georgia;
}
.tree .tree-classic li a {
	line-height:18px;
	height:18px;
}
Context menu
/* Using this selector you can set 
 * background, width, etc.
 * Below are the defaults. */
.tree-default-context {
	width:160px;
	background:#F0F0F0 url("context.gif") 22px 0 repeat-y;
	border:1px solid silver;
	position:absolute;
}

.tree-default-context a,
.tree-default-context a.disabled:hover {
	display:block;
	text-decoration:none;
	color:black;
	text-indent:26px;
	line-height:20px;
	background-repeat: no-repeat;
	background-position: 3px center;
	padding:1px 0;
	background-color:transparent;
	border:0;
}
.tree-default-context a:hover {
	background-color: #e7f4f9;
	border:1px solid #d8f0fa;
	background-position: 2px center;
	padding:0;
	text-indent:25px;
}
.tree-default-context a.disabled,
.tree-default-context a.disabled:hover {
	color:silver;
	opacity:0.5;
	-ms-filter:'alpha(opacity=50)';
	filter:alpha(opacity=50);
	zoom:1;
}

.tree-default-context .separator {
	background:#FFFFFF;
	border-top:1px solid #E0E0E0;
	font-size:1px;
	height:1px;
	line-height:1px;
	margin:0 2px 0 24px;
	min-height:1px;
	display:block;
}
Background color
.tree,
.tree ul, 
.tree li.last {
	background-color:#666 !important;
}

As of v.0.9.6 you can set any background you like (including images and repeat).