Categories Dressing

[gjh42]

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/showth...ies#post886565

[gjh42]

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

[finlander]

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

[finlander]

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

[finlander]

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.

[gjh42]

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.

[fw541c]

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.

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

[gjh42]

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.

[fw541c]

ya my custom folder name is CUSTOM

[fw541c]

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