Categories Dressing

Hi,
I have a menu with cats and subcats
example:
cat1
subcat1a
subcat1b
subcat1c
cat2
subcat2a
subcat2b
subcat2c
cat3
subcat3a
subcat3b
subcat3c
etc

I want to have an extra space/seperator or div between the last subcat and the categorie under it.
So an extra space in this example between subcat1c - cat2 and subcat2c - cat3 and subcat3c - etc

Where can I insert an seperator, div or <br />

It is possible to insert an seperator above a category and you have to asign them with their ids. But is there a simple hack where you can insert the seperator under every last subcat?

This would take a bit of work to do in the code, but it turns out to be dead simple to accomplish with CSS. You still can't insert the separator "under" the last subcat in a set, but you can give a margin-top (or whatever you want) only to categories that follow a set of subcats. (You can use
border-top: 1px solid #aabbcc;
to put a divider in this location.)

This will give the extra space only to top categories that follow subcats:```
#categories ul+li.cat-top {margin-top: 2.0em;}

This will give the extra space to any level category that follows subcats:```
#categories ul+li {margin-top: 2.0em;}

The only way you can have an <li> element directly following (not just inside) a <ul> element is for there to be a list of subcats just ahead of it.

Note that this will not work for IE6 because it does not understand the "adjacent selectors" relationship. If you can live with people using this out-of-date browser not seeing the full esthetic effect of your design, you're golden.

gjh42:

This would take a bit of work to do in the code, but it turns out to be dead simple to accomplish with CSS. You still can't insert the separator "under" the last subcat in a set, but you can give a margin-top (or whatever you want) only to categories that follow a set of subcats. (You can use
border-top: 1px solid #aabbcc;
to put a divider in this location.)

This will give the extra space only to top categories that follow subcats:#categories ul+li.cat-top {margin-top: 2.0em;}This will give the extra space to any level category that follows subcats:```
#categories ul+li {margin-top: 2.0em;}

> 
> Note that this will not work for IE6 because it does not understand the "adjacent selectors" relationship. If you can live with people using this out-of-date browser not seeing the full esthetic effect of your design, you're golden.

Sorry I would like to understand that, but I do not excatly.

I understand it is not possible to that I can't insert the separator "under" the last subcat in a set.

So I must make a statement like when there are subcats, give a margin-top: 2em; to the next category-top

But where and how can I do this?

It is okay that it  won't work for the old browsers (ie6 and earlier) .

A liitle code in here

      switch ($current_path) {
      case '1_10': //replace number with your desired cPath
        //$content .= '<hr class="catBoxDivider" />' . "\n";  // to add divider uncomment this line
        $content .= "\n" . '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'</span>' . $disp_block_head); 
      break;
      }  
```Need that for example, but not above, but **under** it

problem solved to insert this code above

$current_path = str_replace("cPath=","",$box_categories_array[$i]['path']);

I wonder if anyone could help me with this mod. I installed it and played with the code for a few hours but I was getting nowhere.

What I'm trying to achieve is an additional categories box which will display a new set of categories which I will create called, "SIZES"...

These size categories must not appear in the tree of the main categories, but rather in a new sidebox below the main categories.

My goal is to have all my products set as linked products so that they will appear in the size categories should someone prefer to browse by size as opposed to browse by category.

I hope I'm making sense :-)

If anyone could tell me where I'm going wrong I'd be eternally grateful.

I installed this mod and no matter what I did to the stylesheet_categories_dressing.css or the categories_dressing_defines.php files I could not get the category headings to move down and below "all products"

If you look at this thread then I've outlined by way of pictures what I'm trying to achieve.

Anyone, point me in the right direction????

Thanks in advance....

Raimond -
The code you show is from the older version (v2.2) of Categories Dressing, and will most likely not work in the latest version (v2.6). What version do you have? The comments at the top of tpl_categories.php will say this. If you have the older version, you need to replace it with the new version for this job.

If you are not understanding the full explanation, it's ok, you don't need to. Just add this to the bottom of your stylesheet_categories_dressing.css:```
#categories ul+li.cat-top {
margin-top: 1.0em;
border-top: 1px solid #aabbcc;
}

gjh42:

Raimond -
The code you show is from the older version (v2.2) of Categories Dressing, and will most likely not work in the latest version (v2.6). What version do you have? The comments at the top of tpl_categories.php will say this. If you have the older version, you need to replace it with the new version for this job.

If you are not understanding the full explanation, it's ok, you don't need to. Just add this to the bottom of your stylesheet_categories_dressing.css:```
#categories ul+li.cat-top {
margin-top: 1.0em;
border-top: 1px solid #aabbcc;
}

Hi gjh42,

problem solved to insert this code above
     Code:
     $current_path = str_replace("cPath=","",$box_categories_array[$i]['path']);

Limelites -
There are limits to the ways that category groups can move and still remain dynamic (opening to show subcategories). Any but the most straightforward of these require CSS experience and knowledge to apply correctly.

To get the Size group to appear below the all/featured/new links, you will have to use relative or absolute positioning. Position: absolute; may be the best route. If the designers box will vary in size, that cannot be accounted for in the positioning. You would either have to leave a gap for the designers box to open into or run the risk of the two boxes overlapping. I will first describe a method that will put the sizes above the designers. With a little extra work, it may be possible to have the sizes fit correctly below the designers, depending on your conditions.

Give the size categories sort orders in admin that are higher than any other categories, so they appear just above the links. Give the UK 3 category a heading of "Sizes" and a "new group" flag, in the defines.

Now style that group id with
position: absolute;
bottom: -25.0em;

and add
#categories {margin-bottom: 15.0em;}

The links will move neatly up into the space the sizes used to occupy, and there will be a space held open below the categories box. The sizes group will show with its heading below the categories box, approximately in the space held open. You will need to adjust these numbers to make the parts fit correctly. Start on this, and post back when you have a group defined; I can't test anything for you without that group.

Raimond, I don't really get how the code you posted could work to give the results you asked for, but if you are happy, so am I :)

gjh42:

Limelites -
Raimond, I don't really get how the code you posted could work to give the results you asked for, but if you are happy, so am I :)

In the original tpl_categories.php I inserted after
default:
$new_style = 'category-products';
}

      switch ($current_path) {
      case '1_10': //replace number with your desired cPath
      case '3_14': //replace number with your desired cPath
        $content .= "\n" . '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':' </span>' . $disp_block_head); 
      break;
      }  

Are categories 1_10 and 3_14 the categories that follow the subcat lists? (Obviously they are not top categories.) Are they the last subcategories in their respective lists? If that is the case, the code as you posted it would put a "heading" (space) above the subcat.

If it does what you want, good, but it needs to be hard-coded for each new situation. The CSS will automatically work for all situations with no further changes.

gjh42:

Are categories 1_10 and 3_14 the categories that follow the subcat lists? (Obviously they are not top categories.) Are they the last subcategories in their respective lists? If that is the case, the code as you posted it would put a "heading" (space) above the subcat.

If it does what you want, good, but it needs to be hard-coded for each new situation. The CSS will automatically work for all situations with no further changes.
yes indeed, these are the last subcategories in the categories...and in this case it put a extra div under the sucat. In the attachement i inserted the modified tpl_categories.php...maybe is this more helpful.
I am happy it works for me :D

OK, it works because when the switch is processed, $current_path is still set on the last category that was processed. Yes, it will work correctly for every subcategory you hard-code into the switch.

Hallo, sorry for my question... I am begginer...
I install Categories Dressing and I need change a look. In stylesheet_categories_dressing.css I change global settings like colors for all categories. It is OK. Now I need change one category only. For example: /index.php?main_page=index&cPath=2.

In stylesheet_categories_dressing.css I have:
ul#catGroup2 {
border: 1px solid #bd6699;
background: #bbeeff;
position: relative;
left: -1.3em;
top: 0.2em;
}

In categories_dressing_defines.php I have:
define ('CAT_BOX_HEADING_2','1|0|aaa.gif|');

But I see nothing. All is the same. What I do wrong? I use ZenCart 1.3.8 in czech lanuage. Thank you for reply.

The information you posted looks ok, so I will have to see your site live to tell what is wrong. Please post a link.

Thank you for reply. URL is here: http://sexshoponline.cz/obchod/index.php?main_page=index&cPath=2

Now I need to change one category only. I need to add picture in front text. For example: picture + space + text. Is it possible? I don't know if I have right settings...

Whatever I change in CSS I see nothing...

/*example for individual category as bg image*/
#categories li a.catBg2 {
    background-image: url(../images/zacatek.gif);
    height: 30px;
    }

#categories li a.catBg2:hover {
    background-image: url(../images/catbg25hover.gif);
    }
	
/*example for custom individual category styling*/
#categories li.promuze a {
    border-top: 3px dotted #112233; 
    background-color: #aabbff; 
    color: #000000; 
    padding: 1em 0em;
    } 
    
    .promuze {
    border-top: 1px dotted #112233; 
    color: #000000; 
    background-image: url(../images/zacatek.gif);
    }

ul#catGroup2 {
	background-image: url(../images/zacatek.gif);
	background-repeat: no-repeat;
	}

You are using
background-image: url(../images/zacatek.gif);
but the code will not look for zacatek.gif, and will never display this set of images.
You need to name the image catbg2.gif, and then see what shows up. This will only work to replace the text with a background image, not add a background image to the text.

It appears that you have tried several different methods to get the results you want. Do you want a unique image for category 2 (promuze)? Or will the image be the same for all of the top categories?
For a unique image at the left of the name for one category, do the tpl_categories.php example like thisphp case ($box_categories_array[$i]['path'] == 'cPath=2'): $new_style = 'promuze'; break; and in the stylesheet like this example: #categories li.cat-holiday a {}```
#categories li.cat-promuze a {
background: #aabbff url(../images/zacatek.gif) no-repeat left center;
color: #000000;
padding: 1em 0em 1em 3.5em;/this moves the text away from the left to leave space for the image/
}

I am trying it but still nothing... Is it possible to send you PM with FTP, please? Now I don't know what can I do... I am wierdo... I know...

I need menu like this: http://st.fri.uniza.sk/~chudoba/sexshop07.jpg

Or I can send you necesary files like CSS and PHP.

In my opinion HTML page can't see style #categories li.cat-promuze a

Here is a part of HTML code:

The picture of the categories menu you want is what I really needed to give the right advice.
The "$new_style = 'promuze';" code is one way to get what you want for the categories, but it requires a separate "case" for every category and subcategory.
You have been working hard - I see you now have most of the top and subcategories done.

The most efficient approach would be to use category groups, so you can easily get the different bullets on the subcategories, but since you are so close with the method you are using, keep going as you are.