cancel
Showing results for 
Search instead for 
Did you mean: 

Icon for Custom Type in Backoffice Admin Area

Former Member
0 Kudos

Hi experts,

i have created an extension (based on ybackoffice) that configures an custom type:

     <context component="explorer-tree" merge-by="module">
         <n:explorer-tree xmlns:n="http://www.hybris.com/cockpitng/config/explorertree">
             <n:navigation-node id="hmc_treenode_system">
                 <n:type-node id="MyCustomType" code="MyCustomType" />
             </n:navigation-node>
         </n:explorer-tree>
     </context>    

How can i add a custom icon in the tree view for this type? As far as i have seen so far icons are displayed using css. How can i add simply a css snippet for this type only without modifying the whole backoffice.css?

Thank you in advance!

Accepted Solutions (1)

Accepted Solutions (1)

former_member632755
Active Contributor

Hi,

this is probably missing in the documentation. I will create an issue for that. The steps to add the icon are the following (base on the assumption that you are working wit conversiongroup type):

 Add new folder structure to YourExtensionRootFolder/resources/: cockpitng --> cng --> css --> images

 Add css file to YourExtensionRootFolder /resources/ cockpitng/ cng/ css/: YourExtension_common.css

 Add image for icon to YourExtensionRootFolder /resources/ cockpitng/ cng/ css/images: YourIconName.png

Add CSS code to "YourExtension_common.css" file:

 /* Icons for explorer tree */ 
 div.yw-explorerTree .y-tree-icon-hmc_typenode_conversiongroup span.z-vfiletree-tee, div.yw-explorerTree .y-tree-icon-hmc_typenode_conversiongroup span.z-vfiletree-last { background-image: url("images/YourIconName.png"); }

Hope it helps.

Cheers, Wojtek

Former Member
0 Kudos

Thanks for reply,

the CSS that actually worked was

  /* Icons for explorer tree */ 
  div.yw-explorerTree .y-tree-icon-conversationgroup .y-tree-icon { background-image: url("images/YourIconName.png"); }

Regards, Norbert

Answers (0)