WordPress.org

1. yillb
   Member
   Posted 5 years ago #

   Hi, I'm working on styling my sidebar and have encountered a problem with using display:block to have a rollover the full width of my sidebar.

   The count next to the category name isn't included with the link that links the category name, and so the count is no longer on the same line.

   I'm looking for the file and code that separates the category name and post count. Is there anyway to include the count with the link of the category?

   I figure I can just turn the post count off but even if I did I would really like to know if there is anyway to include the category post count in the a href that links the category name?

   If you need to see the site, it's here.

   Thanks

2. TheGreyMan
   Member
   Posted 5 years ago #

   Hi yillb,

   Without getting involved in editing the php (so that it constructs the list differently) I would suggest, off the top of my head, that you'll have to put the rollover effect on the list item (i.e. <li>rollover</li>) rather than the href (i.e. <a>link</a>) within it. Does that make sense? I know it's then kind of a nested rollover, maybe not the effect you wanted, but it's late at night and I'm not a programmer, so I don't want to suggest something that screws your php functions. Maybe after some sleep I could get my head around it! Anyway, hth...

3. TheGreyMan
   Member
   Posted 5 years ago #

   Sorry, just read your question again, you can tell I'm tired and not paying attention... If you do want to edit the code for this function, it's in category-template.php which is found in wp-includes. Again, hth...

4. yillb
   Member
   Posted 5 years ago #

   Thanks, that's what I thought but it seemed daunting with all the code even when I limited my view to around the a href tags. It's something I will take the time to look over and attempt to change.

   I found a site which has categories that have the count included with name and a background change. I was able to recreate the effect it but hit a snag with subcategories, where rolling over them would cause the parent to also have the rollover as well. I think that it was done with the li rollover /li
   like you suggested in your first post.

   The site:http://www.badlandscaping.com/

   Thanks you.

5. TheGreyMan
   Member
   Posted 5 years ago #

   Yep, if you look at what's happening on the site you mentioned, you can see the rollover appearing as a 'block' on the list item, with a second rollover on the link, which is exactly what I was saying. This shouldn't be too hard to do with CSS (hopefully). If you want some help with that, let me know, I'll happily give you a hand with the CSS if I can.

6. yillb
   Member
   Posted 5 years ago #

   I went ahead and re-did that. If you look at the site you can see it being done two ways. One way uses
   

   <div id="hovertest"><ul>
   <?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 1,'','','','','') ?>
   </ul></div>

   which has the problem that sub categories don't go under their parent.

   The other way uses
   

   <div id="hovertest"> <ul>
   <?php wp_list_cats('sort_column=name&optioncount=1&hide_empty=1&children=1&hierarchical=1') ?>
   </ul></div>

   which does put the sub categories under their parent but when you rollover one the categories the entire group of categories is highlighted.

   Also with the first way I lose the embedded lists so I don't think I could move them in a little like with the very top list.

   The CSS
   

   #hovertest ul{list-style:none; padding:0; margin:0;}
   #hovertest li{color:#0f73af; display:block;}
   
   #hovertest li:hover{background:url(images/hover.gif); background-repeat:repeat-y; color:#fff;}
   
   #hovertest li a{color:#0f73af;display:inline;}
   #hovertest li:hover a{color:#fff;}
   #hovertest li:hover a:hover{background:none;}

   I'm thinking that right now it isn't that big of a deal. It seems like I have to choose between what I prefer, or had orginally intended. Of course I'm still going to try to edit that category template page and see if I can get anywhere that way.

   If you think you see or know something that I need to change or add (or remove) from the code I posted please tell.

   Thanks.

7. TheGreyMan
   Member
   Posted 5 years ago #

   Hmmm, yep, that's tricky. It's where the list items are nested. If you think about what's happening with a category list where hierarchy is used, you've actually got lists of lists... I thought I could see an obvious answer, but when I thought it through it's actually quite awkward. The whole nested 'ul' is a 'li' item itself, so of course the whole thing responds to the hover state. One approach would be to give a different colour to the subsequent hover if it's on a 'ul ul li' or something, but this may not be what you wanted. OK, if I get time later I'll mock something up, see if I can find a way to make it work...

Topic Closed

This topic has been closed to new replies.