Categories Dressing

To use an image for the heading, put its name and the alt text for it in the define as the examples show:

PHP Code:

---

define ('CAT_BOX_HEADING_7','1|0|g_neonati.gif|Giocattoli neonati'); 


---

Replace g_neonati.gif|Giocattoli neonati with the filename and alt text you want.

If you want to use an image behind the existing text, leave the define as is and add the image as a background-image in .catBoxHeading1 {}. You can find my e-mail in the readme file - thanks:)

yes I found email for paypal.
:P

From pm:

Quote:

---

1. site in questions is http: // 216. 185. 196. 188 and Im trying to make it look much like the site www.thebarpokerleague.com. We use images at the league site but I want to use css on the store Im building.

2. Hwo do I get the category title to stay the hover color while the customer is looking at products in the subcategories under that category heading? Specifically, when someone clicks on CARDS, I want that to stay purple like the hover while that category is open. If someone clicks on another category, I want that to go back to the gold it was and the new category to stay purple.

3. Seems liek the subcategory, ie licensed, doesnt really span the lenght of the sidebox. Hwo do I make that happen?

4. I want the subcategory indented to the right much less than it is, I want the sub categories to move over to the left more, not sur eif I want to keep them indented or not yet. how do I play with this?

5. Lastly, and most frustratingly, how do I get the text to appear vertically in the middle of the space instead of aligned to the top?

---

2: Give a background-image to #categories li a.cat-parent-text { and #categories li a.cat-selected-text {

3: Adjust margins and paddings.

4: Margins and paddings again. Also, admin > Configuration >Layout Settings > Categories SubCategories Indent.

5: Replace all height: 2.0em; with line-height: 2.0em;
There are more instances than I have shown below.

You have a lot of duplicated properties, when many of them will be inherited from more general rules. It will make styling easier if you first comment out and then (if there is no ill effect) delete duplicate properties from subcat, hover, etc. The properties of the first "ul a" rule will carry over to the other "a" rules (except for backgrounds).
Once you have simplified what you can, I'll look at it again.

Code:

---

#categories ul a {/*top categories*/
    display: list-item;
        background-image: url(../images/tile_back_gold.gif);
    background-repeat: repeat;
        line-height: 2.0em;
    margin: 0em 0em 0em;
    /*list-style: disc inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
    /*background-image: url(../images/pixel_trans.gif);
        background: no-repeat;*/
    border: none;
    /*margin: 0;*/
    padding: 0;
        color: #000000;
        font-size: 1.5em;
    }

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

#categories ul ul a {/*subcategories*/
    display: list-item;
    list-style: circle inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
        line-height: 2.0em;
    margin: 0em 0em 0em;
    border: none;
    padding: 0 0 0 1.0em;
        background: #9B8D20;
    }

/*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/bullet2.gif);/*change to list-style: none; to remove bullet*/
    background-image: url(../images/tile_back_purple.gif);
    }

/*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/bullet3.gif);/*change to list-style: none; to remove bullet*/
    background-image: url(../images/tile_back_purple.gif);
    }

---

Quote:

---

Originally Posted by gjh42

To use an image for the heading, put its name and the alt text for it in the define as the examples show:

PHP Code:

---

define ('CAT_BOX_HEADING_7','1|0|g_neonati.gif|Giocattoli neonati'); 


---

Replace g_neonati.gif|Giocattoli neonati with the filename and alt text you want.

If you want to use an image behind the existing text, leave the define as is and add the image as a background-image in .catBoxHeading1 {}. You can find my e-mail in the readme file - thanks:)

---

I did it thank you very much also because I stressed you.
Last thing, can I center the images that I have inserted?
:smile:

Last last thing I donated to you, thanks for your precious work.
:yes:

Add text-align: center; to .catBoxHeadingImg {

Code:

---

.catBoxHeadingImg {
    padding: 0;
    margin: 0;
    text-align: center;
    }

---

And thanks:)

Quote:

---

Originally Posted by gjh42

Add text-align: center; to .catBoxHeadingImg {

Code:

---

.catBoxHeadingImg {
    padding: 0;
    margin: 0;
    text-align: center;
    }

---

And thanks:)

---

thanks to you but
this doesn't go :mellow:

It worked when I tested it on your site... I just tried it again and it still works.

Hello everyone....

I need help with (1) little thing.

How can I get the categories names to display in the url. :wacko:

Example when I click on BOOTS, the url displays click here

My website


Thanks alot

You're looking for an SEO mod to change the appearance of the URL. There are several available, and you can look through the forum to see which is best for you.

Quote:

---

Originally Posted by gjh42

You're looking for an SEO mod to change the appearance of the URL. There are several available, and you can look through the forum to see which is best for you.

---

Thanks for the fast reply.... I will look in the add-on section....
btw... your mod taught me alot about CSS....Thank you :smartalec: