Help Needed With Filter Function

You don’t need a filter function.
Try adding this to the bottom of your stylesheet:

.widget_extended-categories .avhec-widget-line a { display: inline; }

Thank you for the reply.

I tried out your suggestion but it didn’t seem to work properly. It only partially brought the post counts inline, however it distorted the line height and bottom border width.

2 filter functions are currently running on the site to bring the post counts inline for both archives and the default categories widgets. These filter functions work great, as the theme’s default setup doesn’t seem to allow an inline post count.

add_filter('get_archives_link', 'archive_count_inline');
function archive_count_inline($links) {
$links = str_replace('</a>?(', ' (', $links);
$links = str_replace(')', ')</a>', $links);
return $links;
}

add_filter('wp_list_categories', 'cat_count_inline');
function cat_count_inline($links) {
$links = str_replace('</a> (', ' (', $links);
$links = str_replace(')', ')</a>', $links);
return $links;
}

Any additional suggestions would be much appreciated.

I tried out your suggestion but it didn’t seem to work properly. It only partially brought the post counts inline, however it distorted the line height and bottom border width.

Really, those issues just require a few more lines of CSS to resolve.

I’m not familiar with the AVH Extended Categories plugin so someone else will need to help you with configuring a filter for it.

Thought I would check in and see if anyone familiar with AVH Extended Categories might be able to help me with this issue.

I’m hoping someone might be able to help me with this.

if you’d like me to attempt a possible CSS solution put the line of CSS I gave you yesterday back in and let me know.

I added your code, please have a look:

https://tinyurl.com/682k3tc

My coding skills are really weak, so I’m not sure how to sort out the distorted borders and font alignment.

change the first line i sent you before from this

.widget_extended-categories .avhec-widget-line a { display: inline; }

to this

.widget_extended-categories .avhec-widget-line a {
   display: inline;
   background: url("../images/shared/icon_arrow.png") no-repeat 2px 1px;
   padding-right: 0;
}

Not sure what you are calling “distorted widgets”. They look pretty close to correct here. If they don’t look right after making this change can you put a screenshot up on your site so I can see what it looks like in your browser? What browser are you using?

put the screen shot up someplace on the web and send me the URL

I really appreciate your help.

I added the new code. It’s not quite fixed, but definitely closer.

Here is the screenshot you requested:

https://tinyurl.com/6xyljpg

I’m currently using Opera 10.63, IE8, and FireFox 3.6.13. I’m seeing the exact same thing across all three browsers.

change this

background: url("../images/shared/icon_arrow.png") no-repeat 2px 1px;

to this
background: url("images/shared/icon_arrow.png") no-repeat 2px 1px;

other than the missing arrows (which this change here should bring back) what else do you feel is not correct?

I made the change.

Thus far what is not correct:

[1] The bottom border should match the width of the top border.

[2] The post count color should match the categories font color.

[3] The padding between the categories name and bottom border is off.

[4] The arrows now move when I mouse over them. They should be stationary.

If possible I would like to have the top two AVH category widgets perfectly match the style of all the sidebar widget below them.

The first thing I want to say is you would have some of the issues on your list even with a filter solution because they are all CSS issues.

The reason the post counts are a different color than the category names is because the category names are links and the post counts are not, and your them styles links differently than plain text.
adding this to the stylesheet should change it
.avhec-widget-count { color: #96A1A6; }
Note that the link changes color when hovered over. The count is not going to change color when hovered over.

The bottom border is assigned to the A link tag. Because we are floating the A tag to get the post count on the same line the length of the A tag is only the length of its contents. The border can’t be any wider than the container it is a border to.

The bottom border will need to be assigned to the LI tag that contains the AVH div and the A link within in. Then it will be tricky to get that bottom border to display only on the LI tags that contain AVH content. It can be done but it is tricky.

as far as bottom padding, to that block of CSS i gave you before add the line
padding-bottom: 3px;
then adjust 3 px until you are happy with the result.

for the arrow movement on hover:

.widget_extended-categories .avhec-widget-line a:hover {
   background: url("images/shared/icon_arrow.png") no-repeat 2px 1px;
}

I am busy today and can’t put any more time into this until tonight at the earliest.

I entered in all of the coding changes that you suggested.

The line height doesn’t seem to be uniform across the AVH categories. The total line height should be 26px, with a top line padding of 7px. The bottom line padding is correct as is.

I would like to create the FFFFFF color mouse over effect for the AVH widgets, just like the default style of the other categories.

The last issue would be to some how extend the bottom line width, and then expand the clickable area to be the same as the non AVH widgets, which is the whole line space. If possible I would also like to have the AVH post count to be part of the clickable line space, as it is with my archive post counts.

Does anyone else have any ideas as to how to fix this post count issue?

so what’s the final version of the code?