custom jsTree css styling

Question

I'm new to jsTree.How to apply custom css for jsTree div id like background color,node font style etc., any sample examples will be helpful

<div id="sampleTree"></div>

load jstree method

$('#sampleTree').jstree({
         'core' : {
          'data' : {
            'url' : 'ajaxurl',
            'data' : function (node) {
                var test = ["jquery", "js", "css"];
                return test;
            }
          }
        }
    }); 

Answer 1

since jstree is a totally javascript generated code, adding your own class would be not advisable, since adding it while the rendering time trough the jstree engine would make the system more complex. What you can do is, trace the classes in the themes/default/style.css

and make changes in the classes. some of them are .jstree hovered, clicked and so on.

Answer 2

If you want to put CSS onto individual entries use the html_data plugin. You can put it in your HTML strings with embedded CSS directly:

<div id="myTree">   
  <ul>
   <li rel="root">
     <a href="#">Parent 1</a>
     <ul>
       <li><a style="font-weight:bold" href="#">Child 1</a></li>
       <li><a style="color: red" href="#">Child 2</a></li>
     </ul>
   ...

Answer 3

Yes you can change the theme css file according to you.

If you want more customization like changing the icons when open, when close etc then you can do it in jquery

$('#jstree-api').jstree({
    'core': {
        'data': jsonData
    },
    "types": {
        "child": {
            "icon": "glyphicon glyphicon-leaf"
        },
        "root": {
            "icon": "glyphicon glyphicon-folder-close"
        },
        "default": {
            "icon": "glyphicon glyphicon-folder-close"
        }
    },
    "search": {

        "case_insensitive": true,
        "show_only_matches": true


    },

    "plugins": ["search", "themes", "types"]
});

$('#jstree-api').on('open_node.jstree', function (e, data) {
    data.instance.set_icon(data.node, "glyphicon glyphicon-folder-open");
}).on('close_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-folder-close"); });

Here is a series of articles on jsTree you can follow if you want.