WordPress.org

Ready to get started?Download WordPress

Forums

jQuery Categories List Widget
[resolved] Made a couple of small display/CSS changes, might be useful for others (5 posts)

  1. Number 6
    Member
    Posted 1 year ago #

    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';
    to
    $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">';
    to
    $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 . ' >';
    to
    $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)

    http://wordpress.org/extend/plugins/jquery-categories-list/

  2. Miguel Useche
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks for sharing it :)

  3. Number 6
    Member
    Posted 10 months ago #

    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

  4. Miguel Useche
    Member
    Plugin Author

    Posted 10 months ago #

    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Ā·

  5. KevinLycett
    Member
    Posted 2 months ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic