Categories Dressing

gjh42:

Troll - You need to use enough specificity so that the rule overrides any others that would apply to the links, like this:```
#categories li a.category-links:hover {
color: #aabbcc;
}

Thank's Glenn! :smile:
Thought I had tried the obvious... Maby did missspell or something?... :blush:

With a "background: #aabbcc;" tag to the above it's all good! :yes:

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)

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:
https://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```
#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
#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;
}

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.

Sorry, I forgot to add out site: https://www.maynardstackle.com

wally -Re "adjusting the vertical alignment of the text inside the buttons" - I think I lost a post when my computer crashed. You would want to add to
a.category-top {

line-height: 1.5em;

Adjust to taste.

I don't know why the column is expanding to different widths - I can't see anything in your CSS that would cause or allow it, and I have never seen anything just like it before.

Maynards - I don't know if it's related to your issues, but you are missing brackets here```
#categories li a {
background: url(../images/catbutton.gif) no-repeat;
}

/change bullet when a category w/o bg image is open to subs:/

#categories li a.cat-parent-text {
To get the hover on the All Products link, add to the hover rule:
/* top category hover effects*/
#categories li.cat-top a:hover, #categories li a.category-links:hover {
color: #dd6633;
background: #ddeeff url(../images/catbghover.gif)no-repeat;
}

/* subcategory hover effects*/
#categories li li.cat-subs a:hover, #categories li li.cat-products a:hover {
color: #aa9966;
background: #ffb9ff url(../images/catbghover.gif)no-repeat;
}

Thank you so much once again. I will give your suggestions a try.

Added the missing brackets but did not make a differents.
Copied and Added the code for the link "All Products" but it did not work for that link and also made the other links under categories not work.

Fixed both problems by getting rid of the "no-repeat" after cat.hover effects.:clap:
Thanks again Glen for your help with the code

All Products is getting the same hover effect as the other buttons for me (Firefox 3.6.3). It is also working in IE8 and (IE7) compatibility view.

OK, maybe that;s why... :)
I notice that you had```
background: #ddeeff url(../images/catbghover.gif)no-repeat;

Using Firebug, I get the same correct response with and without no-repeat, and with and without a space between it and the ).

I put it back with your suggestion of a space and now it works and looks better. Thanks again.

Now any suggestion how I can turn all the links on that left side to do the same thing as what was done under the Catagories heading?:blink: