Categories Dressing

[gjh42]

Near the bottom of your stylesheet.css you have

#categories,#information {margin-top: 0;
  float:left;}

[gjh42]

This is causing the left spacing on subcats:

stylesheet_chcategories_dressing.css (line 90)

#chcategories ul ul {
background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
list-style: none outside none;
margin: 0 0 0.4em;
padding: 0 0 0 1.3em;
}

Adjust as desired.

[r1formetoo]

Near the bottom of your stylesheet.css you have

#categories,#information {margin-top: 0;
  float:left;}

Wow, not sure how I missed that????????

[r1formetoo]

Glenn, please have a look at the site examplecart.com now and let me know what you think. I've played with the spacing and colors a bit but I'm still not convinced that it looks as professional as the rest of the site. What do you think of the color choices? I feel like the site looks ok "until" you hover over a category. Then the pop up box shows the subs and I feel that's where things look a bit amateurish. What would you try to give it a tad more professional and flowing look? I'm also interested in seeing how you can use pop up images for sub categories though I've yet to see a site with this in action. Do you know of any?

[gjh42]

"Popup images"? Do you mean substituting images for text, or using them for headings? Those are the only ways Categories Dressing uses images...

[nummell]

Hi Glenn,

It only happens in sub cat with background images... it used to work just fine but it stoped working and I can´t figure out whats wrong check here http://pedradatattoosupplies.com/ind...=index&cPath=7

I have 2 sub cat images named correctly (1 regular and another for hover) and it used to work just fine. what can be wrong


Thx in advance

Best regards

nummell

[gjh42]

r1formetoo - I played with the styling a bit... see what you think of this.

#chcategories ul {/*top category lists*/
    list-style: none;
    background: none;
    border: nono;
    margin: 0 0 0.4em 0;
    padding: 0;
    }

#chcategories ul a {/*top categories*/
    display: block;
    background: #ffffff;
    border: none;
    margin: 0;
    padding: 0 0.4em;
    }

#chcategories ul ul {/*subcategory lists*/
    list-style: none;
    background: #DCDCDC;
    border: none;
    margin: 0 0 0.0em 0; /*WAS 0 0 0.4em 0*/
    padding: 0 0 0 0.0em; /*WAS 0 0 0 1.3em*/
    }

#chcategories ul ul a {/*subcategories*/
    display: block;
    background: #E9EAEA;
    border: none;
    margin: 0;
    padding: 0;
    }

/*change  bullet when a category w/o bg image is open to subs:*/
#chcategories li a.cat-parent-text {
    color: #000000;
    background: #6CbBff;
    font-weight: bold;
    }

/*change  bullet when a category w/o bg image is open to products:*/
#chcategories li a.cat-selected-text {
    color: #000000;
    background: #6CbBff;
    font-weight: bold;
    }
...

/* top category hover effects*/
#chcategories li.cat-top a:hover {
    color: #000000; /*this is the top level cat text color only when hovering*/
    background:  #4C9Bff; /*this is the top level cat background color only when hovering*/
    } 

/* subcategory hover effects*/
#chcategories li li.cat-subs a:hover, #chcategories li li.cat-products a:hover {
    color: #000000; /*this is the 1st subcat text color only when hovering*/
    background: #4C9Bff; /*this is the 1st subcat background color only when hovering*/
    } 

...

#chcategoriesContent {padding: 0.4em 0;}
/*From here to */
#chcategories li>ul {display: none;}

#chcategories li:hover {position: relative;}

#chcategories li:hover>ul {
    display: block;
    position: absolute;
    left: 98%;
    top: 0;
    border: 1px solid #000000;
    z-index: 100;
    width: 98%;
    }	
/*Here came from post 1750 of main support thread*/

[gjh42]

nummell - The generic subcategory hover effects are overriding the individual hovers. Commenting out that rule brings the hovers back:

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

Or you could just delete the "background" line of the rule, and it would allow the individual ones to work.

[r1formetoo]

r1formetoo - I played with the styling a bit... see what you think of this.

#chcategories ul {/*top category lists*/
    list-style: none;
    background: none;
    border: nono;
    margin: 0 0 0.4em 0;
    padding: 0;
    }

#chcategories ul a {/*top categories*/
    display: block;
    background: #ffffff;
    border: none;
    margin: 0;
    padding: 0 0.4em;
    }

#chcategories ul ul {/*subcategory lists*/
    list-style: none;
    background: #DCDCDC;
    border: none;
    margin: 0 0 0.0em 0; /*WAS 0 0 0.4em 0*/
    padding: 0 0 0 0.0em; /*WAS 0 0 0 1.3em*/
    }

#chcategories ul ul a {/*subcategories*/
    display: block;
    background: #E9EAEA;
    border: none;
    margin: 0;
    padding: 0;
    }

/*change  bullet when a category w/o bg image is open to subs:*/
#chcategories li a.cat-parent-text {
    color: #000000;
    background: #6CbBff;
    font-weight: bold;
    }

/*change  bullet when a category w/o bg image is open to products:*/
#chcategories li a.cat-selected-text {
    color: #000000;
    background: #6CbBff;
    font-weight: bold;
    }
...

/* top category hover effects*/
#chcategories li.cat-top a:hover {
    color: #000000; /*this is the top level cat text color only when hovering*/
    background:  #4C9Bff; /*this is the top level cat background color only when hovering*/
    } 

/* subcategory hover effects*/
#chcategories li li.cat-subs a:hover, #chcategories li li.cat-products a:hover {
    color: #000000; /*this is the 1st subcat text color only when hovering*/
    background: #4C9Bff; /*this is the 1st subcat background color only when hovering*/
    } 

...

#chcategoriesContent {padding: 0.4em 0;}
/*From here to */
#chcategories li>ul {display: none;}

#chcategories li:hover {position: relative;}

#chcategories li:hover>ul {
    display: block;
    position: absolute;
    left: 98%;
    top: 0;
    border: 1px solid #000000;
    z-index: 100;
    width: 98%;
    }	
/*Here came from post 1750 of main support thread*/

For some reason Glenn I just completely missed seeing this post til now. I implemented your thoughts and then a few of mine. I did away with the grey background in the pop up subcat box and went to white. I then added a hover background color that was a lighter blue this time. I like it. One thing I still think it needs is for the subcats to display once your inside them. Take the link below as an example. It's not until you hover over "sport bike stands" that you are reminded you're in the "commercial series" section. I sort of think that perhaps we should have all the subcats displayed without hovering so people are tempted to continue clicking to see the industrial and swivel series and so on. What do you think of this idea?

http://www.examplecart.com/catalog/s...series-c-87_88

[r1formetoo]

"Popup images"? Do you mean substituting images for text, or using them for headings? Those are the only ways Categories Dressing uses images...

I suppose. I haven't seen this type of category in action so I'm not sure what it looks like and if I'll like it or not.