Categories Dressing

[gjh42]

You don't have the change active now. Did you ever add what I suggested? To be clearer, find this

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

and change to this

/*change  bullet when a category w/o bg image is open to products:*/
#chcategories li a.cat-selected-text, #chcategories ul ul li a.cat-parent-text {
    list-style: square inside url(../images/bullet3.gif);/*change to list-style: none; to remove bullet*/
    font-weight:bold;
    position: static;
    }

[limelites]

Hi Glen,

I've did as you say and changed the code from A to B but after uploading, there seems to be no effect at all....

Here is what my active stylesheet_categories_dressing.css file reads now:

/*change  bullet when a category w/o bg image is open to subs:*/
#chcategories li a.cat-parent-text {
    list-style: square inside url(../images/bullet2.gif);/*change to list-style: none; to remove bullet*/
    position: relative; left: -17px;
    font-size: 13px;
    }
    
/*change  bullet when a category w/o bg image is open to products:*/ #chcategories li a.cat-selected-text, #chcategories ul ul li a.cat-parent-text {
    list-style: square inside url(../images/bullet3.gif);/*change to list-style: none; to remove bullet*/
    font-weight:bold;
    position: static;
    }


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

[limelites]

Aha!! I figured this out myself Glen....

I just removed this line:

/*change  bullet when a category w/o bg image is open to subs:*/
#chcategories li a.cat-parent-text {
    list-style: square inside url(../images/bullet2.gif);/*change to list-style: none; to remove bullet*/
    position: relative; left: -17px;
    font-size: 13px;
    } 

Perfect now, thank you once again!

[abs007]

Hi gjh42
Thanks for your quick reply. The link to my site is ravsappliances.com

Ive done what you said regarding the border lines and have managed to remove them-thank you. im having difficulty in removing the standard category text I have placed bullet buttons as the background link and would like to amend it so that I have the text to each category embedded into the background so i will design a bullet button for each category with the text in it but will need to remove the standard text. i read the user guide but still can not manage to figure it out.

I would also like to change the look of the headings in the left and right columns so the category-specials and best sellers. the currency and information boxes will be getting removed. I want to change the headings to a bullet style background with the text embedded in the image again.

I would also like to change the green horizontal borders above and below the header so that it is also bullet/oval shaped. I may need to remove the whole body boarder line. The new products and monthly specials along with the horizontal footer will also need to be bullet shaped.


I hope you can advise how to get this done.

any help will be appreciated

kind regards

[gjh42]

Reread my previous post carefully.
You will want to make the category and header images with the bullets and text as you want them, then name the images according to the instructions and save them in /includes/templates/your_template/buttons/english/.
When you do that, the Categories Dressing code will automatically replace the text with the images. Same with the Image Titles code for the sidebox headings.

[abs007]

Hi
Thanks for your reply. Im apologising in advance as i know this may sound like a very silly question...I just cant get my head around what cPath is and what numbers to use. From what i have read is that cPath is a variable on the index.php file. But don't know what ones to use.

Ive read the user manual guide again under the sections: To display images in place of selected category names:
Its tells me to make 3 images(catimg#.gif or catbg#.gif and catbg#hover.gif) and save them to /includes/templates/your_template/buttons/english/.

I understand what the images are for but dont understand where i change the css settings to show the image other then in the stylesheet_categories_dressing.css.which i have done already for the background image. Also is the catimg#.gif required if i make the background image with the text embedded in it. I am a little confused with the instructions so i hope you can help.

It says that if the images are named correctly then everything will be done itself automatically so for example would i name the camcorders & camera image as camcorder&camera#.gif? # will be the cPatch which im still a little unsure how to use.

hope this makes sense

cheers

[gjh42]

The correct name would be catimg#.gif if you want just one image for the category, or catbg#.gif and catbg#hover.gif if you want a rollover effect.

If you have a catimg#.gif, it will take precedence and there will be no rollover even if you have the images for it, so make your choice. The catimg#.gif does not require any stylesheet additions, while the catbg#.gif does, because the stylesheet cannot be automated in the code.

The code would not understand camcorder&camera#.gif, so do not use names like that.

$cPath is a list of the "category path" - all of the categories and subcategories that you would follow to get to the one that is currently open, with underscores _ to separate them. Go to the category in question and look in the address bar at the top to find the cPath.

[abs007]

Hi
Thank you very much again. I would like to apologise for all the questions. I bet you have been over this a million times and dont appreciate repetitive questions. I would like to say that i have tried my best to look for similar questions to what i have before posting.

I have understood how to add the catimg#.gif images and they are working great. You can have a look if you like on my website. I would like to have a hover affect however you mentioned that this cant be done if using catimg#.gif as this will need to be added to the code in the category dressing css file. The problem that i have is that i tired it the other way with catbg#.gif however this would bring up the standard writing which i can not centre in the middle of the image. I would like to use the rollover affect without any standard text generated so its in the same way that i have it now with the text embedded into the image. Is there any way to get this done?

website url ravsappliances.com

cheers

[gjh42]

Categories Dressing replaces the standard text with a blank link and background image, if the catbg#.gif image exists in the right place. You don't need to worry about doing that yourself.

If you are seeing the standard text as well as the bg image, something has happened to the code.

[abs007]

Hi Glenn thanks for your reply. I may be doing something wrong like putting in the bg image code in the wrong place. It works perfectly when i use the catimg#.gif function but when i use the catBg#.gif the buttons is created for all categories and not just for the cpath one. heres the code from the cat dressing css the catBg#.gif image is currently not in use and is cancelled out with a /*

/**
* CSS Stylesheet for Categories Dressing examples
* @copyright Copyright 2009 Glenn Herbert
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.gnu.org/licenses/ GNU Public License V3.0
* Categories Dressing v2.6 Glenn Herbert (gjh42) - 20090128
*/
/*
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(../images/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(../images/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(../images/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 categories*/
list-style: none;
background: none;
/*border: 1px solid #ffaa99;*/
margin: 0 0 0.4em 0;
padding: 0;
}

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



}

hover {
background-image: url(../images/catBg25hover.gif);
}


#categories ul ul {/*subcategories*/
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: none; 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: none; 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:none; 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(../images/catbg25.gif);
height: 30px;
}

#categories li a.catBg25:hover {
background-image: url(../images/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;
}

ul#catGroup48 {
border: 1px solid #bd6699;
background: #bbeeff;
position: relative;
left: -1.3em;
top: 0.2em;
}

.catCount {color: #000000;}

i have placed the image code in bold

cheers