Categories Dressing

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:

Code:

---

#categories ul+li.cat-top {margin-top: 2.0em;}

---

This will give the extra space to any level category that follows subcats:

Code:

---

#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.

Quote:

---

Originally Posted by 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:

Code:

---

#categories ul+li.cat-top {margin-top: 2.0em;}

---

This will give the extra space to any level category that follows subcats:

Code:

---

#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.

---

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

Code:

---

      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

Code:

---

$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:

Code:

---

#categories ul+li.cat-top {
    margin-top: 1.0em;
    border-top: 1px solid #aabbcc;
    }

---

Quote:

---

Originally Posted by 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:

Code:

---

#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 :)

Quote:

---

Originally Posted by 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';
}

Code:

---

      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>':'&nbsp;</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.

Quote:

---

Originally Posted by 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