I would like to be able to display the RSS feed icon next to the categories (after the count or before, it doesn't matter) that show up in my widget. Is this possible?

I seem to remember seeing the letters RSS next to them some time back but I just cannot think how I managed it.

Thanking you in advance.

1. Install http://wordpress.org/extend/plugins/php-code-widget/ and put one instance of it into a sidebar.

2. Into the widget put

PHP Code:

<ul id="cats-with-feeds">
<?php wp_list_categories('title_li=&show_count=1&feed_image=/wp-content/themes/atahualpa332/images/icons/feed.gif'); ?>
</ul>

See http://codex.wordpress.org/Template_...ist_categories for more configuration options for wp_list_categories

3. Add a Theme Options -> HTML/CSS Inserts -> CSS Insert:

/* remove the left border from <A> for this widget */
ul#cats-with-feeds li a:link,
ul#cats-with-feeds li a:visited,
ul#cats-with-feeds li a:active,
ul#cats-with-feeds li a:hover {
border-left: none;
display: inline; /* avoid wrapping */
padding: 0; /* remove left padding from <A> */
margin: 0;
}
/* add the left border to <LI> for this widget */
ul#cats-with-feeds li {
border-left: solid 4px #000000;
padding-left: 5px; /* add left padding to <LI> instead of <A> */
}
/* sub menu items */
ul#cats-with-feeds li ul li {
border-left: solid 4px #009900;
}
/* hover now on <LI> instead of <A>, sfhover for IE6 */
ul#cats-with-feeds li:hover,
ul#cats-with-feeds li:sfhover {
border-left: solid 4px #0033cc;
}

4. For IE6, replace, in header.php, this

PHP Code:

if (document.getElementById("recent-comments") != null) { sfHover( 'recent-comments' ); }
if (document.getElementById("bfa-recent-comments") != null) {sfHover( 'bfa-recent-comments' ); } 


with this:

PHP Code:

if (document.getElementById("recent-comments") != null) { sfHover( 'recent-comments' ); }
if (document.getElementById("bfa-recent-comments") != null) {sfHover( 'bfa-recent-comments' ); }
if (document.getElementById("cats-with-feeds") != null) {sfHover( 'cats-with-feeds' ); } 


Thanks for the reply.

I did this Flynn but now I get the name of the category and then a rectangle underneath with a question mark in the middle.

If your theme directory is not /atahualpa/ then you'd have to adjust the image path

<ul>
<?php wp_list_categories('title_li=&showcount=1&feed_image=/wp-content/themes/atahualpa/images/icons/feed.gif'); ?>
</ul>

No, it's actually what it installed itself as (atahualpa332). OK, I'll try that now. Thanks again.

Ok Flynn. I did that and the feed icon is there but the alignment is all out.

I updated the post above, please try again. The code for the widget is changed as well.

OK, that's much much better. But a slight problem: the black bars are now running into each other.

Also, when you say put the following in header.php, can I do that from the editor in admin panel or download the file from the server, alter it upload it again?

Thanks again Flynn.

This can not be solved cross-browser with image-less CSS alone. You'd either have to...

1. Drop the left border on top level items altogether:

 ul#cats-with-feeds li {
border-left: 0; /* no boder for first level */
padding-left: 0; /* no left padding for first level */
}
/* sub menu items */
ul#cats-with-feeds li ul li {
border-left: solid 4px #009900;
padding-left: 5px; /* add left padding to <LI> instead of <A>, and only to sub items */
}
/* hover now on <LI> instead of <A>, but only for sub items. sfhover for IE6  */
ul#cats-with-feeds li ul li:hover,
ul#cats-with-feeds li ul li:sfhover {
border-left: solid 4px #0033cc;
}

2. Or, replace the left border of top level items with an image,

 /* image instead of CSS border for first level */
ul#cats-with-feeds li {
border-left: 0;
background: url(/path/to/black-image.gif) no-repeat scroll top left;
padding-left: 9px; /* make room for the image: 5px padding + 4px image width */
}
/* sub menu items */
ul#cats-with-feeds li ul li {
border-left: solid 4px #009900;
background: none; /* reset background image for sub items */
padding-left: 5px; /* only 5px left padding for sub items */
}
/* hover for top level items with image */
ul#cats-with-feeds li:hover,
ul#cats-with-feeds li:sfhover {
background: url(/path/to/green-image.gif) no-repeat scroll top left;
}
/* hover for sub items still with borders */
ul#cats-with-feeds li ul li:hover,
ul#cats-with-feeds li ul li:sfhover {
border-left: solid 4px #0033cc;
background: none;
}

3. Or, set the <LI>'s to display: inline

ul#cats-with-feeds li {
border-left: solid 4px #000000;
padding-left: 5px; /* add left padding to <LI> instead of <A> */
display: inline;
}

and then add a function to add a line break before each <LI>, by adding the following code to the bottom of functions.php without causing blank lines.

PHP Code:

<?php function add_line_break_after_li($string) {
$string = str_replace("<li>", "<br /><li>", $string);
return $string;
}
add_filter('wp_list_categories', 'add_line_break_after_li');
?>

This would affect everything where wp_list_categories is used throughout the whole blog, and I am not sure how a line break before each <LI> will look.

Flynn, thank you very much. I have gone with just doing away with the border. One thing to be clarified (I had this in an eariler part of this thread:

Also, when you say put the following in header.php, can I do that from the editor in admin panel or download the file from the server, alter it upload it again?

Thanks Flynn.

Both would work. Often the files are not writable so editing through Wordpress doesn't work but if it works for you then this would probably be more convenient than editing on your desktop computer and re-uploading

Thank you Flynn. One final thing. I left a comment in one of your posts where you had the comments with a number on the right hand side. I would like to use that too. How do I go about achieving this?

I am using an older WP version and the plugin "paged comments" on wordpress.bytesforall.com. That plugin appears to provide more/better paging/numbering functionality (but without threading) than the new built in comment functions of WP 2.7 currently does.

Atahualpa is prepared for it and no file edits should be required. I haven't looked at it for a while so I am not sure about the styling of numbers etc.

http://www.keyvan.net/code/paged-comments/

Flynn, I have added a plugin Series Options and if you look on this page:

http://theperdoxrant.com/2009/05/01/q-a-2/

on the right sidebar, under the widget title 'Series', the count of each series starts on a new line. Yet on my left sidebar, the counts are OK.

I have tried and tried to fix this using the element info in firebug but I just don't know enough Flynn. Can you please tell me how to fix this so that the count is on the same line as the title?

I posted this here because you had helped me with the widget content before and I thought this might refresh your memory.

Cheers and thanks in advance

Add a CSS Insert, and do the same for other widgets with the same issue:

div#series-widget ul li a:link, 
div#series-widget ul li a:visited,
div#series-widget ul li a:active,
div#series-widget ul li a:hover {
display: inline !important;
    }

Thanks Flynn. The code worked like a charm on the 'Series' widget on the right sidebar.

The left sidebar Categories is almost there: http://theperdoxrant.com/

I have the vertical rules between the text and the feed icon. Possible to fix this in this version of the theme?

Here is what I have in my CSS inserts:

div#series-widget ul li a:link,
div#series-widget ul li a:visited,
div#series-widget ul li a:active,
div#series-widget ul li a:hover {
display: inline !important;
}
div#extended-categories-1 ul li a:link,
div#extended-categories-1 ul li a:visited,
div#extended-categories-1 ul li a:active,
div#extended-categories-1 ul li a:hover {
display: inline !important;
}

This type of "left-border" decoration proves to be not reliable due to the amount of different widgets list item types. The CSS needs to be different based on whether there are 1 or 2 links, unlinked text or not, single or multi level items. Also some widgets need to get Javascript for IE6 to emulate li:hover behavior

In the version after 3.3.3 I'll change this to
left-border always on <LI>, <A> always inline.

This will take care of all widgets that do not have multi level items like the pages and the categories widget. Those 2 would still need extra CSS. And if a user adds a third party widget with multi level list items, then that would need that extra CSS too.

This will still be much better since the majority of widgets have only single level items I think. Additionally I am going to integrate the option to use images instead of this "left-border" CSS decoration. That'll cause 1-2 more hits to the server for the graphics but will be more reliable.

So I can't do much about it at the moment, yes? Nothing will help in the CSS inserts?

In header.php find

$bfa("a.xhtmltags").click(function(){ $bfa("div.xhtml-tags").slideToggle(300); });

and after it add

$bfa("div#extended-categories-1 a + a").css( {border-left : '0', padding-left : '0'} );

This may require another line to reset children. Try this one first if it does anything at all