How would i change the expand collapse button image for jstree with my own image

Ravi K

unread,

Jun 5, 2015, 10:59:08 AM6/5/15

to jst...@googlegroups.com

Hey Ivan,
Currently i want to override the default image which is an arrow that's been used by jstree for expanding and collapsing the items.
I tried doing the below, but it is not looking good (attached the image), what would i have to do to fix that?
Is there a specific image size or format i need to use.
I have downloaded the latest version and saw that the css is referring to the 32px.png sprite.
Thanks.

.jstree-default .jstree-closed>.jstree-ocl {
          /*background-position: -100px -4px;*/
          background: url("../Content/jsTree/themes/default/plus_icon.png") no-repeat scroll 0px 0px transparent ! important;
        }

.jstree-default .jstree-open>.jstree-ocl {
          /*background-position: -132px -4px;*/
          background: url("../Content/jsTree/themes/default/minus.gif") no-repeat scroll 0px 0px transparent ! important;
        }

Ivan Bozhanov

unread,

Jun 5, 2015, 11:03:49 AM6/5/15

to jst...@googlegroups.com, prog...@gmail.com

You are doing the right thing - just make sure you override all native CSS, I am sorry, but I can't help you with that - if something does not look right - inspect it in your developer console, locate the property that is tripping you up and override it.
You could take another approach - copy the default theme, give it a new name, and modify the image (32px.png), then in your instance configure jstree to use your own brand new theme.

Best regards,
Ivan

ManoDivya kathiravan

unread,

Apr 4, 2016, 4:03:56 PM4/4/16

to jsTree

Hello Ian/ Ravi,

Did you get it working? I need to do the same thing. But when I add the

.jstree-default .jstree-closed>.jstree-ocl {
/*background-position: -100px -4px;*/

background: url("arrow_up.png") no-repeat scroll 0px 0px transparent ! important;

}

.jstree-default .jstree-open>.jstree-ocl {
/*background-position: -132px -4px;*/

background: url("arrow_down.png") no-repeat scroll 0px 0px transparent ! important;
}

to my code I am getting the arrow icon even in my child nodes. I have attached screenshot.