Support » Plugin: jQuery Categories List Widget » Made a couple of small display/CSS changes, might be useful for others

  • Resolved Number 6


    This is for version 2.1 of JCL.

    I noticed that on my site, when I had the expand/contract symbol on the left of the category, there was no space between it and the category name.
    To fix this I did the following in jquery-categories-list.php

    On line 325 change:
    $cssRule = $instance['layout'] === 'right' ? 'right' : 'left';
    $cssRule = $instance['layout'] === 'right' ? 'left' : 'right';
    (swapped ‘right’ and ‘left’ after the ternary operator)

    On line 327 change:
    $childLink .= '<span class="jcl_symbol" style="padding-' . $cssRule . 'left:5px">';
    $childLink .= '<span class="jcl_symbol" style="padding-' . $cssRule . ':5px">';
    (removed the hardcoded ‘left’)

    I also wanted to add a CSS style to make it so that Categories with no children could be styled with a bullet point, and thus still be indented.
    To do this, I added a conditional check and added a new CSS style to elements which do have children so they could be differentiated.

    On line 332 change:
    $html .= '<li class="jcl_category" ' . $styleAttribute . ' >';
    $html .= '<li class="jcl_category'. (!empty($child_html) ? ' jcl_category_has_children' : '').'" ' . $styleAttribute . ' >';
    (added a ternary to check if the category has children and add a style to the listitem if it does)

    Then in your theme’s CSS file (e.g. styles.css) you can style Categories with children differently from those without children, e.g. in mine I have:

    .template-front-page .widget-area .widget li {
        list-style-type: disc;
        margin: inherit;
    .widget .jcl_widget li.jcl_category_has_children {
        list-style: none outside none;

    Which gives me bullet points on all lists in widgets, but not on the categories which can be expanded.

    Hope it’s of use to somebody anyway.

    (Edited to fix formatting)

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Miguel Useche


    Thanks for sharing it 🙂

    Number 6


    No probs 🙂

    In JCL version 2.2 the line numbers are as follows:

    Line 325 is now line 408
    Line 327 is now line 410
    Line 332 is now line 422

    Plugin Author Miguel Useche


    I just added a new update to fix a bug and i’ve included code for a class like jcl_category_has_children. So you can apply CSS to li with childs·

    Hi thanks for that, very useful! I couldn’t find the css rule to add bullets to a list that had inherited {list-style:none outside none;} and this is perfect.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Made a couple of small display/CSS changes, might be useful for others’ is closed to new replies.