[SOLVED] How to apply css only to the first level category in Block Categories module?

[kingsinnersoul]

Hello,

I am trying to apply css code to the first level categories only. But when I add css to

[/size]
#categories_block_left li

it applies it to all the categories.

 

Thanks

Edited June 24, 2013 by kingsinnersoul (see edit history)

[vekia]

You would need the element or class which is above the first ul, then specify {parent-selector} > ul > li.

[kingsinnersoul]

Thanks, how can I apply css to it only if it is closed?

[vekia]

what you mean by "closed" ?

[kingsinnersoul]

So each category which has children has a [+] sign box on the right side which is nested inside a <span> tag. This sign is span has the class grower. But when the category is not expanded the span has additional class "CLOSE", and when it is expanded is has the class "OPEN". I wanted to apply css to the li itself if the nested span tag has one of the tags.

 

Thanks

[vekia]

{parent-selector} > ul > li.closed

{parent-selector} > ul > li.open

etc.

[kingsinnersoul]

that applies the css only to the [+] or [-] button. I tried to add the css code in javascript, but it did not work for me. Any idea where that <span> tag is added to the categories block module? I cannot see it in the tpl file.

I thought that I could add some code to the open/close js portions where it loads the exapnd portion to add/remove css from the parent.

[kingsinnersoul]

I did it by going to treeManagement.js and editing toggleBranch to have extra two lines:

//animate the closing or opening of the branch (ul jQueryElement)
function toggleBranch(jQueryElement, noAnimation) {
if(jQueryElement.hasClass('OPEN')) {
 closeBranch(jQueryElement, noAnimation);
 $(jQueryElement.parent()).addClass('CLOSE').removeClass('OPEN');
}
else {
 openBranch(jQueryElement, noAnimation);
 $(jQueryElement.parent()).addClass('OPEN').removeClass('CLOSE');
}
}

and then added

$('.block_content >ul > li').addClass('CLOSE').removeClass('OPEN');

as the first line inside

$(document).ready(function () {

and then I added css code for

.block_content >ul > li.CLOSE