Categories Dressing

[milobloom]

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

TIA

[customk1]

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

[customk1]

ok, its there now... at the main site 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*/
#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;}

[customk1]

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;}

[gjh42]

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.

[customk1]

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

[gjh42]

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.

[creative_mind]

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.

[gjh42]

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.

[creative_mind]

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.

Almost, and I did that before.

The problem is after I click another link, both links show with the same bg colors. I would like the link return to the default bg color when another link is clicked.

Thanks in advance.