Categories Dressing

I guess I am missing it somewhere in the forum or in the instructions, but I am continuing to try

My site is: www.AllClaveParts.com
I am using zencart version 1.38

First, I want to add a background image (a button ) behind the linked text something like this (named catbg20.gif & stored in /templates/mytemplate/buttons/english)

http://www.allclaveparts.com/include...sh/catbg20.gif


Then I want to divide the categories up into 2 non-linked headings: "Free Documents" and "Autoclave Parts"

I have tried modifying two files:

/stylesheet_categories_dressing.css & /categories_dressing/defines.php

with no luck.

I would really appreciate someone pointing me in the right direction with this excellent add on

Thank you

Wally

You don't appear to have any top category with id 20, which is why the button does not display anywhere.
What you really want here is a generic background for all the category links. Thus, you would add it as the background in

#categories li a {background: url(../images/catbutton.gif);}

and save it as /includes/templates/your_template/images/catbutton.gif.

For the headings (assuming you already have the categories in the order you want them), you would define them for category 176 (the first one in free documents) and category 217 (the first one in parts). You should comment out the defines for categories you don't want special, like category 1.

I am also trying to do something simular to Wally. My site is:
www.maynardstackle.com
I am trying to get the text links on top of the yellow buttons. Can someone give me some advice in which to do that.
Thank you in advance.

Maynards - You are using the button background image as the list marker. What you want is to use it as the background-image. Change this

Code:

---

#categories ul a {/*top categories*/

    display: list-item;

    list-style: disc inside url(../images/catbutton.gif);/*change to list-style: none; to remove bullet*/

    background: no-repeat;

    border: none;

    margin: 0;

    padding: 0;

    }



#categories ul ul {/*subcategory lists*/

    list-style: none;

    background: #ffeecc;

    border: none;

    margin: 0 0 0.4em 0;

    padding: 0 0 0 1.3em;

    }



#categories ul ul a {/*subcategories*/

    display: list-item;

    list-style: circle inside url(../images/catbutton.gif);/*change to list-style: none; to remove bullet*/

    background: #ffddbb;

    border: none;

    margin: 0;

    padding: 0;

    }

---

to this

Code:

---

#categories ul a {/*top categories*/
    display: block;
    background: url(../images/catbutton.gif) no-repeat;
    border: none;
    margin: 0;
    padding: 0;
    }

#categories ul ul {/*subcategory lists*/
    list-style: none;
    background: #ffeecc;
    border: none;
    margin: 0 0 0.4em 0;
    padding: 0 0 0 1.3em;
    }

#categories ul ul a {/*subcategories*/
    display: block;
    background: #ffddbb url(../images/catbutton.gif) no-repeat;
    border: none;
    margin: 0;
    padding: 0;
    }

---

You may want to add a height to these rules as well.

Thanks so much I give a try.

Also, since you are not using the chcategories version, you should delete stylesheet_chcategories_dressing.css, as a few of its rules may override the ones you have in stylesheet_categories_dressing.css.

I did delete the file chcategories_dressing.css, but I am still having a few issues. I will keep working on it.... I am alot closer to what I am looking for with your help. Thank you

Thank you so much for your help and support!

I have the text aligned to the center of the buttons, is there any way to put them in the middle of the button vertically as well?

Also, when you clik on any of the categories, the box widens considerably, and it is attempting to put a second button along side of it.

I am going through the forum, and trying different things as I find them.

Again, thank you for your help

Wally

By adding "no repeat" after the url as in the post above, I was able to stop the buttons from duplicating. But the columns continue to get wider and the text moves off of the button.

The worst offender I have found so far is when you click on specials from the drop down menu at the top of the page under home

I still haven't found anything about adjusting the vertical alignment of the text inside the buttons

Could you please point me in the right direction

Thank you

Wally

2 issues with cat.dressings... why does the hover buttons work with FF but not with IE? and is there a way I can make the same hover button to work with the last link under catagories called: All products.