Knowledgebase: AbleCommerce
W2MCatalogTree - Custom Arrows
Posted by Julie Carlson on Jul 06 2016 10:08

This is how to use custom arrows instead of the default plus and minus icons for expand/collapse. Icons are attached, but can be swapped out with ones you create. 

Open W2MCatalogTree.ascx. Around line 22 you should see something like this:

<asp:TreeView ID="CategoryTree" runat="server" EnableViewState="true" ExpandDepth="0" NodeWrap="True" ShowExpandCollapse="True" HoverNodeStyle-CssClass="NodeHover" NodeIndent="10" >

Change it to this, the additions are highlighted:

<asp:TreeView ID="CategoryTree" runat="server" EnableViewState="true" ExpandDepth="0" NodeWrap="True" ShowExpandCollapse="True" HoverNodeStyle-CssClass="NodeHover" NodeIndent="10" ImageSet="Custom" NoExpandImageUrl="/App_Themes/Your Theme Folder/images/dot-sub.png" CollapseImageUrl="/App_Themes/Your Theme Folder/images/dot-main-down.png" ExpandImageUrl="/App_Themes/Your Theme Folder/images/arrow.png">

Replace "Your Theme Folder" with the actual name of the theme applied to the site you are working on. If using your own custom images, just update the image names in the example above to what yours are named if different. 



Attachments 
 
 arrow.png (0.20 KB)
 dot-main-down.png (0.20 KB)
 dot-sub.png (0.11 KB)

Comments (0)