Categories Dressing

Hi Glen,

Got the dotted lines working... I'm being really picky here but is there a way to increase the distance between dots? Also, is there a way to remove the top one from above the "Wedding Collection" category?

the image names both those that do show that were there before and the new ones are named like ie: catbg67.png, catbg79.png etc
It is only the new ones that are not showing. The images that were exisiting already are still working just fine. Those that were added are not showing at all.

Do they all have the .png extension? Have you set the extension from the stock .gif to .png? Are they all in the right folder (/includes/templates/your_template/buttons/english/)?

Yes they all have .png extension and all are in the correct folders.
They set as per example below. both the current that are working and the non working ones

#categories li a.catBg86:hover {
background-image: url(../buttons/english/catbg86.png);
}

#categories li a.catBg86 {
background-image: url(../buttons/english/catbg86.png);
height: 102px;
}

It appears you're trying to use the "sprites" technique for hover effects. You need to put the :hover rule after the base rule so it is effective when you are hovering. You don't want to use the height for controlling the sprite position, but the background-position property. For example: ```
/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) or 90px high (main above hover above selected)/
}

/example of "sprite" for bg image switch on selected/
#categories li a.cat-parent.catBg25, #categories li a.cat-selected.catBg25 {
background-image: url(../buttons/english/catbg25.gif);
background-position: 0 -60px;/move up 60px/
}

/example of "sprite" for bg image switch on hover/
#categories li a.catBg25:hover {
background-image: url(../buttons/english/catbg25.gif);
background-position: 0 -30px;/move up 30px/
}

What is the cPath for each of these categories (some working and some non-working)?

I installed categories dressing 2.7.3 with Uncollapsed Categories Tree on a local WAMP server for testing and tweaking.
I made some changes in stylesheet_chcategoreies_dressing.css (colors, borders...) and after that the following changes in categories_dressing_defines.php for tree and two dividers:

define ('CAT_BOX_ACTIVE_LEVEL', '4|0|1||');
define ('CAT_BOX_HEADING_202', '0|1||');
define ('CAT_BOX_HEADING_297', '0|1||');

202 - is cPath for the 'Consumabile imprimante laser' (Supplies for Laser Printers)
297 - is cPath for the 'Reincarcare cartuse laser' (Refill laser cartridges)

After the changes in categories_dressing_defines.php occurred two empty spaces with two blue arrows (highlighted in red).
How do I remove these two spaces and two arrows?

Using ver 1.3.8a. and iC_Atheme v1.3.
Testing on I.E. V7, Firefox V11 and Opera 11.

My real website where I have not applied the changes is http://consumabile.org (in Romanian).
I am a novice and this is my first site for my personal business.
Thanks in advance,
Gabriel

It looks as if you have blank categories above each of those dividers, but I can't be sure what is going on without seeing it live. Can you post the view source for that part of the sidebox? That would at least give me a start on what is happening.

limelites - I don't know of a way to change the CSS "dotted" display characteristics.
You can hide the topmost border with

#catGroup1>li:first-child>a {border-top: none;}

This will not work on old versions of IE (~6 or 7), but should work on all modern browsers.

gjh42:

It looks as if you have blank categories above each of those dividers, but I can't be sure what is going on without seeing it live. Can you post the view source for that part of the sidebox? That would at least give me a start on what is happening.

Thanks gjh42, now I go to bed...local time is 1:00AM

Here is an image with these modifications (undo divider):
define('CAT_BOX_ACTIVE_LEVEL', '4|0|1');
//define('CAT_BOX_HEADING_202','0|1||');
//define('CAT_BOX_HEADING_297','0|1||');
//define('CAT_BOX_HEADING_203','0|2||');

And here is the source:

<div class="leftBoxContainer" id="chcategories" style="width: 220px;"> <h3 class="leftBoxHeading" id="chcategoriesHeading">Catalog de produse</h3> <div id="chcategoriesContent" class="sideBoxContent"> <ul id="catGroup201"> <li class="cat-top"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=201">Consumabile imprimante inkjet</a> <ul id="catGroup201_288"> <li class="cat-subs"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=201_288">  Consumabile Canon inkjet</a></li> <li class="cat-subs"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=201_289">  Consumabile HP inkjet</a></li> <li class="cat-subs"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=201_290">  Consumabile Lexmark inkjet</a></li> <li class="cat-products"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=201_239">  Solutie de desfundat cartuse</a></li> </ul></li> <li class="noLi"><hr class="catBoxDivider1"></li> <li class="cat-top"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=202">Consumabile imprimante laser</a> <ul id="catGroup202_291"> <li class="cat-subs"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=202_291">  Consumabile Canon laser</a></li> <li class="cat-subs"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=202_292">  Consumabile HP laser</a></li> <li class="cat-subs"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=202_293">  Consumabile Kyocera laser</a></li> <li class="cat-subs"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=202_294">  Consumabile Lexmark laser</a></li> <li class="cat-subs"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=202_295">  Consumabile Samsung laser</a></li> <li class="cat-subs"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=202_296">  Consumabile Xerox laser</a></li> </ul></li> <li class="noLi"><hr class="catBoxDivider1"></li> <li class="cat-top"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=297">Reincarcare cartuse laser</a> <ul id="catGroup297_298"> <li class="cat-products"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=297_298">  Reincarcare cartuse Canon</a></li> <li class="cat-products"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=297_299">  Reincarcare cartuse HP</a></li> <li class="cat-products"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=297_300">  Reincarcare cartuse Lexmark</a></li> <li class="cat-products"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=297_301">  Reincarcare cartuse Samsung</a></li> <li class="cat-products"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=297_302">  Reincarcare cartuse Xerox</a></li> </ul></li> <li class="noLi"><hr class="catBoxDivider2"></li> <li class="cat-top"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=203">Consumabile copiatoare</a> <ul id="catGroup203_240"> <li class="cat-subs"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=203_240">  Cartuse originale copiatoare</a></li> <li class="cat-subs"><a class="cat-not-selected-text" href="http://localhost/zencart/index.php?main_page=index&cPath=203_241">  Cartuse compatibile copiatoare</a></li> </ul></li> </ul> <hr id="catBoxDivider"> <ul class="catLinks"> <li><a class="category-links" href="http://localhost/zencart/index.php?main_page=products_all">Toate produsele ...</a></li> </ul> </div></div>

Actually we do not really need the hover feature at all. Just a straight button. I know it is fairly graphic intensive but this is how the owner wants it. He is very very picky LOL
A link to a working one is
http://www.koisale.com/KoiStore/index.php?main_page=index&cPath=79

A non working one is
http://www.koisale.com/KoiStore/index.php?main_page=index&cPath=107

BTW thanks so much for your help.

This is really very strange. I cannot see any reason at all why those three categories should not work when the rest do. They are even interspersed in the stylesheet, so there could not be an error that cuts off the end from processing.

Since you are not using hover features, it would be simpler for you to make the images foreground instead of background images. Rename or copy catbg67.png to catimg67.png and see if that is picked up. The stylesheet rules would then become redundant except for a general rule that top categories are 102px high.

gjh42:

This is really very strange. I cannot see any reason at all why those three categories should not work when the rest do. They are even interspersed in the stylesheet, so there could not be an error that cuts off the end from processing.

Since you are not using hover features, it would be simpler for you to make the images foreground instead of background images. Rename or copy catbg67.png to catimg67.png and see if that is picked up. The stylesheet rules would then become redundant except for a general rule that top categories are 102px high.

But where is catbg67.png located?
I have not found this file in the plugin (attached).

gabicen:

But where is catbg67.png located?
I have not found this file in the plugin (attached).

In stylesheet_chcategories_dressing.css at line 72 I have reinsert the border (a white one) and the issue is resolved but do not know why.

#chcategories ul {/top category lists/
list-style: none;
background: none;
border: 1px solid #ffffff; ---> before it was changed by me to: none
margin: 0 0 0.4em 0;
padding: 0;
}

Thanks for this plugin gjh42 !

LOL. I thought maybe I was missing something. But yes it is very very strange. That is why I posted to see if anyone else might be able to spot the problem. Let me try your tip here and see if that works.

gjh42:

This is really very strange. I cannot see any reason at all why those three categories should not work when the rest do. They are even interspersed in the stylesheet, so there could not be an error that cuts off the end from processing.

Since you are not using hover features, it would be simpler for you to make the images foreground instead of background images. Rename or copy catbg67.png to catimg67.png and see if that is picked up. The stylesheet rules would then become redundant except for a general rule that top categories are 102px high.

Nope that didn't work either.

Ok so this issue gets weirder the more I try to fix it. I was able to rename the image yesterday and it didn't work. Today I went to rename it and my ftp program gave me an error. I tried to download the image to see if the creator of it maybe did something strange to it accidently. It will not download also throws an error. However I can download, rename etc any other image file in the buttons that was not done by this other person. Is there any possibility this image file is corrupt and that is what is causing the problem?

gabicen:

In stylesheet_chcategories_dressing.css at line 72 I have reinsert the border (a white one) and the issue is resolved but do not know why.

#chcategories ul {/top category lists/
list-style: none;
background: none;
border: 1px solid #ffffff; ---> before it was changed by me to: none
margin: 0 0 0.4em 0;
padding: 0;
}

Thanks for this plugin gjh42 !

I have upload the mod on my site: http://consumabile.org

It looks ok on Firefox 11, Opera 11 and Chrome but it is not ok on IE7...the space is still there (see image down).

Best regards,
Gabriel

ravynw - It does sound like there is something corrupt about the image itself, though why that would cause the code to not find it I still have no clue. Reopening and saving it with careful attention in your image program might help... For interest, you might try reopening a COPY of one of the images that does work (temporarily rename the original for holding purposes), save that copy and test it on your site. If the copy fails to work, that would indicate something wrong with your image program. Then delete the copy and restore the original if necessary.

gabicen - IE7 is very old and buggy and not widely used, and I would put a lower priority on making it look perfect as long as it works correctly. That said, I will look at it when I get a chance and see if a known bugfix is applicable to making it look right.

[QUOTE=gjh42
gabicen - IE7 is very old and buggy and not widely used, and I would put a lower priority on making it look perfect as long as it works correctly. That said, I will look at it when I get a chance and see if a known bugfix is applicable to making it look right.[/QUOTE]

I do not care how the site looks in IE7 so you should not bother with this problem.
Thanks again for this plugin.
Gabriel