Categories Dressing

[gjh42]

The "beaded" background image you want is not directly related to Categories Dressing, but can be done with the stock installation.
Add to your stylesheet

#categoriesContent {background: url(../images/yourbeadedbg.gif);}

Save your image to /includes/templates/your_template/images/.

[hcd888]

Thats great, that worked

Thanks for your help

[kaddie]

I have categories dressing installed. I am having such a terrible time in getting this menu to work as I need it to. I want my menu something like the link below.

abikergear dot com

How in the world do I accomplish this. My test site below:

progroom dot com/shop39/

I have been working on getting this menu to do as I need for 1 week now. For some reason I am not getting a grip on it. Not catching on! I am tired, weak and about to pass out trying to figure this menu out.

Kaddie

[gjh42]

The site you reference is using Categories Dressing, so your goal is feasible.
The first thing to do if you want the flyout subcategories feature is to install the chcategories option as the readme instructs.
Then apply the CSS rules from post 1608 in this thread.

You have made non-linked headings for each top category; is that what you want? Or do you want the top cats to look like those headings?

[kaddie]

I want the menu that is shown in the first link I posted above. I do not like the menu I have at the moment. I do have the chcategories installed. What am I doing wrong?

[gjh42]

So you do want the flyout feature. Did you add the CSS from post 1608?
What is your define for active/level control?

define('CAT_BOX_ACTIVE_LEVEL', 'x|x|x');

[kaddie]

I have 3 level categories. I though I would try the flyout for the last level. Not all categories have a sub-category and some categories have only a sub-category and not a 3rd one. This is what I want:

Category Head (want to show as tab, not linked)
Sub-category (want to show linked to 3rd category as a flyout)
Sub-sub-category (is the flyout)

//example defines - copy & modify for each category desired
//define ('CAT_BOX_HEADING_#','group|divider/class|[imgname]|[imgalt][|headcontent|headclass][|headcontent|headclass]...');
define ('CAT_BOX_HEADING_1','1|0||');//new list - no headings
define ('CAT_BOX_HEADING_3','1|0|||Major Heading|1|Minor Heading|2');//new list - text headings - multiple levels - styles 1 & 2
define ('CAT_BOX_HEADING_23','0|1|||Another Heading|2');//no list break - divider and text heading - style 2
define ('CAT_BOX_HEADING_33_34','0|0|||Subcat Heading|3');//simple text heading - style 3
//define ('CAT_BOX_HEADING_48','1|0|cathead48.gif|Cat 48 Heading|Buy Now...|3');//image heading and alt text - can be followed by text heading(s)
//define ('CAT_BOX_HEADING_52','0|1||');//divider only - style 1
//define ('CAT_BOX_HEADING_53','0|2||');//divider only - style 2
//define ('CAT_BOX_HEADING_FEATURED','0|0|||Featured Heading|3');//no list break - text heading
//define ('CAT_BOX_SUBTEXT_23','Subtext for cat 23 escape apostrophe\'s|1');//subtext - style 1

define ('CAT_BOX_HEADING_488','1|0|||Clearance Outlet|2');
define ('CAT_BOX_HEADING_475','1|0|||Package Deals|2');
define ('CAT_BOX_HEADING_61','1|0|||Apparel and Footwear|1');
define ('CAT_BOX_HEADING_60','3|0|0||Pet Grooming Equipment|1');
define ('CAT_BOX_HEADING_170','3|0|0||Pet Grooming Tools|2');
define ('CAT_BOX_HEADING_68','0|1|||Pet Hair & Body Care|2');
define ('CAT_BOX_HEADING_397','1|0|||Vet Equipment/Supply|2');
define ('CAT_BOX_HEADING_311','1|0|||Beauty Salon Supply|2');
define ('CAT_BOX_HEADING_126','1|0|||Pet Accessories|2');
define ('CAT_BOX_HEADING_195','1|0|||Office Accessories|2');
define ('CAT_BOX_HEADING_273','1|0|||Gifts For You & Yours|2');
define ('CAT_BOX_HEADING_356','1|0|||Home Accessories|2');

//
//display only the active top category and its subs, hide top cats, hide sub-subcats, or any combination.
//only uncomment and set this define if you want to hide cats based on active tree or level
// 'active|highest_level|deepest_level'
//active: 0=all tops/1=full active tree only/2=active only (all tops when no cat selected)/
//3=full active tree, others per level/4=like 3, active branches only/5=like 1, no tops|
//highest_level: 0=all levels/1=no topcats/etc.|
//deepest_level: 1=only first subcats/2=first & second subcats/etc.
//
//define('CAT_BOX_ACTIVE_LEVEL', '0|1|9');//hide top cats
//define('CAT_BOX_ACTIVE_LEVEL', '1|0|1');//show only active cats, to first subcat level

Wow, sure hope I made since. I also have better categories installed.

Thanks so much for your help!

[kaddie]

I have 3 level categories. I though I would try the flyout for the last level. Not all categories have a sub-category and some categories have only a sub-category and not a 3rd one. This is what I want:

Category Head (want to show as tab, not linked)
Sub-category (want to show linked to 3rd category as a flyout)
Sub-sub-category (is the flyout)

//example defines - copy & modify for each category desired
//define ('CAT_BOX_HEADING_#','group|divider/class|[imgname]|[imgalt][|headcontent|headclass][|headcontent|headclass]...');
define ('CAT_BOX_HEADING_1','1|0||');//new list - no headings
define ('CAT_BOX_HEADING_3','1|0|||Major Heading|1|Minor Heading|2');//new list - text headings - multiple levels - styles 1 & 2
define ('CAT_BOX_HEADING_23','0|1|||Another Heading|2');//no list break - divider and text heading - style 2
define ('CAT_BOX_HEADING_33_34','0|0|||Subcat Heading|3');//simple text heading - style 3
//define ('CAT_BOX_HEADING_48','1|0|cathead48.gif|Cat 48 Heading|Buy Now...|3');//image heading and alt text - can be followed by text heading(s)
//define ('CAT_BOX_HEADING_52','0|1||');//divider only - style 1
//define ('CAT_BOX_HEADING_53','0|2||');//divider only - style 2
//define ('CAT_BOX_HEADING_FEATURED','0|0|||Featured Heading|3');//no list break - text heading
//define ('CAT_BOX_SUBTEXT_23','Subtext for cat 23 escape apostrophe\'s|1');//subtext - style 1

define ('CAT_BOX_HEADING_488','1|0|||Clearance Outlet|2');
define ('CAT_BOX_HEADING_475','1|0|||Package Deals|2');
define ('CAT_BOX_HEADING_61','1|0|||Apparel and Footwear|1');
define ('CAT_BOX_HEADING_60','3|0|0||Pet Grooming Equipment|1');
define ('CAT_BOX_HEADING_170','3|0|0||Pet Grooming Tools|2');
define ('CAT_BOX_HEADING_68','0|1|||Pet Hair & Body Care|2');
define ('CAT_BOX_HEADING_397','1|0|||Vet Equipment/Supply|2');
define ('CAT_BOX_HEADING_311','1|0|||Beauty Salon Supply|2');
define ('CAT_BOX_HEADING_126','1|0|||Pet Accessories|2');
define ('CAT_BOX_HEADING_195','1|0|||Office Accessories|2');
define ('CAT_BOX_HEADING_273','1|0|||Gifts For You & Yours|2');
define ('CAT_BOX_HEADING_356','1|0|||Home Accessories|2');

//
//display only the active top category and its subs, hide top cats, hide sub-subcats, or any combination.
//only uncomment and set this define if you want to hide cats based on active tree or level
// 'active|highest_level|deepest_level'
//active: 0=all tops/1=full active tree only/2=active only (all tops when no cat selected)/
//3=full active tree, others per level/4=like 3, active branches only/5=like 1, no tops|
//highest_level: 0=all levels/1=no topcats/etc.|
//deepest_level: 1=only first subcats/2=first & second subcats/etc.
//
//define('CAT_BOX_ACTIVE_LEVEL', '0|1|9');//hide top cats
//define('CAT_BOX_ACTIVE_LEVEL', '1|0|1');//show only active cats, to first subcat level

Wow, sure hope I made since. I also have better categories installed.

Thanks so much for your help!

Here is another link to view what I am trying to achieve. zestyshoes dot com.

[gjh42]

I also have better categories installed.

You can't use Categories Dressing and Better Categories at the same time on the categories sidebox, as they both modify the same file (tpl_categories.php). Fortunately, you don't have the BC version of tpl_categories.php, so Cat Dressing can work.

You first need to install the chcategories files so the flyout has full content to work on.
Then, add to your stylesheet_chcategories_dressing.css below the existing #chcategories ul ul a {/*subcategories*/ rule

#chcategories ul ul a {/*subcategories*/
    display: list-item;
    list-style: circle inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
    background: #ffffff;
    border: none;
    margin: 0;
    padding: 0;
    }

/*add these rules*/
#chcategories ul ul ul {/*subcategory lists*/
    display: none;
    }

#chcategories ul ul li:hover {position: relative;}

#chcategories ul ul li:hover>ul {/*subcategory lists*/
    display: block;
    width: 95%;
    position: absolute;
    left: 95%;
    top: 0;
    border: 1px solid #6699dd;
    }

Adjust to taste.
I have tested these rules in the #categories... version on your site, so I know they will work.
You will have to transfer your stylesheet_categories_dressing.css customizations to stylesheet_chcategories_dressing.css.

I see that one top category has no subs; you will need to move its products, create a subcat and move the products to that.

[gjh42]

Oops, missed a rule...
Find this

#chcategories ul a {/*top categories*/
    display: list-item;
    list-style: disc inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
    background: no-repeat;
    border: none;
    margin: 0;
    padding: 0;
    }

/*add this rule*/
#chcategories ul li.cat-top>a {display: none;}