Categories Dressing

Here's a link to the site:

http//:www.nineandup.com/Store

Replace this whole section in your stylesheet_categories_dressing.css

Code:

---

/* bullet for top categories & links:*/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links {
    display: list-item;
    list-style: disc inside url(../images/bullet1.gif);
    }
       
/*change  bullet when a category is open to subs:*/
a.category-top-text .category-subs-parent {
    display: list-item;
    list-style: square inside url(../images/bullet2.gif);
    }

/*bullet for subcategories:*/
/*
#categories a.category-subs-text, #categories a.category-products-text {
    display: list-item;
    list-style: circle inside url(../images/bullet3.gif);
    }
*/

---

with this

Code:

---

/*invisible placeholder bullet for top categories & links:*/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, a.category-top-text .category-subs-parent , #categories a.category-links {
    display: list-item;
    list-style: disc inside url(../images/pixel_trans.gif);
    }

/*bullet for current top category with products:*/
a.category-top-text .category-subs-selected {
    list-style: disc inside url(../images/bullet1.gif);
    }
       
/*bullet for current subcategory with products:*/
#categories a.category-products-text {
    display: list-item;
    list-style: circle inside url(../images/bullet1.gif);
    }

---

If this doesn't do exactly what you want, post a link and I'll tweak it from there.

Massilla -

Your /includes/templates/your_template/images/ folder is loaded with these demo images by Cat Dressing:
bullet1.gif
bullet2.gif
catbg25.gif
catbg25hover.gif
catbghover.gif
catimg3.gif

Delete catimg3.gif and the catbg gifs.

It looks like you have sorted the subcat display.

Thanks that worked like a charm. The only thing that's not right is the sub, sub headings have a huge gap in between the bullet and the sub cat. Also it's sort of indented to the right by about 5 pixels. How can I get it to stay flushed with the rest of the category headings? Also how can i get the dividers back? when I removed the image and added your code my divivders were also removed.

For the dividers, I think you had added a border-bottom or similar property to one of the rules I mentioned, which was eliminated in the replacement. If you have a record of what you did originally, you can go back and add that property to the rules you have now, or perhaps to a new rule.

Admin > Configuration > Layout Settings has lines that control things like the subcategories indent. Make records of what they are now and try changes, like deleting the   spaces.

Quote:

---

Originally Posted by gjh42

Replace this whole section in your stylesheet_categories_dressing.css

Code:

---

/* bullet for top categories & links:*/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links {
    display: list-item;
    list-style: disc inside url(../images/bullet1.gif);
    }
       
/*change  bullet when a category is open to subs:*/
a.category-top-text .category-subs-parent {
    display: list-item;
    list-style: square inside url(../images/bullet2.gif);
    }

/*bullet for subcategories:*/
/*
#categories a.category-subs-text, #categories a.category-products-text {
    display: list-item;
    list-style: circle inside url(../images/bullet3.gif);
    }
*/

---

with this

Code:

---

/*invisible placeholder bullet for top categories & links:*/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, a.category-top-text .category-subs-parent , #categories a.category-links {
    display: list-item;
    list-style: disc inside url(../images/pixel_trans.gif);
    }

/*bullet for current top category with products:*/
a.category-top-text .category-subs-selected {
    list-style: disc inside url(../images/bullet1.gif);
    }
       
/*bullet for current subcategory with products:*/
#categories a.category-products-text {
    display: list-item;
    list-style: circle inside url(../images/bullet1.gif);
    }

---

If this doesn't do exactly what you want, post a link and I'll tweak it from there.

---

Hello Glen :-)

I am a little confused.

I have copied the css from the original stylesheet_categories_dressing.css to my stylesheet (the parts I have needed to use) and deleted that stylesheet_categories_dressing.css file.

This is the code I now have at the bottom of my stylesheet.css:

/* bullet for top categories & links:*/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links {
display: list-item;
list-style: disc inside url(../images/bullet1.gif);
}

/*change bullet when a category is open to subs:*/
a.category-top-text .category-subs-parent {
display: list-item;
list-style: square inside url(../images/bullet2.gif);
}

/*bullet for subcategories:*/

#categories a.category-subs-text, #categories a.category-products-text {
display: list-item;
list-style: circle inside url(../images/bullet1.gif);
}

This gives me the red pointing down arrow for the top category (graphics not text bullets), and then the side point arrow for the sub categories.

What I am trying to do is, everytime the side arrow is selected it changes to a drop down arrow.

This is to happen in the top categories and ALL the sub categories.

Does that make sense?

I really apprecieate you taking the time to help me :-)

Mark

OK, I had the impression that you wanted an arrow only for the one selected (sub)category. The behavior you want should be possible; I'll have to get some info from my files when I get back home late tonight.

Quote:

---

Originally Posted by gjh42

OK, I had the impression that you wanted an arrow only for the one selected (sub)category. The behavior you want should be possible; I'll have to get some info from my files when I get back home late tonight.

---

Thank you for your help :-)

Mark

Sorry, it appears it will not be possible to correctly include that functionality with the present code. It's not just a matter of adding some more class tags; partly due to IE6 browser limitations, the class tags have to be added to different elements, so there would be multiple arrows on some subcategories.
The code really needs to be approached from a different direction to be efficient and effective with this functionality.

I have been considering ways to revamp the mod, but don't expect to change it until after v1.4 comes out, as that may affect the codebase.

Hey guys,

I have 3 categories

1, 2, and 3

with files:
catimg1.gif & catimg1hover.gif
catimg2.gif & catimg2hover.gif
catimg3.gif & catimg3hover.gif

I also have this code:
#categories a {
background-repeat: no-repeat;
display: block;
}

/*example for individual category as bg image*/
a.catimg1 {
background-image: url(../images/catimg1.gif);
height: 33px;
}

a.catimg1:hover {
background-image: url(../images/catimg1hover.gif);
}

a.catimg2 {
background-image: url(../images/catimg2.gif);
height: 33px;
}

a.catimg2:hover {
background-image: url(../images/catimg2hover.gif);
}

a.catimg3 {
background-image: url(../images/catimg3.gif);
height: 33px;
}

a.catimg3:hover {
background-image: url(../images/catimg3hover.gif);
}


but its not hovering! what do I do????

www.kekescookies.com/cookiestore