How to change the icon for for open/closed nodes based on type

[Adam]

Just in case someone is trying to just change the image for a
particular type, here is the CSS for that:

li[rel=TYPE][class=jstree-closed] > a ins
{ background:url("closedimage.gif") 0px 0px no-repeat !important; }
li[rel=TYPE][class=jstree-open] > a ins
{ background:url("openimage.gif") 0px 0px no-repeat !important; }

[Adam]

Just figured out that this will not quite work. There are other
classes (like 'jstree-leaf') that would need to be included.

Is there an easier way?

Also, i started playing with padding to increase the size of the
background image. Is there another way to do that?

[vakata]

As for the size - take a detailed look at the CSS and change whatever
sizes you need.
And you can use the icon property in the config for changing the
image, changing the type icon depending on the state of the node is
another deal though. There are three states - jstree-open, jstree-
closed, jstree-leaf:

li.jstree-open[rel=TYPE] { ...

Cheers,
Ivan

[Adam]

Is there an easy way to change the icon size (or to say that more
accurately, show more of a larger icon)? i have created larger icons
that are getting cut off (since the icons are getting inserted as
background images).

i am able to add 'padding-left' without a problem. it pushes the text
over and looks fine. however when i add 'padding-top', it distorts the
text next to the icon (pushes it down in a weird way). i think that is
because when i add padding, it is added to 'ins'. Since the text is
outside the 'ins' tag, it will push down the text if a 'padding-top'
is added.

From firebug:
<a class="" href="#"><ins class="jstree-icon">&nbsp;</ins>HERE IS THE
TEXT</a>

btw, using the following worked perfectly. thanks!
li.jstree-open[rel=TYPE]
li.jstree-closed[rel=TYPE]
li.jstree-leaf[rel=TYPE] (which for me is same as closed)

> > > {  background:url("openimage.gif") 0px 0px no-repeat !important; }- Hide quoted text -
>
> - Show quoted text -

[Adam]

Hey Ivan,

What's your thinking on this? Any suggestions? If you agree that this
is not currently possible and are looking for some help, let me know.
I may be able to come up with some suggestions or help with a
solution.
-adam

> > - Show quoted text -- Hide quoted text -

[Ivan Bozhanov]

Well, it should be possible - only modify the CSS a bit - take a look
at the core CSS:
.jstree li { min-height:18px; line-height:18px; }
.jstree a { line-height:16px; height:16px; }
.jstree a > ins { height:16px; width:16px; }

Now make a stronger selector (for example using an ID or !important,
or simply a tag name):

div.jstree li { min-height:20px; line-height:20px; }
div.jstree a { line-height:18px; height:18px; }
div.jstree a ins { height:18px; width:18px; }

This pretty much does it. Feel free to increase the numbers - just
keep the difference constant - 2px between LI and A - this way most
themes will keep working (apple theme will break because of the
background but it is easy to fix :)

Kindest regards,
Ivan

> --
> You received this message because you are subscribed to the Google Groups "jsTree" group.
> To post to this group, send email to jst...@googlegroups.com.
> To unsubscribe from this group, send email to jstree+un...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/jstree?hl=en.
>
>

[Adam]

Perfect. thanks!

> > For more options, visit this group athttp://groups.google.com/group/jstree?hl=en.- Hide quoted text -