jsTree - background colour

If you want to change the background colour of selected node of your jsTree or changing background colour of whole tree then you can go through this example of changing background colour of jstree. It will allow to change the background colour by applying custom css to jsTree and its nodes. Also, it will give you an idea how to change the background color of jstree or change the background colour of a selected node programmatically.

When you are simply using default jsTree library along with jstree style.min.css, the tree appears like below.
default jsTree

As you can see background colour of the tree become while and when select a node, background of the node becomes coloured like below:
default jsTree background colour

Now what we will try to achieve is to change the background colour of the whole jsTree and also the background colour of selected node.

For that a css style needs to be written so let's create a css file called "site.css" and keep it at the root directory. You can actually use any location you want but just to reference that in the
tag.

Include the following piece of css into the file.


#SimpleJSTree{
	background-color:antiquewhite;
}

.jstree-default .jstree-clicked {
	background-color:deepskyblue;
}

Then create a jsTree.html file and place it in the root directory. This html file should be look like


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Simple jsTree with custom background colour</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var jsondata = [
                           { "id": "ajson1", "parent": "#", "text": "Root node" },
						   { "id": "ajson2", "parent": "ajson1", "text": "Child 1" },
                           { "id": "ajson3", "parent": "#", "text": "Root node 2" },
                           { "id": "ajson4", "parent": "ajson3", "text": "Child 1" },
                           { "id": "ajson5", "parent": "ajson3", "text": "Child 2" },
            ];

            createJSTree(jsondata);
        });

        function createJSTree(jsondata) {
            $('#SimpleJSTree').jstree({
                "core": {
                    "check_callback": true,
                    'data': jsondata                    
                }
            });
        }
    </script>
</head>
<body>
    <div id="SimpleJSTree"></div>
</body>
<link rel="stylesheet" href="./site.css" />
</html>

This jsTree.html contains link of the site.css at the end of the body tag. You can see the jsTree is loaded into a div with ID "SimpleJSTree".
#SimpleJSTree is used for changing background of the whole tree and overriding the background color of selected using css class ".jstree-default .jstree-clicked".

Now if you render the tree, it will look like below:
custom jsTree background colour

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.