Styling the Expanded Categories List

[pamela631]

Hey all, I hope someone can help me.

Ok... I am using this mod for my categories.. but I would LOVE to totally get the category section styled differently from the rest of the sideboxes.. basically something like the below. but I'm having problems with this because this box uses both an ID and Class and the category is picking up the CLASS part of it which is using the original sidebox styling, or the styling for the rest of the boxes... this new sidebox uses the following as I can tell by right clicking and using "inspect Element using Firebug":

<div id="categorylistbox" class="leftBoxContainer"> = for the whole box
<h3 id="categorylistboxHeading" class="leftBoxHeading"></h3> = for the heading
<div id="categorylistboxContent" class="sideBoxContent"> = for the content
<span class=""> <a class="category-top" href="http://theposhbox.net/ZenCart/index.php?main_page=index&cPath=5">Cakes</a></span> = for each product

But on all of the above, this box is using the class for styling and when I tried to add the #categorylistbox, etc., for the styling, nothing changes..

Here is a screenshot of what I'm trying to do and then below is the direct link to the site I'm working on:

NOTE: Chocolate Cake is showing what happens when on hover over each product..

http://theposhbox.net/ZenCart/

Thanks for any help, Pamela

[gjh42]

A rule like
#categorylistbox a {what:ever;}
even at the very top of your stylesheet shows results. Most of the descendant elements are styled so that styling just the #categorylistbox container doesn't have much to work on.
What exactly are you having difficulty doing? How are you trying to do it (examples)?

[pamela631]

Thanks for replying gjh42,

Ok, so for example.. I want the categories sidebox different than the rest of them.. here is what I did so far with no luck. Well.. I should say the only thing that did change was the border color, it changed to pink while the other borders are still the light gray.. but it didn't take on the rounded corners.. or the background, etc...

Here is the site: http://theposhbox.net/ZenCart/

#categorylistbox {
background: #fbbade;
background-image: url(../images/bg.png);
background-repeat: repeat;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
border: 1px solid #fbbade;
}

h3.categorylistboxHeading {
font-family: 'Sacramento',century gothic, sans-serif;
font-size: 36px;
color: #f449a7;
font-weight: normal;
}

Thanks again for your help! Pamela

[gjh42]

If you look very closely, you will see that the box container tries to show rounded corners, but the content section inside it keeps its square corners and overlays the rounded container. The heading has an image with square corners, and that actual content (which is not a background) cannot get rounded off. You need to give the heading images the round corners you want. I'm not certain of the best solution to the bottom corners, but you could apply the rounding to the #categorylistboxContent bottom left and right corners.


Okay, I was speaking from memory of looking at and testing it yesterday. I will have to see what your current styling is doing...

[gjh42]

Just for fun, add these rules to your stylesheet:

#categorylistbox {
	background: #c00000; border: 1px dashed #aabb00; border-radius: 1.5em;
}

#categorylistboxHeading  {
	background: #00f0f0; border-radius: 22px 25px 0 0;
}

#categorylistboxContent  {
	background: #c0f0f0; border-radius: 0 0 1em 2em;
}

[pamela631]

OHHH, almost there!!!! Look: http://theposhbox.net/ZenCart/

This is wonderful.. Now where do I go from here?