Themes for version 3

[David Mann]

Ivan,

You're doing a great job with this plugin. I've been working with it for years and decided to upgrade to version 3. I'm having 2 problems:

1. I can't create a new theme. I tried copying the default folder, then replacing.jstree-default rules with .jstree-newthemename rules, then linking to the new stylesheet and adding a name property to the core.themes object.
2. I miss being able to refer to a sprite for icons. In version 1 we could assign an object to an icon with properties for image and position that allowed us to use a sprite

Are there any themes available for version 3 apart from default, and is there a way of using a sprite for specialised icons?

[Ivan Bozhanov]

Hi,

I have no idea why creating a new theme does not work, it should be done exactly as you are doing (you could use the less file too). Maybe you are referencing it wrong? I will have a look right away.

You can still use sprites - just use classes and not files with positions. Move all your sprite rules to your css file and use classes instead of file paths for icons.
So instead of having a file with a position set "icon" to "custom-icon document" for example, and have css similar to those:
.custom-icon { background-image:url(); background-repeat:no-repeat; }
.document { background-position:-32px 0; }
.some-other-class { background-position:-32px -32px; }


Kindest regards,
Ivan

[Ivan Bozhanov]

I just confirmed I can create a new theme easily:
1) made a copy of the default folder, renamed it to "asdf"
2) opened style.css & style.min.css and replaced "default" with "asdf"
3) included asdf/style.css in the page
4) set core.themes.name to "asdf"

And that was it. Make sure your new css is loaded (check the net tab of developer tools), and also make sure you are modifying what you are including - maybe you modified style.css, but referenced style.min.css?

Best regards,

Ivan

06 януари 2014, понеделник, 09:35:39 UTC+2, David Mann написа:

[David Mann]

Got it! Thanks Ivan. Like you I don't know what I was doing wrong. I just went through your steps slowly, carefully and systematically and it works now. Sorry to bother you.

Take baby steps! (I sometimes forget)

[Bruno Winck]

Thank you Ivan, David,

I forgot to link to the css and of course no display.

"3) included asdf/style.css in the page" was critical.

Now it works for me.

Do you think using themes and css we could use "iconic" for the icons (svg animated icons) see http://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-web

[David Mann]

Hi Ivan,

I read your docs for the types plugin at http://www.jstree.com/api/#/?f=$.jstree.defaults.types properly this time and your instructions are perfectly clear. The value for the icons property is "a string - can be a path to an icon or a className," Your extra help here is very useful, though. I hadn't thought of assigning more than one class to an icon. Clever!

Thanks for such quick responses. (By the way, I'm a very experienced English teacher (> 30 years)  and I can say you are an extremely good advert for the Cambridge CAE!)

David

[David Mann]

OK. Spoke too soon.

I added 

"types": { "default": { "icon": "david-sprite david-folder" }, "file": { "icon": "david-sprite david-file" } }, "plugins": ["types"]

to the tree config object.

I defined these CSS rules:

.david-sprite {

 background-image: url("d.png");   

}

.david-folder {

   background-position: -54px -36px    

}

.david-file {

   background-position: -72px -36px;

}

and the JSON data has a type property set, the icons do not appear.

When I inspect the <i> element with Firebug, the class property is set to:

jstree-icon jstree-themeicon david-sprite jstree-themeicon-custom

Am I configuring the types plugin wrong, or am I defining the CSS class wrong?

David

On Monday, January 6, 2014 5:21:20 PM UTC+9, Ivan Bozhanov wrote:

[Ivan Bozhanov]

Just make sure the selector i stronger (like add the id of the container before the classes), or add an !important clause after each rule.

P.S. I am always a bit unsure about my English, but I do my best :) Teaching and developing - nice - it is always a great combination to be an expert in second field besides computing - that is the recipe for a great software designer.

[Bas van Gaalen]

I've been searching and cannot find ANY themes that are compatible with jstree v3. I was looking for a bootstrap(3) theme and there is one (http://orangehilldev.com/jstree-bootstrap-theme/demo/) but it appears only to be compatible with jstree v1 and does not work in jstree v3.

As such I was wondering if anyone has found or created any alternate themes for jstree v3.

[Ivan Bozhanov]

I haven't seen any - it is pretty easy to create one though (based on the default theme). I will only be supporting one theme (the default one), it is detailed enough so that if someone wants to make a custom theme, it will be pretty straightforward.

[Bas van Gaalen]

Ok thanks Ivan. I will have a look at this myself then.