Categories Dressing

[r1formetoo]

Did you have a custom rule for #categories which set margin-top to 0? If so, duplicate it for #chcategories.

I checked my includes/templates/custom/css/stylesheet.css file and searched it for a #categories statement but came up with nothing. Am I looking in the wrong place?

[r1formetoo]

Did you have a custom rule for #categories which set margin-top to 0? If so, duplicate it for #chcategories.

Ok, I'm finally making some headway getting everything dressed appropriately. However, when I hover over a top level category I still have this white space to the left of all my choices in that pop up box with all my subcategories. I think that white space looks out of place though I have no idea what causes it. What do you think?

[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.