styling the category, and product items

[keneso]

Hi,

I'm using ZC1.38

I am trying to style the category, and product listings over here:
http://www.editricebahai.com/libreria

I've tried different solutions, but since I'm not a css guru I need your help.

I need to move the sub-categories (goldplate background) so to have the main categories (green background) display correctly, with a decent spacing.
I gave a -10px top-margin for the sub-category , as otherwise they would be distanced too much; I'd also would like to vertically center the text in the goldplate background.

Thank you.

[gjh42]

The space is because you changed the subcategory<a> links to display: block; - there is a
<br />
in the code that kept the links on separate lines when they were inline display.
You can take care of that by editing /includes/templates/your_template/sideboxes/tpl_categories.php to remove the <br />, but then you will have to make all categories display: block;.

You have some modifications to the categories sidebox code, but you are not getting the <ul> lists you apparently want.
You might want to look at Categories Dressing, which handles a lot of those things for you, and allows a lot of design options.

[keneso]

Thanks a lot.

I downloaded Categories Dressing, and it's great help.

[keneso]

Hi again.

I tried the Category Dressing, and got something done, but I am stuck; I tried many ways, probably all wrong, as by my limited knowledge.

If you kindly take a look
here
you'll see my problem:
I have a set of 3 images (basically the same with different width), that should display as top-cat, sub-cat, and sub-sub-cat; but I notice the "Shoghi Effendi" button though being a sub-cat of "libri" acts like being a sub-sub-cat ... I would like to achieve something like this:



Any help will be very appreciated.

Thank you

[gjh42]

Since you don't want to distinguish between various types of categories at each level, your best bet will be to delete the background properties from where you have them now and put them in the #categories ul a {} series of rules. This will be much simpler.

#categories ul {/*top category lists*/
    list-style: none;
    background: none;
	border: 2px solid #F00;
    margin: 0 0 0.4em 0;
    padding: 0;
    }

#categories ul a {/*top categories*/
    display: list-item;
    list-style: disc inside url(../images/bullet_01.gif);/*change to list-style: none; to remove bullet*/
	background-image: url(../images/category_bg_01.jpg); /*aggiunta mia*/
    border: none;
    margin: 0;
    padding: 0;
    }

#categories ul ul {/*subcategory lists*/
    list-style: none;
    background: none;
    border: none;
    margin: -4px 0 9px 0;
    padding: 0 0 0 10px;
	border: 2px solid #0FF;
    }

#categories ul ul a {/*subcategories*/
    display: list-item;
    list-style: circle inside url(../images/bullet_01.gif);/*change to list-style: none; to remove bullet*/
    background: #00FF00 no-repeat;
	background-image: url(../images/category_bg_02.jpg); /*aggiunta mia*/
    border: none;
    margin: 0;
    padding: 0;
    }

#categories ul ul ul {/*subcategory lists*/
    list-style: none;
    background: none;
    border: none;
    margin: -4px 0 0 0;
    padding: 0 0 0 10px;
	border: 2px solid #000;
    }
	
#categories ul ul ul a {/*sub-subcategories*/
    display: list-item;
    list-style: circle inside url(../images/bullet_01.gif);/*change to list-style: none; to remove bullet*/
    background: #0000FF no-repeat;
	background-image: url(../images/category_bg_03.jpg); /*aggiunta mia*/
    border: none;
    margin: 0;
    padding: 0;
    }

/*change  bullet when a category w/o bg image is open to subs:*/
#categories li a.cat-parent-text {
    list-style: square inside url(../images/bullet_02.gif);/*change to list-style: none; to remove bullet*/
	background-image: url(../images/category_bg_01.jpg); /*aggiunta mia*/
	height: 24px; /*aggiunta mia*/
    }
	
#categories li li a.cat-parent-text {
    list-style: square inside url(../images/bullet_02.gif);/*change to list-style: none; to remove bullet*/
	background-image: url(../images/category_bg_02.jpg); /*aggiunta mia*/
	height: 24px; /*aggiunta mia*/
    }
	
#categories li li li a.cat-parent-text {
    list-style: square inside url(../images/bullet_02.gif);/*change to list-style: none; to remove bullet*/
	background-image: url(../images/category_bg_03.jpg); /*aggiunta mia*/
	height: 24px; /*aggiunta mia*/
    }

/*change  bullet when a category w/o bg image is open to products:*/
#categories li a.cat-selected-text {
    list-style: square inside url(../images/bullet_03.gif);/*change to list-style: none; to remove bullet*/
    }

/*disable bullet for cats w/ image or bg image*/
#categories li a.cat-parent, #categories li a.cat-selected, #categories li a.cat-not-selected {
    list-style: none;
    display: block;/*fix IE6 margin-left bug*/
    }
	
#categories li.cat-top a {
    color: #FFF; 
	background-image: url(../images/category_bg_01.jpg); /*aggiunta mia*/
	height: 24px; /*aggiunta mia*/
	padding-top: 5px; /*aggiunta mia*/
    }
	
#categories li .cat-subs a {
    color: #FFF; 
    background-image: url(../images/category_bg_02.jpg); /*aggiunta mia*/
	height: 24px; /*aggiunta mia*/
    }
	
#categories li li.cat-products a{
    color: #FFF; 
    background-image: url(../images/category_bg_03.jpg); /*aggiunta mia*/
	height: 24px; /*aggiunta mia*/
    }
/*	
#categories li li li.cat-products a{
    color: #FFF; 
    background-image: url(../images/category_bg_03.jpg) no-repeat; /*aggiunta mia
	height: 24px; /*aggiunta mia*/
    }

If you have any more questions, please post in the Categories Dressing support thread.

[keneso]

Thank you very much.
I will post in the Category Dressing support, as I still have some problems with it.