Control appearance of BG img in a sub-category icon via CSS/LESS?

omega

At CSS level - is it possible instigate display:none on the BG-image of the sub-category icon but not affect the larger primary larger Categories icon on the main categories level page?

On quick look it appears the bg-img url is in the span tag - is it possible to have it over-ridden by placing display:none in the primary controlling class and if so what is exactly is that class for the sub-category icon exactly?

omega

Ok ok - this seems to work so far for me.

.fa-lg[style*="url(/assets/uploads/category/category-1.png)"] {
    background-image: none !important;
}

omega

I'd appreciate if someone could guide me here - I'm not having success controlling the look of the a category sub-category icon on the Categories page - it's inheriting the changes I've made to the following classes below that I've used these to control the icon on the categories page to my liking:

.categories>li .content .icon, .category>ul>li .content

However those also affect the sub-category icon, looking at the code this is what I'm now trying to control or I think I need to control but I think it conflict with the top level Category icon:

<div class="icon pull-left" style="background-color: #86C1B9; color: #333;">.

This is where I've found it:

<span class="category-children-item pull-left">**<div class="icon pull-left" style="background-color: #86C1B9; color: #333;">**<i class="fa fa-fw fa-comments"></i></div><a href="/category/5/sub-category-test"><small>Sub-Category-Test</small></a></span>

I'm trying to change the shape and size of the sub-category icon, right now it's the same size as it's top level Category.

Also of course there could be a syntax error or conflict in my CSS hacks also causing it and I'll play more and look closer also.

omega

Well this seemed to work for me -

.categories>li .category-children .icon, .category>ul>li .category-children .icon

Now on to control the layout of the sub categories !!!!!