Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » RSS, Feeds & Subscribing »

Feed icon in categories


  #1  
Old Apr 15, 2009, 08:31 PM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
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  
Old Apr 16, 2009, 04:29 AM
Flynn's Avatar
Flynn
 
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  
Old Apr 16, 2009, 04:48 AM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
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  
Old Apr 16, 2009, 08:01 AM
Flynn's Avatar
Flynn
 
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  
Old Apr 16, 2009, 08:04 AM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
No, it's actually what it installed itself as (atahualpa332). OK, I'll try that now. Thanks again.
  #6  
Old Apr 16, 2009, 08:16 AM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
Ok Flynn. I did that and the feed icon is there but the alignment is all out.
Attached Thumbnails
Click image for larger version

Name:	Alignment.jpg
Views:	701
Size:	40.1 KB
ID:	88  
  #7  
Old Apr 16, 2009, 08:53 AM
Flynn's Avatar
Flynn
 
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  
Old Apr 16, 2009, 09:05 AM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
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 03:23 AM.
  #9  
Old Apr 16, 2009, 09:47 AM
Flynn's Avatar
Flynn
 
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 08:06 PM. Reason: return $string; was missing in the function of suggestion # 3
  #10  
Old Apr 16, 2009, 07:57 PM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
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  
Old Apr 16, 2009, 08:04 PM
Flynn's Avatar
Flynn
 
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  
Old Apr 16, 2009, 08:25 PM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
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  
Old Apr 16, 2009, 08:42 PM
Flynn's Avatar
Flynn
 
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  
Old May 4, 2009, 04:32 AM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
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  
Old May 5, 2009, 05:59 PM
Flynn's Avatar
Flynn
 
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  
Old May 6, 2009, 07:26 AM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
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  
Old May 6, 2009, 07:42 AM
Flynn's Avatar
Flynn
 
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  
Old May 6, 2009, 07:56 AM
perdox808's Avatar
perdox808
 
51 posts · Apr 2009
Melbourne, Australia
Send a message via Skype™ to perdox808
So I can't do much about it at the moment, yes? Nothing will help in the CSS inserts?
  #19  
Old May 6, 2009, 09:32 AM
Flynn's Avatar
Flynn
 
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Calendar icon for date jpreuss Post-Kicker, -Byline & -Footer 7 Jun 9, 2011 09:05 AM
Feed Icon in page menu bar kkk RSS, Feeds & Subscribing 4 Nov 28, 2009 04:18 PM
disable links in category menu for parent categories (only childless categories link) qcook2000 Page & Category Menu Bars 0 May 15, 2009 09:09 PM
Excluding categories from feed squarehead RSS, Feeds & Subscribing 1 Mar 22, 2009 01:56 PM
Logo Table- Feed/Comment Icon Help colemanorgoldman Atahualpa 3 Wordpress theme 1 Jan 27, 2009 10:08 PM


All times are GMT -6. The time now is 01:07 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.