Categories Sidebox CSS Question

[DBB1]

Hello, everyone. I've been Firebugging and searching the forum all evening...

In my Categories box, I wanted to incorporate a category and sub-category hover effect instead of the default text hover, so I added a #categoriesContent li:hover{background-color: #B1B1B1} block to my stylesheet.

This works great. However, the actual URL link is still only triggered off of the category text (which also has its own hover font color effect).

I can eliminate the category font color hover effect by manipulating .leftBoxContainer a:hover, but how can I:

-Control category sidebox font attributes from #categoriesContent, but more importantly,
-Associate the category URL link to the background hover effect, so that one does not have to click directly on the text?

I appreciate any help anyone can offer.

DBB1

[stevesh]

Since #categoriesContent li:hover{background-color: #B1B1B1} doesn't work in a stock Zencart installation (it would be a:hover), we'll need to see the site to advise. It sounds like your template has changed things or you've installed a mod that changes the categories box.

[DBB1]

Since #categoriesContent li:hover{background-color: #B1B1B1} doesn't work in a stock Zencart installation (it would be a:hover), we'll need to see the site to advise. It sounds like your template has changed things or you've installed a mod that changes the categories box.

I did in fact install CSS Flyout Menu, but it is turned off in the Admin Layout section (although the contribution files are still present on the system). Flyouts just don't look right popping out over middle content and slideshows, and there doesn't seem to be a good dynamic "tree" menu that behaves consistently, so I'm left trying to punch up the base category menu.

So, I don't know where it came from, but I found the #categoriesContent class with the Firefox Web Developer's Element Inspection tool, on the base ZC category menu, along with the .sideboxcontent element (which only allowed control of the less desirable text background color) when building my hover effect. Using #categoriesContent gave me the ability to create a cleaner looking hover effect that extends the width of the container, not just the varying lengths of category text.

Sorry, no link, but here's what I'm referring to:



Note where the cursor is above - the hover effect is not hyperlinked; only the original category text, as shown:



Any ideas?

DBB1

[stevesh]

#categoriesContent is the id for the Categories box content, but in a stock Zencart installation, the category names aren't in an unordered list, they're just anchors.

There is a mod that will change them to a list, but I can't tell if you've installed it or not. If Firebug is telling you that the category names are #categoriesContent li, then you have, or that flyout thing did. If not, try installing it.

If those category names are list items, the whole area around them, extending to the sides of the box (depending on padding) should be clickable.

[DBB1]

#categoriesContent is the id for the Categories box content, but in a stock Zencart installation, the category names aren't in an unordered list, they're just anchors.

There is a mod that will change them to a list, but I can't tell if you've installed it or not. If Firebug is telling you that the category names are #categoriesContent li, then you have, or that flyout thing did. If not, try installing it.

If those category names are list items, the whole area around them, extending to the sides of the box (depending on padding) should be clickable.

Thanks, stevesh.

I assume you may be talking about the "Categories menu - replace with ul/li" contribution..? I've not installed that. In searching for a good, dynamic tree-like menu, I HAVE installed several menu contributions, but meticulously removed each one after finding out they didn't work as intended or as advertised. Although not enabled, CSS Flyout is the only one physically still in place. But I've searched within all my distribution files for #categoriesContent, and didn't turn up anything.

I'm not particularly CSS savvy, and so don't fully understand li, ui, and some of the other designators. So does the li in #categoriesContent li:hover indicate a list? If so, then that's what I've got, and it's operational. But it's not click-able.

[DBB1]

Thanks, stevesh.

I assume you may be talking about the "Categories menu - replace with ul/li" contribution..? I've not installed that. In searching for a good, dynamic tree-like menu, I HAVE installed several menu contributions, but meticulously removed each one after finding out they didn't work as intended or as advertised. Although not enabled, CSS Flyout is the only one physically still in place. But I've searched within all my distribution files for #categoriesContent, and didn't turn up anything.

I'm not particularly CSS savvy, and so don't fully understand li, ui, and some of the other designators. So does the li in #categoriesContent li:hover indicate a list? If so, then that's what I've got, and it's operational. But it's not click-able.

Okay, I installed ZenCart to a different location, then one-by-one added my template and the CSS Flyout Menu, and checked after each with the Firefox Element Info tool. Looks like it's the template that allows the #categoriesContent section to be used to create hover effects category items.

So, how do I further define these so that they can be clickable, as described in my first post? Where would I look?

Thanks,
DBB1

[DBB1]

So, how do I further define these so that they can be clickable, as described in my first post?

Finally figured it out. I added the following to the stylesheet:

.sideBoxContent ul li a {display: block;}

DBB1