Categories Dressing

nevermind, I'm an idiot. It's just a current selection indicator.

Note: The readme_ch_categories.txt was inadvertently left out of the v2.7.3 package. It has no important information beyond the other instructions, but there is a copy posted here (post 1378) if you want to read it:

http://www.zen-cart.com/forum/showthread.php?p=886565&highlight=readme_ch_categories#post886565

Here is the v2.8 beta zip for testing. Please report any problems here. There is one known bug with IE7 category name image replacement positioning - please check this out.
(Note - I had to remove the GPL license file from the zip to get it down to the forum-allowed attachment size.)

http://www.vintage-adventures.com/

simple question, can't locate the code..

How do I disconnect the example category 25? I commented out styling for it in css, so no image is displayed, but there is still a class connection defined somehow, so the display is a big blank area containing the one-pixel gif. I need the source code for cat 25 to flow like this

<a class="cat-not-selected"

not like this

<a class="cat-not-selected catBg25"

so that cat 25 will be a regular old category again.

thank you if anyone knows the answer..

looks as though this code from the functions.php is/was responsible for setting up the category 25, but what to do now to stop the appending action?
Is the database permanently changed now to always append catBg25 to the class, or can cat 25 be a normal cat again..

$cat_img_bg = ' catBg' . $current_path;

} else {
$cat_img_bg = '-text';//append to main classname
}
return array($cat_img_bg, $cat_name_display);

wow, I am really dense, as long as the .gif file has a valid name for getting called, then the code is going to try to do so, and since I commented out the style, the code was then displaying the one-pixel gif as a placeholder.

It will help to read the readme file line by line, especially for any element/feature you want to eliminate or customize. I made it HTML for clarity of presentation. There will always be a bolded note on how to disable a feature if it is active by default.

I am trying to get my catagories to use images for the button but i am having no success. im using the categories_dressing mod. followed the directions to add the images to the button, and changed all the admin side settings it said.

https://www.notoriousarc.com

Here is where i changed the css.

/**

• CSS Stylesheet for Categories Dressing examples
• @copyright Copyright 2009 Glenn Herbert
• @copyright Portions Copyright 2003-2006 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.gnu.org/licenses/ GNU Public License V3.0
• /includes/templates/your_template/css/stylesheet_categories_dressing.css
• Categories Dressing v2.7.3 Glenn Herbert (gjh42) - 20090505
  /
  /
  hr.catBoxDivider1 {
  color: #aabbcc;
  }
  */

/IE6 hacks/

• html #categories li, * html #categories li a {
  height: 1em;/fix IE6 whitespace bug/
  background-image: url(../images/pixel_trans.gif);/partially fix IE6 a block display bug/
  }

.catBoxHeading1 {
font-family: georgia, serif;
font-weight: bold;
font-size: 1.4em;
color: #335511;
background-color: #ff66ff;
background-image: url(http://www.notoriousarc.com/includes.../catbg25.gif%29; /uncomment to use background image with or without coded text/
height: 23px; /uncomment to use background image without coded text/
padding: 0.3em 0.4em;
margin: 0;
}

.catBoxHeading2 {
font-family: 'times new roman', serif;
font-weight: bold;
font-size: 1.4em;
color: #335544;
background-color: #ffaaff;
background-image: url(../buttons/english/catbg25.gif); /uncomment to use background image with or without coded text/
height: 23px; /uncomment to use background image without coded text/
padding: 0.3em 0.4em;
margin: 0 0 2px 0;
}

.catBoxHeading3 {
font-family: 'comic sans ms', sans-serif;
font-weight: bold;
font-size: 1.2em;
color: #336699;
background-color: #ffbbdd;
background-image: url(../buttons/english/catbg25.gif); /uncomment to use background image with or without coded text/
height: 23px; /uncomment to use background image without coded text/
padding: 0.3em 0.4em;
margin: 0 0 2px 0;
}

So i uncommented where the background images are and still nothing. i even tried pointing the image file to the full HTTP address.

fw541c - In response to your question, you say you are trying to replace category links with images, but what you show is assigning background images to the various heading types.

.catBoxHeading1 {

background-image: url(http://www.notoriousarc.com/includes.../catbg25.gif); /*uncomment to use background image with or without coded text*/
height: 23px; /*uncomment to use background image without coded text*/

}

which is by default

.catBoxHeading1 { 

    /*background-image: url(../buttons/english/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/

    }

Your top category ids are 9, 7, 13 and 8, so you would do something like this:```
/example for individual category as bg image/
#categories li a.catBg25 {
background-image: url(../buttons/english/catbg25.gif);
height: 30px;/image is 60px high (main above hover)/
}

/customized for you/
#categories li a.catBg9 {
background-image: url(../buttons/english/catbg9.gif);
height: 30px;/image is 60px high (main above hover)/
}

You would save the image as /includes/templates/your_template/buttons/english/catbg9.gif.

Is your template foldername really /CUSTOM/?
-Nevermind, I see that it is.

ya my custom folder name is CUSTOM

Got the top button to change but when i add the others to the CSS file they dont show up. BTW thank you for the help i appreciate it.

Here the code.

/**
 * CSS Stylesheet for Categories Dressing examples
 * @copyright Copyright 2009 Glenn Herbert
 * @copyright Portions Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.gnu.org/licenses/ GNU Public License V3.0
 * /includes/templates/your_template/css/stylesheet_categories_dressing.css
 * Categories Dressing v2.7.3   Glenn Herbert (gjh42)   - 20090505
 */
/*
hr.catBoxDivider1 { 
    color: #aabbcc;
    }
*/

/*IE6 hacks*/
* html #categories li, * html #categories li a {
    height: 1em;/*fix IE6 whitespace bug*/
    background-image: url(../images/pixel_trans.gif);/*partially fix IE6 a block display bug*/
    }

.catBoxHeading1 { 
    font-family: georgia, serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335511; 
    background-color: #ff66ff;
    /*background-image: url(../buttons/english/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0;
    }

.catBoxHeading2 { 
    font-family: 'times new roman', serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335544; 
    background-color: #ffaaff;
    /*background-image: url(../buttons/english/catheadbg2.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }

.catBoxHeading3 { 
    font-family: 'comic sans ms', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    color: #336699; 
    background-color: #ffbbdd;
    /*background-image: url(../buttons/english/catheadbg3.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }

.catBoxHeadingImg { 
    padding: 0;
    margin: 0;
    }

.catBoxSubtext1 {
    font-family:  'times new roman', serif;
    font-weight: normal;
    font-size: 1.2em;
    color: #669911; 
    background-color: #ffddff;
    padding: 0.1em 0.2em 0.1em 1.0em;
    }

#categories ul {/*top category lists*/
    list-style: none;
    background: none;
    border: 0px solid #ffaa99;
    margin: 0 0 0.4em 0;
    padding: 0;
    }

#categories 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;
    }

#categories ul ul {/*subcategory lists*/
    list-style: none;
    background: #ffeecc;
    border: none;
    margin: 0 0 0.4em 0;
    padding: 0 0 0 1.3em;
    }

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

/*change  bullet when a category w/o bg image is open to subs:*/
#categories li a.cat-parent-text {
    list-style: square inside url(../images/bullet2.gif);/*change to list-style: none; to remove bullet*/
    }

/*change  bullet when a category w/o bg image is open to products:*/
#categories li a.cat-selected-text {
    list-style: square inside url(../images/bullet3.gif);/*change to list-style: none; to remove bullet*/
    }

/*disable bullet for cats w/ image or bg image*/
#categories li a.cat-parent, #categories li a.cat-selected, #categories li a.cat-not-selected {
    list-style: none;
    display: block;/*fix IE6 margin-left bug*/
    }

/*different bullet for links if desired*/
/*
#categories li a.category-links {
    list-style: disc inside url(../images/bullet4.gif);
    }
*/

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

/*individual page rules go after the general rules*/
/*example for individual category as bg image*/
#categories li a.catBg25 {
    background-image: url(../buttons/english/catbg25.gif);
    height: 30px;
    }

/*#categories li a.catBg25:hover {
    background-image: url(../buttons/english/catbg25hover.gif);
    }

/*example for custom individual category styling*/
#categories li.cat-holiday a {
    border-top: 3px dotted #112233; 
    background-color: #aabbff; 
    color: #112233; 
    padding: 1em 0em;
    }

/*example for custom category group styling*/
ul#catGroup48 {
    border: 1px solid #bd6699;
    background: #bbeeff; 
    position: relative;
    left: -1.3em;
    top: 0.2em;
    }

.catCount {color: #000000;}

#categories li a.catBg9 {
    background-image: url(../buttons/english/contactscrews.jpg);
    height: 30px;/*image is 60px high (main above hover)*/
    }

#categories li a.catBg7 {
    background-image: url(../buttons/english/custom.jpg);
    height: 30px;/*image is 60px high (main above hover)*/
    }
	
#categories li a.catBg13 {
    background-image: url(../buttons/english/parts.jpg);
    height: 30px;/*image is 60px high (main above hover)*/
    }
	
#categories li a.catBg8 {
    background-image: url(../buttons/english/tubevice.jpg);
    height: 30px;/*image is 60px high (main above hover)*/
    }

As the readme says and the "customized for you" shows, you need to name the images according to the pattern.

#categories li a.catBg9 {
background-image: url(../buttons/english/contactscrews.jpg);
will not work; you need to name it
background-image: url(../buttons/english/catbg9.gif);

If you want to use jpeg instead of gif files, you need to make a few edits to a PHP file as described in the readme (for the current v2.7.3).

change the files to gif and now none of them work.

forgot the code

/**
 * CSS Stylesheet for Categories Dressing examples
 * @copyright Copyright 2009 Glenn Herbert
 * @copyright Portions Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.gnu.org/licenses/ GNU Public License V3.0
 * /includes/templates/your_template/css/stylesheet_categories_dressing.css
 * Categories Dressing v2.7.3   Glenn Herbert (gjh42)   - 20090505
 */
/*
hr.catBoxDivider1 { 
    color: #aabbcc;
    }
*/

/*IE6 hacks*/
* html #categories li, * html #categories li a {
    height: 1em;/*fix IE6 whitespace bug*/
    background-image: url(../images/pixel_trans.gif);/*partially fix IE6 a block display bug*/
    }

.catBoxHeading1 { 
    font-family: georgia, serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335511; 
    background-color: #ff66ff;
    /*background-image: url(../buttons/english/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0;
    }

.catBoxHeading2 { 
    font-family: 'times new roman', serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335544; 
    background-color: #ffaaff;
    /*background-image: url(../buttons/english/catheadbg2.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }

.catBoxHeading3 { 
    font-family: 'comic sans ms', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    color: #336699; 
    background-color: #ffbbdd;
    /*background-image: url(../buttons/english/catheadbg3.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }

.catBoxHeadingImg { 
    padding: 0;
    margin: 0;
    }

.catBoxSubtext1 {
    font-family:  'times new roman', serif;
    font-weight: normal;
    font-size: 1.2em;
    color: #669911; 
    background-color: #ffddff;
    padding: 0.1em 0.2em 0.1em 1.0em;
    }

#categories ul {/*top category lists*/
    list-style: none;
    background: none;
    border: 0px solid #ffaa99;
    margin: 0 0 0.4em 0;
    padding: 0;
    }

#categories 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;
    }

#categories ul ul {/*subcategory lists*/
    list-style: none;
    background: #ffeecc;
    border: none;
    margin: 0 0 0.4em 0;
    padding: 0 0 0 1.3em;
    }

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

/*change  bullet when a category w/o bg image is open to subs:*/
#categories li a.cat-parent-text {
    list-style: square inside url(../images/bullet2.gif);/*change to list-style: none; to remove bullet*/
    }

/*change  bullet when a category w/o bg image is open to products:*/
#categories li a.cat-selected-text {
    list-style: square inside url(../images/bullet3.gif);/*change to list-style: none; to remove bullet*/
    }

/*disable bullet for cats w/ image or bg image*/
#categories li a.cat-parent, #categories li a.cat-selected, #categories li a.cat-not-selected {
    list-style: none;
    display: block;/*fix IE6 margin-left bug*/
    }

/*different bullet for links if desired*/
/*
#categories li a.category-links {
    list-style: disc inside url(../images/bullet4.gif);
    }
*/

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

/*individual page rules go after the general rules*/
/*example for individual category as bg image*/
#categories li a.catBg25 {
    background-image: url(../buttons/english/catbg25.gif);
    height: 30px;
    }

/*#categories li a.catBg25:hover {
    background-image: url(../buttons/english/catbg25hover.gif);
    }

/*example for custom individual category styling*/
#categories li.cat-holiday a {
    border-top: 3px dotted #112233; 
    background-color: #aabbff; 
    color: #112233; 
    padding: 1em 0em;
    }

/*example for custom category group styling*/
ul#catGroup48 {
    border: 1px solid #bd6699;
    background: #bbeeff; 
    position: relative;
    left: -1.3em;
    top: 0.2em;
    }

.catCount {color: #000000;}

#categories li a.catBg9 {
    background-image: url(../buttons/english/catBg9.gif);
    height: 30px;/*image is 60px high (main above hover)*/
    }

#categories li a.catBg7 {
    background-image: url(../buttons/english/catBg7.gif);
    height: 30px;/*image is 60px high (main above hover)*/
    }
	
#categories li a.catBg13 {
    background-image: url(../buttons/english/catBg13.gif);
    height: 30px;/*image is 60px high (main above hover)*/
    }
	
#categories li a.catBg8 {
    background-image: url(../buttons/english/catBg8.gif);
    height: 30px;/*image is 60px high (main above hover)*/
    }

got it working thank you

I am using categories dressing. I have added a subcategory and it does not appear.

THis is a link. http://www.stitchboutiqueboston.com

Can someone point me in the right direction.

TIA TOM:cool:

I don't know what subcategory you have added that does not appear, but when you go to the top category Canvases, the page output cuts off just where the category description should be starting:

<div id="navBreadCrumb">  <a href="http://www.stitchboutiqueboston.com/">Home</a> :: 

Canvases

The Yarn cat shows its subcat listing just fine. I suggest you check the Canvases cat description.

Hi gjh42,

Not sure if you can help, but I figured it wouldn't hurt to ask. You've done amazing things with this mod.

Do you know if it's possible to alter this add on, http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=532 , to show deeper categories? I've tried to ask in this add-ons help forum and have not had any luck.

Thank you for your time. :smile:

Not sure what you mean by "deeper categories". V1.4 of that mod says "Added option to switch subcategory display on or off".

I don't know anything about that mod's coding, so am not sure about modifying it.

Deeper categories...I think your mod allows for that right? You can choose what level of subcategories to display? For example:

HEADER
----SUB CATEGORY
-------SUB CATEGORY
-----------SUB CATEGORY

Does that make sense? This mod is only 3 files, no SQL update. It seems like it would be easy to modify this...but I have no idea where to start. It's pulling information from default zen-cart coding.