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?

[gjh42]

Adjust the colors, borders, radii, etc. until you like them. What other elements do you want to style?

[pamela631]

I was going to have it so that the hover state is a different color for the whole line, like this below:

[gjh42]

This mod uses the primitive structure of the original Zen Cart categories sidebox, which is not built to allow an entire line to be highlighted.

That said, it is possible to alter the display with the help of some admin settings and some stylesheet rules to do this. It would not be practical with a more complex category structure than you have.

/* CATEGORY SECTION NEED TO FIGURE THIS OUT */	

#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; padding: 0;
}
#categorylistboxContent span {
	display: block; height: 1.4em;
}
#categorylistboxContent a {
	display: block; height: 1.3em; padding-left: 0.3em;
}
#categorylistboxContent .category-products {
	padding-left: 1.4em; 
	position: relative; top: -1.4em;/*this is to counter a puzzling vertical offset that ought not to be happening... due to the span? */
}
#categorylistboxContent a:hover {
	background: #70f0f0; display: block;height: 1.0em;
}
#categorylistboxContent span+br {
	display: none;
}

Again, adjust to taste. Don't just leave everything as I post it, as some of these are exaggerated to show the effect.

[pamela631]

Ok, I'll play around with the settings later on today and see what I can come up with.. Thanks again for all your help, I really appreciate it! I'll let you know how it goes once it's all done :)

Pamela