Categories Dressing

You're fantastic! Turns out I would have worked it out provided I was in the right file. I never claimed to be a genius. :dontgetit

Thanks heaps... it is exactly the look I was after!

Hi I love your mod.

I have read 122 pages and almost all of my questions have been answered!

I have a multilingual question.

I am trying to implement catbg#.gif, hover, and selected for both English and Japanese.

If I don't add Japanese images to the japanese/buttons folder the category stays in text format, but if I upload Japanese images using the catbg#.gif format they show up but only in English. Most likely from the english/buttons folder.

What do you think I need to add, fix, re-code to make it look for the Japanese images.

Thank you for taking the time to look into this.

Regards,
Jason
brickship.com

That is a very strange problem. I see the basic effect you mentioned, but I also see that when displayed in Japanese, the categories list in different order. Is that supposed to be so? Is it Japanese alphabetical order, and to be expected?

I don't know anything about actually using multiple languages. I would expect that the Cat Dressing code would only check in the selected language folder for the existence of an image; since the category appears as text if there is no Japanese image, that appears to be working correctly.
The problem may be in the stylesheet. There is a standard stylesheet which sets background-images for selected categories in standard/hover/selected states; this will only use the original language folder.

You need a japanese_stylesheet.css file with different versions of these rules calling for the /japanese/buttons/ folder. (See /includes/templates/template_default/css/CSS_read_me.txt for more information.

I will work up an addition to the Cat Dressing readme to cover this situation, since it appears it will always be applicable when multiple languages and per-category background-images are in use.

Hi thank you for your reply.

Yes the categories are in Japanese alphabetical order.
I read the css.txt and I see how I can create a Japanese version.

I looked through my stylesheet and couldn't find any calls for background images or even categories.

Would I need to create my own?

Unless it is one of these
#navCatTabs ul li a, #navEZPagesTop a {
color: #000; /* color of ezpages and category tabs links */
font-weight:bold;
}

#navCatTabs ul li a:hover, #navEZPagesTop a:hover{
color: #fff; /* hover color of ezpages and category tabs in header */
font-weight:bold;
}

a:link {
color: #000; /* main site link color unless defined somewhere else */
text-decoration: none;
}

a:visited {
color: #000; /*main site link visited color unless defined somewhere else */
text-decoration: none;
}

a:hover {
color: #000; /*main site link hover color unless defined somewhere else */
}

a:active {
color: #000; /*main site link active color unless defined somewhere else */

Again thanks for the help

gjh42:

adi - Here is a new case 7 that should give the fourth level subcats only when at the fourth level.```php
case 7:// active subtree, active branches only, only 1st & 4th level - treat first subcat like top - customized 20100205 for madijelovi
if($cPath_top != $path_top){//only 1 top cat's subs
$skip_cat = 1;
break;
}
if($cat_depth == 1){//show all first level subs
break;
}
if($cat_depth == 4 and substr_count($GET['cPath'],'') == 4){//check 4th level for active parent, only for $cPath depth 4
$path_ids = explode('',$path);
$path_parent = $path_ids[count($path_ids)-2];
if (in_array($path_parent,explode('',$_GET['cPath']))) break;//show only subcats w parent in $cPath
}
$skip_cat = 1;//skip all others
break;

it works great, thanks again Glenn:bigups::wink:

brickship - The standard stylesheet I was referring to is stylesheet_categories_dressing.css; that is where you had to add rules so the background image for Aircraft would show up. Copy the rules with language-specific background images to japanese_stylesheet.css. You want to copy only the background image specifications.

Hello,

i am trying to replicate https://www.kinvart.si/temp/elegance2.jpg this site.

So far, this is what i have done https://www.elegance.si/store

What do i have to do in order to get my categories and sub categories colored as in my example page?

Thank you for your help!

Miha

The top categories need to be "special" as described in the comments in tpl_categories.php:```php
switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):

```php
// many variations of this can be done
      case ($box_categories_array[$i]['path'] == 'cPath=8'): //Moski cevlji
        $new_style = 'category-moski';
        break;
      case ($box_categories_array[$i]['path'] == 'cPath=10'): //Otroski cevlji
        $new_style = 'category-otroski';
        break;
      case ($box_categories_array[$i]['top'] == 'true'):
```Add to your stylesheet```
    }/*example for custom individual category styling*/
#categories li.category-moski a {
    background-image: url(../images/moski_bg.gif);
    background-repeat: none;
    padding: 2px 0 2px 23px;
    }

#categories li.category-otroski a {
    background-image: url(../images/moski_bg.gif);
    background-repeat: none;
    padding: 2px 0 2px 23px;

/*example for custom category group styling*/
ul#catGroup8 {
    background-color: #bbeeff; 
    }
```Adjust and add properties as required.

You will want to change top categories to list-style: none; and set the desired list-style image for subcategories.

I am a noob to this forum. Don't know if I posted to the right thread. My apologies. I purchased a template from templatemonster.com. Literally spent months modifying it. I had it just about right, then I found the perfect mod in Cat Dressing. The mod is great, and does produce the expanded categories as I had hoped. However, when the mod is activated, it restores the header and background graphics, in the category sidebox, which were intentionally removed in this template design. I would like to remove these attributes, and show the category box without header and background graphics. I can change almost everything in stylesheet_chcategories.css, but these features appear to be loaded in a .php file, not a .css file. It looks like they are called in the first few lines of ch_categories_tree_generator.php, but I can't figure it out. Any suggestions would be greatly appreciated!
My site is located at:
http://www.doreggie.com/leach_cart

Thank you!

gjh42:

The top categories need to be "special" as described in the comments in tpl_categories.php:```php
switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):

> ```php
// many variations of this can be done
      case ($box_categories_array[$i]['path'] == 'cPath=8'): //Moski cevlji
        $new_style = 'category-moski';
        break;
      case ($box_categories_array[$i]['path'] == 'cPath=10'): //Otroski cevlji
        $new_style = 'category-otroski';
        break;
      case ($box_categories_array[$i]['top'] == 'true'):
```Add to your stylesheet```
    }/*example for custom individual category styling*/
#categories li.category-moski a {
    background-image: url(../images/moski_bg.gif);
    background-repeat: none;
    padding: 2px 0 2px 23px;
    }

#categories li.category-otroski a {
    background-image: url(../images/moski_bg.gif);
    background-repeat: none;
    padding: 2px 0 2px 23px;

/*example for custom category group styling*/
ul#catGroup8 {
    background-color: #bbeeff; 
    }
```Adjust and add properties as required.
> 
> You will want to change top categories to list-style: none; and set the desired list-style image for subcategories.

I did everything exactly as you said, but have no luck... The menu stays the same.

Am i editing the right files?

.../includes/templates/template322/sideboxes/tpl_categories.php

and 

.../includes/templates/template322/css/stylesheet_categories_dressing.css

dreamoutlaw - You have a Template Monster template, which has added a host of extra divs and spacers to the standard sidebox layout. The chcategories feature changes the sidebox id to #chcategories. Anything you had applied to #categories by name needs to be transferred to #chcategories. You can add this to stylesheet_chcategories_dressing.css```
#chcategories .box_head_top, #chcategories .innerbox3 {display: none;}

For the rest of the background, I'm not sure exactly what you want to remove, and it may take a bunch of classes to do it. You should be able to transfer what you already worked out.

Kinvart - There are two things to modify. I should have shown in the example that you need to use stylesheet_chcategories_dressing.css (you would best delete stylesheet_categories_dressing.css to avoid confusion), and replace #categories with #chcategories in the examples.

The classnames after you do the "special" mod will be different than I showed, because I was working from the next unreleased version of Cat Dressing which uses slightly different methods. Your top categories now have class names like .cat-category-moski, so you want the stylesheet to reflect this.```
/example for custom individual category styling/
#chcategories li.cat-category-moski a {
background-image: url(../images/moski_bg.gif);
background-repeat: none;
padding: 2px 0 2px 23px;
}

#chcategories li.cat-category-otroski a {
background-image: url(../images/moski_bg.gif);
background-repeat: none;
padding: 2px 0 2px 23px;
}

/example for custom category group styling/
ul#catGroup9 { /moski/
background-color: #bbeeff;
}

gjh42:

Kinvart - There are two things to modify. I should have shown in the example that you need to use stylesheet_chcategories_dressing.css (you would best delete stylesheet_categories_dressing.css to avoid confusion), and replace #categories with #chcategories in the examples.

The classnames after you do the "special" mod will be different than I showed, because I was working from the next unreleased version of Cat Dressing which uses slightly different methods. Your top categories now have class names like .cat-category-moski, so you want the stylesheet to reflect this.```
/example for custom individual category styling/
#chcategories li.cat-category-moski a {
background-image: url(../images/moski_bg.gif);
background-repeat: none;
padding: 2px 0 2px 23px;
}

#chcategories li.cat-category-otroski a {
background-image: url(../images/moski_bg.gif);
background-repeat: none;
padding: 2px 0 2px 23px;
}

/example for custom category group styling/
ul#catGroup9 { /moski/
background-color: #bbeeff;
}

Dude, you rock :) thank you very much for the help so far!

Now, i've used search but had no luck finding what i need... As you can see now (<https://www.elegance.si/store>), everything is margined to the right. How can i "turn off" the "sandy colored border" on the left side and stretch the menu trough whole width of the chcategries box?

the second question: How do i make categories (zenski cevlji, moski celvji,...) other color (or use background image on them) then sub categories (elegant, casual,...)

the third question: Why doesn't it show background, even though it's set in stylesheet? you have set p.e. moski_bg.gif, witch is placed in a right folder (<http://elegance.si/store/images/moski_bg.gif>), but it wouldn't show.

Even by now i do owe you a beer or two, thank you :clap:

gjh42:

adi - Here is a new case 7 that should give the fourth level subcats only when at the fourth level.```php
case 7:// active subtree, active branches only, only 1st & 4th level - treat first subcat like top - customized 20100205 for madijelovi
if($cPath_top != $path_top){//only 1 top cat's subs
$skip_cat = 1;
break;
}
if($cat_depth == 1){//show all first level subs
break;
}
if($cat_depth == 4 and substr_count($GET['cPath'],'') == 4){//check 4th level for active parent, only for $cPath depth 4
$path_ids = explode('',$path);
$path_parent = $path_ids[count($path_ids)-2];
if (in_array($path_parent,explode('',$_GET['cPath']))) break;//show only subcats w parent in $cPath
}
$skip_cat = 1;//skip all others
break;

Glenn, as I a mentioned your code still works great but I am having some problems with showing classic categories sidebox on right side of page (right column) in Internet expolorer(IE).. For example: categories sidebox on the right side is showing exactly as it should in Firefox, Google chrome, Safari and Opera except in IE. I am not sure if I explained it correctly so I uploaded two screenshots so you could see whats the problem:

[Website in Firefox](http://jazz.vacau.com/screenshot_FF.gif)
[Website in Internet explorer](http://jazz.vacau.com/screenshot_IE.gif)

You will notice that in IE, categories box is not showing just spare part types (4th level subcat.) - it is also showing Car brands (1th subceg. level) which shouldnt be visible in right categ.sidebox. Also, I forgot mention that in IE right classic categories sidebox is showing all the time (not just exclusively on 4th subcategorie level). However, this is not problem for me because I always use Firefox, but my client says that there are many customers who use IE and thats problem:blush:
Hope you can help me with this one :bigups:

IE6 doesn't understand the CSS standard for child selectors (>) which indicate the direct child of the previous element.
Thus, this will not work for IE6:```
#categoriesContent>ul>li>ul>li>a {/hide only first level subcategories - right box/
display: none;
}

(They could still use a real browser like Firefox if they wanted to:)

There should be an IE-only hack that will do it - I will see what I can come up with. Perhaps```
* html #categoriesContent ul ul a {/*hide only first level subcategories - right box -IE6 hack*/
    display: none;
    }

* html #categoriesContent ul ul ul a {/*show deeper subcategories - right box -IE6 hack*/
    display: list-item;
    }

"witch is placed in a right folder (http://elegance.si/store/images/moski_bg.gif), but it wouldn't show."

That is not the right folder for template images.
Put them in /includes/templates/your_template/images/.

gjh42:

"witch is placed in a right folder (http://elegance.si/store/images/moski_bg.gif), but it wouldn't show."

That is not the right folder for template images.
Put them in /includes/templates/your_template/images/.

I've figured out the thing with the images, but still can't get other two things to work...

gjh42:

IE6 doesn't understand the CSS standard for child selectors (>) which indicate the direct child of the previous element.
Thus, this will not work for IE6:```
#categoriesContent>ul>li>ul>li>a {/hide only first level subcategories - right box/
display: none;
}

> (They could still use a real browser like Firefox if they wanted to:)
> 
> There should be an IE-only hack that will do it - I will see what I can come up with. Perhaps```
* html #categoriesContent ul ul a {/*hide only first level subcategories - right box -IE6 hack*/
    display: none;
    }

* html #categoriesContent ul ul ul a {/*show deeper subcategories - right box -IE6 hack*/
    display: list-item;
    }

thank you for promt reply, truly appreciate it.

I just tryed code you suggested on my IE v 6.0 and its working but problem is that brands are not visible now on right sidebox but there is still empty space like they are still there, not sure why.. To show exactly how it looks like now here's new screenshot

So the <a> elements are being hidden, but the <li> presumably are still taking up space... The trouble with hiding upper level li is that the lower level elements are part of an upper li. It may be possible to do this with catGroup ids... I've forgotten the link to your site, and I can't test anything without that.

Kinvart - I looked at your site, and there are several strange things happening that I can't understand without seeing the code that makes them happen. If you post the section of tpl_categories.php where you added special categories, and your categories_dressing_defines.php, I may be able to figure it out.