Categories Dressing

Go to the category in question and look at the address bar at the top. It will have something like &cPath=5_67. 5_67 would be the cPath you use for defines.

To get rid of demo items, find their defines and comment them out like

//define('WHAT_EVER'...

I know the readme is long, but it has to cover a lot of possibilities. It has big headings for each section, so find a section that covers the task you have and focus on that.

Thanks. I don't mind the readme being long, I just don't understand it.

But now I know how to find out the cPath for my categories.

So, the category for paperbacks is 1

If I want to remove the major heading / minor heading banners and start my list with of categories paperbacks, what do I do?

(Apologies for asking such basic questions, but with a couple of nudges in the right direction, I'm sure I'll figure it out)

gjh42,

First, thanks for writing back regarding my previous post! Not being a CSS guru, I can see I'm closer on the menu then I was when I posted that. However, I'm curious how I might be able to get the immediate subcats hidden and then flyout. My menu system (as of now) is simply too long. (I need to clean up the css colors, but right now I'm focused on functionality)

I'm not sure if that makes total sense, so I've attached a snapshot to show what I have and what I'm hoping to achieve. I know seeing it live helps, so the test site link is below, too.

The best menu position to see this is under the header:
MX Products > MX Drive > Rear Chain Guide Kits

order dot smimotorsports dot com

Any idea how to place the list of categories in the left sidebox into a specific order?

At the moment, they're in alphabetical.

I want to change that so they run: -

Paperbacks
ebooks
Audiobooks
Authors> author 1 etc

https://www.ellybooks.co.uk/shop

So you want a full flyout menu, where the only categories showing by default are the top level. The rules at the top of post 1750 do exactly that when I paste them into the bottom of your stylesheet_chcategories_dressing.css in Firefox Web Developer. The rules you currently have at the bottom of that stylesheet are meant for a different purpose than yours.

Elly - You set the sort order of categories in their editing page (Catalog > Categories/Products > edit category > Sort Order: at bottom left).

gjh42:

Elly - You set the sort order of categories in their editing page (Catalog > Categories/Products > edit category > Sort Order: at bottom left).
Thank you - that was so easy in retrospect, but you have no idea how much time I spent trying to figure that out.

I've been at it all day. Guess my brain needs a rest :blink:

gjh42,

YOU ARE A SUPERHERO! I totally missed the greater picture about what CSS should go in or out; mixing up stuff from other posts. When I removed my bad css additions and added only what you suggested, it worked, giving me a total flyout menu with only top level categories showing!:clap:

Me again - still struggling, but getting there...

I'm sure this is really simple, but I cannot find where the code is. Can someone point me to the right file and the rough line number to change the background colour of the subcategory menu? (currently a sort of biscuit colour)

And also the roll over colour on the sub-cat menu? (currently a pale pink)

And the colour for the little margin on the left which runs before the sub categories?

Plus the rollover colour for the main category menu (currently light blue)

And, finally, how can I shift the sub categories to the left a bit?

Currently, under the "Authors" main category tab, there are a list of names, but because they are too far over to the right, they end up split across two lines. I just want to shift them over to the left a bit, close to the bullet point (a little red arrow). I also want to delete the pipe and the underscore |_

I would be so grateful for your help.

You can see what I mean here: ellybooks.co.uk/shop

All of the color etc. changes will be in stylesheet_chcategories_dressing.css.
For testing these changes, you need to install Firefox and its Web Developer and/or Firebug extensions. They will show you the exact class/id of any page element, and Firebug will show all of the existing style rules that affect that element. Both of them will let you try changes and see the effect instantly.

From the readme ("To display images in place of selected category names:" section):

You may want to change some settings in Admin > Configuration > Layout Settings to allow for images (the code does this for images, if you do not):

Categories Separator between the Category Name and Count     (set to nothing)
Categories Separator between the Category Name and Sub Categories |_  (you may want to set this to nothing, change it or leave as is)
Categories SubCategories Indent    (you may want to set this to nothing, or leave as is)

Thanks again. I've now managed to fix the _| issue, but I'm still stuck on the colours.

I already had Firefox and the Web Developer tool, but I can't get it to tell me where this code is coming from. I'm clearly not using it in the right way. I'm happy with the rollover - I just want to change the colour!

I'm going to post this question in one of the other forums. I think I need a little bit of hand-holding on this one.

Thanks again for your help - and for a useful addon

Firebug is the one that will tell you which stylesheet rules control an element.

From the "For a "rollover" effect to change the appearance on hovering:" section of the readme:```
/* 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: #aa9966;
background: #ffb9ff url(../images/catbghover.gif);
}

The numbers in red are the hover background colors.

Thank you

I'd looked in that code over and over, but I'd dismissed it because the colour number is orange and not the actual blue which was showing on screen. But, sure enough, change the number and it changes the colour.

Whod've thunk

Hi gjh42, I've still been messing around trying to get different categories into two different boxes on opposite sides but I just can't seem to work it out. Have you had a spare moment to have a quick look yet? Thank you :)

This is what I want:
-I want visitors to see the whole category tree with subcategories already open because the top 2 categories are new and used.

Would I need this module for that or can I accomplish that with admin settings?

You would need an expanded categories mod. There are several in Free Addons, but most of them have coding flaws or show the products as well as the categories in the sidebox. A totally reliable one is Uncollapsed Categories Tree by fragfutter, available from his website or packaged as an option in Categories Dressing.

Just downloaded Categories Dressing and in reading the Readme file, it suggests installing on a test setup with demo products activated. I have a test install but I'm confused about how to activate the demo products. And can I just upload all the mod's files to the Classic template in the appropriate folder to test? If I'm confused by this demo, would I be better off just diving in and uploading the files to my actual website? I pretty much have the website done except I'm not happy with the look of the categories navigation so I want to try this mod.

Hi,

I've installed the categories dressing and it looks nice but there is an image file on there instead of one of my categories, I've looked everywhere but I don't know where to remove it. I would like to know where to find it becuase I think it would be useful down the road. If anyone knows, please helP!!!

Thank you.

The link to my site is https://www.thedenimbarusa.com/public_html

mek113 - You need to install the demo products at the same time as installing Zen Cart - as far as I know they are not available otherwise. Yes, you can put the Cat Dressing files in /classic/, or in a custom test template folder so Classic can stay pure for comparison.

If you install it to your main site, you will probably want to delete some demo images and comment out demo settings from the mod files/folders.

hosunee - The demo images are in the /includes/templates/your_template/buttons/english/ folder. You can delete any of them that you don't want (you have apparently already done so). The readme describes how to change any of the demo settings in the relevant section.