Printable View
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
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
</div>
<!-- eof breadcrumb -->
<!-- bof upload alerts -->
<!-- eof upload alerts -->
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?ma...roducts_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.
Yes, Categories Dressing allows setting the highest and lowest levels of categories to display.
Any further discussion of altering the flyout mod would better be done in its thread or a new one. I may look at it if I have time.
It may be that the flyout styling could be applied to Categories Dressing.