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?
Printable View
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?
Near the bottom of your stylesheet.css you haveCode:#categories,#information {margin-top: 0;
float:left;}
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.
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?
"Popup images"? Do you mean substituting images for text, or using them for headings? Those are the only ways Categories Dressing uses images...
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
r1formetoo - I played with the styling a bit... see what you think of this.Code:#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*/
nummell - The generic subcategory hover effects are overriding the individual hovers. Commenting out that rule brings the hovers back:Or you could just delete the "background" line of the rule, and it would allow the individual ones to work.Code:/* 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);
} */