Skip to Content
author's profile photo Former Member
Former Member

Icon for Custom Type in Backoffice Admin Area

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!

Add a comment
10|10000 characters needed characters exceeded

Related questions

1 Answer

  • Best Answer
    Posted on Mar 26, 2015 at 12:46 PM

    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

    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member

      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

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.