Changing the theme with jstree 3.0.0

DavidHyogo picture DavidHyogo · Jan 6, 2014 · Viewed 12k times · Source

I'm trying to change the theme as follows:

  • I copied the contents of the default folder and copied them into a folder called david

  • I used replace all in style.css to change instances of .jstree-default with .jstree-david in my editor

  • I linked to the david stylesheet

  • I added this code to the core object of the jstree config object

                    "themes": {
                        "name": "david",
                        "dots": true,
                        "icons": true
                    }
    

The tree renders with none of the usual dots and icons and click does not expand the root nodes.

How do you create a theme for this new jstree? The style.css file and associated sprites are different from the version 1 themes I used to work with.

Are there any themes available already created for jstree 3.0.0?

UPDATE: So used to getting my information from StackOverflow, I was delighted to get help on this issue directly from jstree's author in a very timely manner.

Answer

hlqyq picture hlqyq · Nov 3, 2014

Do your remember include your css file successfully? I use the following code to change the theme to dark. Hope to help you.

$('#jstree_demo_div').jstree({
        'core' : {
             "themes": {
                "name": "default-dark",
                "dots": true,
                "icons": true
            },
            ...
<link rel="stylesheet" href="/media/images/jstree_themes/default-dark/style.min.css" />