Categories Dressing

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

gjh42:

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

Glenn, what did you think of my layout with colors and general look and feel?

Thanks Glenn :clap:

It´s working again...

Keep up the good work with your mods

Best regards

nummell

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.Look at nummell's site for a prime example of text replaced by images with hover effects.

Ok, I think I've found a set of color combinations that looks good. My last thing to address is this. When you click on a subcat and enter the next page the only thing in the menu that lets you know that you're inside that category is that the little red arrow has changed from pointing right to pointing down. I feel that the menu should better display that you're inside a subcat. How would you do this if you were me? There are many options. We can have all the subcats display once you're inside of one of them. We can have the background color change once you're inside. What have you seen that works well?

gjh42:

Look at nummell's site for a prime example of text replaced by images with hover effects.

Oh I see now. My old site was like that and I had to create images for each new category and I hated that. I also had good reason to believe not having a text based menu hurt my rankings with Google. Thanks but I'll keep the text based menu.

Re: general look and feel... I think it's basically good, though the listing description being centered is an annoying fact that makes it harder to read and seem less well thought out. I know it's the default; that doesn't make it good:)

I notice that nearly all of the descriptions have the last word or two orphaned down on another line, drawing attention to themselves over the rest. They would look better if the truncation were changed to a bit less (for two lines) or a bit more (for three fuller lines), or the width of the description was narrower so the text filled the space better. Picky, I know, but niggling things like that may make readers uncomfortable without knowing why.
A bit more space between rows in the listing would make it more comfortable. Not sure if a divider would be good - test and see - maybe very light to not be obtrusive.

Colors are good, red obviously following from the name and blue making a perhaps unconscious evocation of "patriotic" colors. That just this moment occurred to me, and most would probably not think of it, but it is likely not a bad thing.

I think the one critique overall would be that it seems "full" with little intentional white space in the page. White space gives eye relief and lets text stand out. Take these comments as musings that may not all be compatible, just things to consider.

You posted while I was writing - for the subcats, the styling I played with above dealt with current category identification among other things. I haven't looked at your latest color changes yet.

If it's just categories menu changes, I did see the black border. I don't think it helps; in fact, the border should go away, and I think your menu would work better without the arrows/markers, but using text and background colors and font-weight to distinguish status. The blue hover bg is too dark to read the text on it. My trial handled all of these comments.

gjh42:

Re: general look and feel... I think it's basically good, though the listing description being centered is an annoying fact that makes it harder to read and seem less well thought out. I know it's the default; that doesn't make it good:)

I notice that nearly all of the descriptions have the last word or two orphaned down on another line, drawing attention to themselves over the rest. They would look better if the truncation were changed to a bit less (for two lines) or a bit more (for three fuller lines), or the width of the description was narrower so the text filled the space better. Picky, I know, but niggling things like that may make readers uncomfortable without knowing why.
A bit more space between rows in the listing would make it more comfortable. Not sure if a divider would be good - test and see - maybe very light to not be obtrusive.

Colors are good, red obviously following from the name and blue making a perhaps unconscious evocation of "patriotic" colors. That just this moment occurred to me, and most would probably not think of it, but it is likely not a bad thing.

I think the one critique overall would be that it seems "full" with little intentional white space in the page. White space gives eye relief and lets text stand out. Take these comments as musings that may not all be compatible, just things to consider.

You posted while I was writing - for the subcats, the styling I played with above dealt with current category identification among other things. I haven't looked at your latest color changes yet.

Some of your thoughts I'm "in tune with" and some I'm not. I'm not quite sure what you mean by "listing description being centered." If you look at my real site https://www.RedlineStands.com you'll notice that my home page description is different. Is that what you mean?

I don't see these issues that you see about my categories menu doing any truncating to the next line. Can you post a screenshot?

I agree that my menu looks a bit full and could use a little extra white space in between each listing. I'm sure this is a stylesheet change, though I'm not sure how to do that. Please keep in mind that the live site https://www.RedlineStands.com already has a huge menu and making it much taller might not be for the best....

The black borders and dark blue were all done for continuity. The black borders connect the main menu to the subcat menu. The blue was chosen because it's the same blue used right above the menu. I understand what you're saying and I'm going to try your changes and see how I like them. I do, however, agree completely that the arrows should disappear completely. How do I remove them?

My long comments were about the site generally, and the product listing in the center column.

Removing the arrows is part of the code I posted for you.

I think the extra black border adds to the busyness of the column without relating to the rest of the usually visible column.

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/

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/sportbike-stands-commercial-series-c-87_88>

Have the active category's subs expanded in the sidebox instead of the hoverbox? Could be a good idea, especially if the current subcat is not prominently identified in the main column.

Add to the bottom of your stylesheet

.cat-parent-text+ul {display: block !important;}

It needs some more rule tweaking to eliminate a hover jitter, but that would be a start.
I have to go now, and probably won't be able to spend time on this for a couple of days.

gjh42:

Have the active category's subs expanded in the sidebox instead of the hoverbox? Could be a good idea, especially if the current subcat is not prominently identified in the main column.

Add to the bottom of your stylesheet

.cat-parent-text+ul {display: block !important;}

It needs some more rule tweaking to eliminate a hover jitter, but that would be a start.
I have to go now, and probably won't be able to spend time on this for a couple of days.

I tried that and I see exactly what you mean. Man those jitters are serious! Ha! As usual I have no idea what to do to fix that. Please shoot me over a PayPal PM and I'll send you a couple bucks for your help. Thanks and please let me know if you get any ideas on how to fix that jitter.....

Thanks for the "Prime" rating Glenn

Try this in place of the short rule above:```
#chcategories .cat-parent-text+ul, #chcategories li:hover>.cat-parent-text+ul {
display: block;
position: static;
border: 0;
width: 100%;
}

gjh42:

Try this in place of the short rule above:```
#chcategories .cat-parent-text+ul, #chcategories li:hover>.cat-parent-text+ul {
display: block;
position: static;
border: 0;
width: 100%;
}

I tried that and it did exactly what I think the site needed.  I've got another question.  In one of your past statements it sounded like you were under the impression that my menu was a little cramped.  How do you feel about a stylesheet statement that gives them just a tid bit of vertical spacing in between each line?  I'm both for and against it.  On one hand the menu is already quite tall due to my large product line but on the other I agree that everything looks a little jumbled.

I wasn't talking about the categories menu in particular there, but it might not hurt to increase the spacing a bit. Try this:

#chcategories a {line-height: 1.4em}

As it is, when you move the mouse to a subcategory, its top cat loses the hover color. Adding a selector

#chcategories li.cat-top:hover>a,

to

#chcategories li.cat-top a:hover{color:#000;background:#ADDBFF url(/catalog/includes/templates/mower/images/catbghover.gif)}

to get

#chcategories li.cat-top:hover>a, #chcategories li.cat-top a:hover{color:#000;background:#ADDBFF url(/catalog/includes/templates/mower/images/catbghover.gif)}

will fix that.
Unless there is something I don't see, the background image is not doing anything and can be eliminated (red text).

gjh42:

I wasn't talking about the categories menu in particular there, but it might not hurt to increase the spacing a bit. Try this:

#chcategories a {line-height: 1.4em}

As it is, when you move the mouse to a subcategory, its top cat loses the hover color. Adding a selector

#chcategories li.cat-top:hover>a,

to

#chcategories li.cat-top a:hover{color:#000;background:#ADDBFF url(/catalog/includes/templates/mower/images/catbghover.gif)}

to get

#chcategories li.cat-top:hover>a, #chcategories li.cat-top a:hover{color:#000;background:#ADDBFF url(/catalog/includes/templates/mower/images/catbghover.gif)}

will fix that.
Unless there is something I don't see, the background image is not doing anything and can be eliminated (red text).

Yeah, I'll try that. The background image has been switched to nothing but a clear gif file. It was the best way I knew to fix it to not showing up.

Excellent input Glenn. I tried each of those mods and I agree completely that those changes were a "win win" scenario. Thanks and have a great weekend!

Ian