Categories Dressing

well, if you're sure its not the problem... then lets tackle other options... i just dont want there to be something screwy in having this alt catalog1 file and me waste your time working on it.

with that said, i do have everything duplicated in catalog1, however if you click on any link when on a page in catalog1, such as home... it links me back to the default mojoleather.com page... so to view any pages in catalog1 i have to physically type in the url.

i do not know if this would be causing the issue...

as for proper upload, i do have everything named properly, changing the your_template to simple_zen... and i have gotten your mod to work correctly on my site... so i dont feel like there are any issues with installation

are there any known mod conflicts that could be in play here? wondering if nate has a mod installed that i dont know about that is causing an issue... not likely i guess, but thought id ask.

running a quick errand... be back in about 1 1/2 hrs... looking forward to your reply.

thanks as always glenn,
ginny

back from afternoon of crap where did the day go?

i'll be online for a while if you have any other suggestions for me to try....

Your last post told me what the problem is.> i do have everything duplicated in catalog1, however if you click on any link when on a page in catalog1, such as home... it links me back to the default mojoleather.com page You copied all of the main site files to the /catalog1/ folder, right? I believe you didn't change the configure.php files to reflect the new folder location (or if you did, you missed something). Thus, links are pointing to the main site, and main site files are being used/looked for instead of /catalog1/ files.

I am using the latest ZenCart version.

I am also using the Categories Dressing module.

I am wondering how to prevent the categories list in the sidebox from collapsing when the user click the 'Home' page button.

In other words, I would like however the user selected the un-collapsed portion of the categories list in the sidebox to remain at it's present state when the page return to the main page. :(

I hope this makes any sense.

Sorry, that's not going to happen, at least without serious custom coding.
You can have the full tree expanded, or parts of it expanded based on current location, but it won't "remember" the previous page setting.

Hi Glenn,

Just wanted to quickly say thanks for Categories Dressing.

It has heled me change the look of my site in so many ways. Before I installed it my site was boring and quite basic but after I installes it and customized the category links a few time I ended up basing the look of my site around how the category links lookes.

So yeah, cheers mate. Have a vertual drink on me! :)

Hello Glenn,

Thanks again for the info. I've got some time this weekend so I am planning on tackling configuring the mod to work for the other side boxes. It should be a good learning experience for me as I only have rudimentary skills at best :unsure:

But if you have got some time to make a few suggestions, where is the best place to start? All I'm looking for is to be able to have images show up in place of the more information side box links as the Categories Dressing mod did for the categories.

Thanks for everything, Glenn!:bigups:

Glenn, i got nate to allow me to just upload to the 'real' site... and it is working now, no major issues.

on my site, you helped me make a mouseover button that would not flicker, (ie image 20x300 on hover -150px that sorta thing)

my site does it fine and i loaded one image into nates https://www.mojoleather.com

you can see the 'bracers' image, but it is mousing over with an effect, instead of the right side of the image...

what do i need to change/edit/delete?

thanks!

ginny

I don't see any bracers image with a hover effect (in either the main site or /catalog1/) - where is it supposed to be?

Also, /catalog1/ links are still going to the main site. You need to fix those configure.php defines if you really want to use it as a test installation.

glenn,

nate wanted the categories back the way they were until we could fix it, so 'categories dressing' is installed, but nothing is really changed.

it is on the main site, i think we are pretty much done with the /catalog1 thing... (thank God lol)

i will get with you tomorrow (friday) and upload the image again so you can see what it is doing... when we are both at the computer at the same time.

thanks for all your help,
ginny

It really is best to have a development installation, just so you can try things without worrying about looks. If you fix the path defines, /catalog1 should work fine.
I will probably not be on much tomorrow, and not at all over the weekend.

On my site https://www.NothingButCostumes.com
It looks fine except all the links are underlined.
How can I remove it?

TIA

Glenn, i hope i can catchya briefly this morning... i am uploading the bracers image again within the next 5 min. just have to get it off the laptop back to my desktop.
thanks!
ginny

ok, its there now... at the main site https://www.mojoleather.com

image is named catbg1.gif
it is 20x300
category width is set to 150 in admin

here is the css file, the changes to shift on hover are at the bottom:

/**
 * CSS Stylesheet for Categories Dressing examples
 * @copyright Copyright 2009 Glenn Herbert
 * @copyright Portions Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.gnu.org/licenses/ GNU Public License V3.0
 * /includes/templates/your_template/css/stylesheet_categories_dressing.css
 * Categories Dressing v2.7.3   Glenn Herbert (gjh42)   - 20090505
 */
/*
hr.catBoxDivider1 { 
    color: #aabbcc;
    }
*/

/*IE6 hacks*/
* html #categories li, * html #categories li a {
    height: 1em;/*fix IE6 whitespace bug*/
    background-image: url(../images/pixel_trans.gif);/*partially fix IE6 a block display bug*/
    }

.catBoxHeading1 { 
    font-family: georgia, serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335511; 
    background-color: #ffffff;
    /*background-image: url(../buttons/english/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0;
    }

.catBoxHeading2 { 
    font-family: 'times new roman', serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335544; 
    background-color: #ffffff;
    /*background-image: url(../buttons/english/catheadbg2.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }

.catBoxHeading3 { 
    font-family: 'comic sans ms', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    color: #336699; 
    background-color: #ffbbdd;
    /*background-image: url(../buttons/english/catheadbg3.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }

.catBoxHeadingImg { 
    padding: 0;
    margin: 0;
    }

.catBoxSubtext1 {
    font-family:  'times new roman', serif;
    font-weight: normal;
    font-size: 1.2em;
    color: #669911; 
    background-color: #ffddff;
    padding: 0.1em 0.2em 0.1em 1.0em;
    }

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

#categories ul a {/*top categories*/
    display: list-item;
    list-style: disc inside url(../images/bullet1.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/bullet1.gif);/*change to list-style: none; to remove bullet*/
    background: #ffddbb;
    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/bullet2.gif);/*change to list-style: none; to remove bullet*/
    }

/*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*/
    }

/*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*/
    }

/*different bullet for links if desired*/
/*
#categories li a.category-links {
    list-style: disc inside url(../images/bullet4.gif);
    }
*/

/* top category hover effects*/
#categories li.cat-top a:hover {
    color: #dd6633; 
    background:  #ddeeff url(../images/catbghover.gif);
    } 

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

/*individual page rules go after the general rules*/
[B]#categories li a.catBg1 {
background: url(../buttons/english/catbg1.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories li a.catBg1:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg2 {
background: url(../buttons/english/catbg2.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories li a.catBg2:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg3 {
background: url(../buttons/english/catbg3.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg3:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg4 {
background: url(../buttons/english/catbg4.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg4:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg5 {
background: url(../buttons/english/catbg5.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories li a.catBg5:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg6 {
background: url(../buttons/english/catbg6.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories li a.catBg6:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg7 {
background: url(../buttons/english/catbg7.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg7:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg8 {
background: url(../buttons/english/catbg8.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg8:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg9 {
background: url(../buttons/english/catbg9.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg9:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
[/B]
.catCount {color: #000000;}

i made some changes to the CSS to mimic my working version on my site... basically /*'d most stuff... here is the updated version:

 stylesheet_categories_dressing.css
File Type: ASCII C program text

/**
 * CSS Stylesheet for Categories Dressing examples
 * @copyright Copyright 2009 Glenn Herbert
 * @copyright Portions Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.gnu.org/licenses/ GNU Public License V3.0
 * /includes/templates/your_template/css/stylesheet_categories_dressing.css
 * Categories Dressing v2.7.3   Glenn Herbert (gjh42)   - 20090505
 */
/*
hr.catBoxDivider1 { 
    color: #aabbcc;
    }
*/

/*IE6 hacks*/
* html #categories li, * html #categories li a {
    height: 1em;/*fix IE6 whitespace bug*/
    background-image: url(../images/pixel_trans.gif);/*partially fix IE6 a block display bug*/
    }

/* .catBoxHeading1 { 
    font-family: georgia, serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335511; 
    background-color: #ffffff;
    /*background-image: url(../buttons/english/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
/*    padding: 0.3em 0.4em;
    margin: 0;
    }  */


/*.catBoxHeading2 { 
    font-family: 'times new roman', serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335544; 
    background-color: #ffffff;
    /*background-image: url(../buttons/english/catheadbg2.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
/*    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }

/*.catBoxHeading3 { 
    font-family: 'comic sans ms', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    color: #336699; 
    background-color: #ffbbdd;
    /*background-image: url(../buttons/english/catheadbg3.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
/*    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }

/*.catBoxHeadingImg { 
    padding: 0;
    margin: 0;
    }

/*.catBoxSubtext1 {
    font-family:  'times new roman', serif;
    font-weight: normal;
    font-size: 1.2em;
    color: #669911; 
    background-color: #ffddff;
    padding: 0.1em 0.2em 0.1em 1.0em;
    }
*/

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

#categories ul a {/*top categories*/
    display: list-item;
    list-style: none;/*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 0;
    padding: 0 0 0 0;
    }

#categories ul ul a {/*subcategories*/
    display: list-item;
    list-style: circle inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
    background: #ffddbb;
    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/bullet2.gif);/*change to list-style: none; to remove bullet*/
    }

/*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*/
    }

/*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*/
    }

/*different bullet for links if desired*/
/*
#categories li a.category-links {
    list-style: disc inside url(../images/bullet4.gif);
    }
*/

/* top category hover effects*/
/* #categories li.cat-top a:hover {
    color: #dd6633; 
    background:  #ddeeff url(../images/catbghover.gif);
    } */

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

/*individual page rules go after the general rules*/
#categories li a.catBg1 {
background: url(../buttons/english/catbg1.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories li a.catBg1:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg2 {
background: url(../buttons/english/catbg2.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories li a.catBg2:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg3 {
background: url(../buttons/english/catbg3.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg3:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg4 {
background: url(../buttons/english/catbg4.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg4:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg5 {
background: url(../buttons/english/catbg5.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories li a.catBg5:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg6 {
background: url(../buttons/english/catbg6.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories li a.catBg6:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg7 {
background: url(../buttons/english/catbg7.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg7:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg8 {
background: url(../buttons/english/catbg8.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg8:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg9 {
background: url(../buttons/english/catbg9.gif) 0 0 no-repeat;
height: 20px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#categories li a.catBg9:hover {
background-position: -150px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.catCount {color: #000000;}

You are getting the generic hover effect overriding the individual ones, because the generic one has #categories in the selector list giving it more weight. Find this

/* top category hover effects*/
#categories li.cat-top a:hover {
    color: #dd6633; 
    background:  #ddeeff url(../images/catbghover.gif);
    } 
```and delete the background property completely. Do the same for the subcat hover rule if you wish.

You also have two versions of stylesheet_categories_dressing.css, which is a bad practice. The original will still be active if you delete something in the new version. If you must save a backup copy, save it elsewhere, or rename it to stylesheet_categories_dressing.bak.

I see you commented out the whole generic hover rule, which is fine, but it will have no effect while the original copy is still active.

glenn,

thank you for such an easy fix... sorry we had to run around for over a week to get together on this.

i def. learned some new things...

/* isnt the 'cure-all'... just because i had it disabled, it actually needed to be deleted

renaming a backup to categories_dressing1.css is not enough of a 'name change' to keep a backup... need to change the extension...

(i just deleted the file, i had only had it there for about 10 min when i was experimenting with all the /* stuff)

i need to fidget with it some more, like turn the border off, move it over etc. but at least the basics are there, and the hover is correct.

thank you again, all of your time on this forum is appreciated!
-ginny

Disabling with /* */ is just as good as deleting. The problem was the backup still active. Glad it's sorted so you can proceed with styling.

milobloom - I don't see any underlined links. I do see a lot of borders at top & sides of various elements - if those are not intended, you should use the Firefox Web Developer extension (Information > Display Element Information > click on element) to find the classnames involved and edit their rules.

I am using the latest version of Zen-Cart and Categories Dressing.

How do I keep the defined background color to remain after the 'New Products" or the "Featured Products" link has been clicked?

It returns to standard colors after clicking.

You're wanting the "hover" bg color to remain after clicking on one of the categories? That would be the "visited" pseudo-class, which will make a link you have clicked assume the specified properties as long as your browser remembers that you have been there.

#categories li a:visited {background-color: #aabbcc;}

or any number of variations.