Categories Dressing

Hi Glen,

I added those changes to my .css file but they seem to have no effect on the behaviour of selected sub-cats lingerie or jewellery.

How would I specify that subcats don't get the position: relative; property? Moreover, how do I create a separate rule for sub-cats?

Sorry, I'm still very green at this :-)

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

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

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!

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

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.

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

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.

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

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.

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

Sorry for the long post above.

I am trying to change the box headings to a .gif aswell. I have been using firefox web developer with the display element information. I just cant seem to find where i will get this done. Ive looked in the cat dressings css and in the template css but just cat seem to find it.
cheers

OK, you have a bunch of problems on top of each other.
First, you have applied the bg image in the wrong place, in the general top categories rule instead of a separate rule for that category.```
#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);
}

url(../images/catBg68.gif)
should be
url(../images/catbg68.gif)
(and the actual image file should also be lowercase).

Before leaving this rule, you also need to fix

list-style:none; disc inside url(../images/bullet1.gif);/*change to...

should be

list-style:none;/*change to...
or
list-style:none; /*disc inside url(../images/bullet1.gif);change to...

You also have a loose } which could cause problems, and the hover rule sitting there by itself. 
Delete both of those.

The background-image: url(../images/catbg68.gif); should go in a new rule next to the example rule:```
/*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);
}

#categories li a.catBg68 {
background-image: url(../images/catbg68.gif);
height: 24px;
}

#categories li a.catBg68:hover {
background-image: url(../images/catbg68hover.gif);
}

Just copy the two example rules and change the numbers.

For the box headings, you are in the wrong thread (and wrong mod). Categories Dressing has nothing to do with them. Use the Image Titles mod.

If you want the same kind of font you have used in the category names, you really have no reason to add the text as an image - that is a standard font and can be handled more efficiently as positioned text with a round-end box background for all top categories in general (and for all box headings).

Hi thanks for the reply. I will look into that now. You can disregard the side and centre box headings as i have managed to change them through the actual template stylesheet. I am however having difficulty removing the boarder for the centre boxes.
will keep you posted with my progress. if you know where i can remove the boarder from then please advise.
cheers

Ok
Have done as you said and removed the lines you asked me to and cancelled the part that needed to be canceled.

I have managed to get 1 button working just fine with the hover affect aswell. I have removed all the catimage#.gif buttons and am now uploading the buttons to the images section instead of the buttons section.

The problem that i am having is that i can only get 1 of the categories to work. When i try it with more then 1 then only 1 works and the others dont. Here is copy of the code. catbg68.gif is working fine with the hover affect aswell but the other one just dont work.

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

#categories li a.catBg68 {
background-image: url(../images/catbg68.gif);
height: 28px;
}

#categories li a.catBg68:hover {
background-image: url(../images/catbg68hover.gif);
}

#categories li a.catBg66 {
background-image: url(../images/catbg66.gif);
height: 28px;
}

I havnt tried to do the hover image for the cpath 66 as i cant get the main one to work
cheers

For some reason i cant edit my posts. Ive managed to get everything sorted. The code was not pulling up the images for catbg#.gif from the ../MY_TEMPLATE/images/ folder so i saved the images to MY_TEMPLATE/buttons/english and they worked fine. However when i went to add the hover image the code wouldn't pull up the images again. So i tried to save them in MY_TEMPLATE/images. when i saved them in there it worked fine.

Dont know if it was supposed to be like that but its worked and ive managed to get rid of the boarder around the centre box through the template stylesheet

Is there anyway to have a different image for a visited link?

cheers
:D

Oops, it looks like you have uncovered a bug in the stylesheet code. I apparently forgot to change the paths in the stylesheet when I reorganized the PHP code to allow multiple languages (thus the /buttons/english/), and since there were still copies of the image files in /images/ as well as in /buttons/english/ in my test site, it worked even though it shouldn't have. I have corrected that in the original package, and will submit the revised version to Free Addons as v2.7.1.

If you add a rule like

#categories li a.catBg68:visited {
background-image: url(../buttons/english/catbg68visited.gif);
}

the visited link styling should work for you.

In the meantime, anyone who needs to use background images in Categories Dressing v2.6 can replace their existing stylesheet_categories_dressing.css with this one:```
/**

• 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.1 Glenn Herbert (gjh42) - 20090320
  /
  /
  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: 1px 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;
}

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

.catCount {color: #000000;}

Thanks for your reply. It did take a little messing around to find out what was wrong.

I have managed to add the visited button but it dont look too good as once its been visited it stays the visited color. I was wondering if there is a way to add a button for categories that you are currently on. so for example if they went to lcd tv- because they are on that category i would like the color to be darker from the other buttons so that it clearly shows that they are on lcd tv when in comparison to the other buttons.

hope it makes sense

cheers