0

ZK 7 Add Icon to item with no children

asked 2014-11-10 14:56:00 +0800

kvj2020 gravatar image kvj2020
3 2

updated 2014-11-18 03:54:06 +0800

cor3000 gravatar image cor3000
4366 2 7
ZK Team

I have a dynamic tree that has folders and documents using ZK 7.0.3. I have figured out how to manage the icon for the folders, however, I do not see a way to get an icon for the items that represent a document. ZK 6 supported this feature. Here is the style I have that works for folders:

<style>
   .z-tree-close, .z-tree-open {
      background-image:  url(${c:encodeURL('~./zul/img/tree/folder-toggle.gif')});
      background-size: cover;
     width: 100%;     
   }
   .z-tree-close {
      background-position: 0 -18px;
    }
    .z-tree-open {
    background-position: 0 0;
    }
</style>


Is it possible with ZK 7?

delete flag offensive retag edit

4 Answers

Sort by ยป oldest newest most voted
0

answered 2014-11-18 05:00:41 +0800

cor3000 gravatar image cor3000
4366 2 7
ZK Team

updated 2014-11-18 05:37:28 +0800

ZK 7 now uses fontawesome and no longer the image based icons as in ZK 6.5 for tree icons, that's why the old style customizations no longer work.

to add or customize the icon you can follow this example on zk fiddle

link publish delete flag offensive edit
0

answered 2014-11-19 08:40:27 +0800

mokryandrzej gravatar image mokryandrzej
1

i have no childrens too

link publish delete flag offensive edit

Comments

could you please be more precise?

cor3000 ( 2014-11-19 08:56:52 +0800 )edit
0

answered 2014-11-22 16:41:04 +0800

kvj2020 gravatar image kvj2020
3 2

I found a solution after lots of trial and error and decided to post to help others. There is no specific class applied to a tree detail node (document). My above example works fine for containers (folders). Here is what I came up with for the detail items:

span[class*="z-tree-spacer"]:nth-last-child(2) {
  background-image:  url('../../images/entity.gif');
  background-repeat: no-repeat;

}

This uses an image and you could easily switch the css to use font awesome. Lots of examples around on how to add font awesome icons in a css.

link publish delete flag offensive edit

Comments

just updated the fiddle too http://zkfiddle.org/sample/209073d/2-tree-icon-customization

cor3000 ( 2014-11-24 04:25:20 +0800 )edit

a bit simpler: span.z-tree-spacer:nth-last-child(2) { background-image: url('../../images/entity.gif'); background-repeat: no-repeat; }

cor3000 ( 2014-11-24 04:25:58 +0800 )edit
0

answered 2014-11-27 12:53:06 +0800

stalker12 gravatar image stalker12
1
http://www.kolejkapokase....

nicely done :)

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2014-11-10 14:56:00 +0800

Seen: 36 times

Last updated: Nov 27 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More