Made a couple of small display/CSS changes, might be useful for others
-
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.phpOn 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)
https://www.ads-software.com/extend/plugins/jquery-categories-list/
- The topic ‘Made a couple of small display/CSS changes, might be useful for others’ is closed to new replies.