You are here

jsTree - background colour

Submitted by Asif Nowaj, Last Modified on 2020-01-19

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.

You want to know what are the other ways of changing jstree colour of nodes and customising styles, views then you can look at custom jsTree CSS Styling or jsTree Theme

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

Discussion or Comment

If you have anything in mind to share, please bring it in the discussion forum here.

https://forum.everyething.com/jstree-f33/