|
#1
Apr 15, 2009, 09:31 PM
|
|
|
|
51 posts · Apr 2009
Melbourne, Australia
|
|
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.
|
#2
Apr 16, 2009, 05:29 AM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
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:
HTML Code:
/* 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' ); }
|
#3
Apr 16, 2009, 05:48 AM
|
|
|
|
51 posts · Apr 2009
Melbourne, Australia
|
|
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.
|
#4
Apr 16, 2009, 09:01 AM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
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>
|
#5
Apr 16, 2009, 09:04 AM
|
|
|
|
51 posts · Apr 2009
Melbourne, Australia
|
|
No, it's actually what it installed itself as (atahualpa332). OK, I'll try that now. Thanks again.
|
#6
Apr 16, 2009, 09:16 AM
|
|
|
|
51 posts · Apr 2009
Melbourne, Australia
|
|
Ok Flynn. I did that and the feed icon is there but the alignment is all out.
|
#7
Apr 16, 2009, 09:53 AM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
I updated the post above, please try again. The code for the widget is changed as well.
|
#8
Apr 16, 2009, 10:05 AM
|
|
|
|
51 posts · Apr 2009
Melbourne, Australia
|
|
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.
Last edited by perdox808; Apr 23, 2009 at 04:23 AM.
|
#9
Apr 16, 2009, 10:47 AM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
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:
HTML Code:
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,
HTML Code:
/* 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.
Last edited by Flynn; Apr 16, 2009 at 09:06 PM.
Reason: return $string; was missing in the function of suggestion # 3
|
#10
Apr 16, 2009, 08:57 PM
|
|
|
|
51 posts · Apr 2009
Melbourne, Australia
|
|
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.
|
#11
Apr 16, 2009, 09:04 PM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
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
|
#12
Apr 16, 2009, 09:25 PM
|
|
|
|
51 posts · Apr 2009
Melbourne, Australia
|
|
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?
|
#13
Apr 16, 2009, 09:42 PM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
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/
|
#14
May 4, 2009, 05:32 AM
|
|
|
|
51 posts · Apr 2009
Melbourne, Australia
|
|
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
|
#15
May 5, 2009, 06:59 PM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
Add a CSS Insert, and do the same for other widgets with the same issue:
HTML Code:
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;
}
|
#16
May 6, 2009, 08:26 AM
|
|
|
|
51 posts · Apr 2009
Melbourne, Australia
|
|
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;
}
|
#17
May 6, 2009, 08:42 AM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
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.
|
#18
May 6, 2009, 08:56 AM
|
|
|
|
51 posts · Apr 2009
Melbourne, Australia
|
|
So I can't do much about it at the moment, yes? Nothing will help in the CSS inserts?
|
#19
May 6, 2009, 10:32 AM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
In header.php find
HTML Code:
$bfa("a.xhtmltags").click(function(){ $bfa("div.xhtml-tags").slideToggle(300); });
and after it add
HTML Code:
$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
|
|