Title: Tree Listing CSS Problem (solution)
Last modified: June 26, 2017

---

# Tree Listing CSS Problem (solution)

 *  Resolved [kinggeneral](https://wordpress.org/support/users/kinggeneral/)
 * (@kinggeneral)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/tree-listing-css-problem-solution/)
 * Take example you take widget such as woocommerce category
    and want to show its
   hierarchy.
 * CSS problem will appear :
    – the parent and its child is in the same line, and
   NOT get padding like a tree.
 * i use this trick to solved that issue : (this css will add symbol before `<li
   >`)
 *     ```
       .widget_product_categories ul li:before {
       	font-family: "FontAwesome";  
       	content: "\f054";
       	color: #eeb500;
       	margin-right: 5px;
       } 
       ```
   
 * maybe dev have better fix than this one.
    -  This topic was modified 8 years, 11 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).
      Reason: put code in backticks
    -  This topic was modified 8 years, 11 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Theme Author [canyonthemes](https://wordpress.org/support/users/canyonthemes/)
 * (@canyonthemes)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/tree-listing-css-problem-solution/#post-9264744)
 * Hello kinggeneral,
 *  At first thank you so much for finding issue, Currently its showing Parent and
   child in a same line, we will fix this issue in our update version.
    Your css
   is fine but that is a bit incomplete. Please i have added css below, you can 
   check it. ——————————————–
 *     ```
       .widget_product_categories ul li .children li:before {
       	font-family: "FontAwesome";  
       	content: "\f054";
       	font-size:10px;
       	color: #eeb500;
       	font-weight:400;
       	margin-right: 5px;
       } 
   
       .widget_product_categories ul li .children {
           margin-left:15px;
   
       }
   
       .widget_product_categories ul li a{
        font-weight: 600;
       }
       .widget_product_categories ul li .children li a {
           font-weight: normal;
       }
   
       .widget_product_categories ul li .children li:last-child {
           border-bottom: none;
       }
       ```
   
 * Thank you,
    -  This reply was modified 8 years, 11 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).
      Reason: put code in backticks
 *  Thread Starter [kinggeneral](https://wordpress.org/support/users/kinggeneral/)
 * (@kinggeneral)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/tree-listing-css-problem-solution/#post-9269304)
 * this works well for me.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Tree Listing CSS Problem (solution)’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/quality-construction/1.1.1/screenshot.
   png)
 * Quality Construction
 * [Support Threads](https://wordpress.org/support/theme/quality-construction/)
 * [Active Topics](https://wordpress.org/support/theme/quality-construction/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/quality-construction/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/quality-construction/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [kinggeneral](https://wordpress.org/support/users/kinggeneral/)
 * Last activity: [8 years, 11 months ago](https://wordpress.org/support/topic/tree-listing-css-problem-solution/#post-9269304)
 * Status: resolved