Hello people,

I need some help here http://www.bionaturaldrops.com/. I want my categories:

1. To have a background colour as they do now but to fill the whole sidebox.
2. My seperators to go from end to end in my categories sidebox.
3. The hover effect to be of a different colour and also to highlight the whole space of the hovered category (enclosed in the two seperators) and not just highlight the name of the category.
4. When the category is selected the whole space to become highlighted and stay highlighted so the customer will know where he/she currently is in categories.

Sorry for the many "wants" that I have but I tried to search this thread for my answers but without success. Is there any other info I need to post? I am open to suggestions.

Thanks in advance!

http://www.bionaturaldrops.com/

fixed it perfect! thanks...

needs fiddling for size and whatnot, but now that i can see it, its easily fixed.

thanks again for all your help!
(feeling very zenny today)

hey Glenn;

Thanks for the heads up on the expanded category tree mod. I would never have found that.

If I can be indulged a few more questions.

1. how do I not show the category list only on main category pages - not sub cats and product pages?
2. how do I remove or comment out the default sub cat links that appear below the category description?
3. How do I remove the Sprecials and what's new from beneath the sub cat list?
4. how can I show the sub cats on certain categories in column? example, under Yarns:
   ----------- column 1 Column 2
   | IMG | choose by Brand Choose by Fibre

Here's a link to the site so you don't have to scroll through the threads.

This may vary by categories as some are longer than others.

Glenn, your time and patience is much appreciated. you are a rock.

How do I remove the categories dressing?

Just delete the files that are included in the mod (see the readme for a list.)

What were you trying to do that you installed it for originally? Depending on your intentions, you may need this mod - I can't tell without more info.

Newagekat -

1. I think your best bet here is per-category stylesheets.
   Set the categories box to display: none; in your main stylesheet,

#categories {display: none;}

and make a stylesheet for each top cat named like c_1.css containing the rule

#categories {display: block;}

2. Add to your stylesheet

.categoryListBoxContents {display: none;}

3. Admin settings... If you don't want them removed from the top categories, you could do the same display: none; / display: block; routine as described above, using the same c_1.css stylesheets.

4. This one would be difficult, except for the abilities of the newest Cat Dressing version. Are you wanting a column of brand subcats, and a column of fibre subcats next to it?
   Making "groups" for those two categories will let you treat them separately for positioning. (You will need a group for each of these subcats under each top cat.)

Glenn:

I was just about to contact you when you posted a reply to my questions. Mind reading is a rare commodity :D

I will try your solution for step 1 & 2 and keep you posted. if I understand ZC convention, it has to be stylesheet_c_1.css for category cPath 1, right?

I managed to fix step 3 by setting ul.catLinks to display: none; in catDeressing css

As to step 4, well that's a pickle. I was playing around yesterday and realized that, yes, I would need to create a group.

if you visit the site, you'll see my attempt got some results, but not quiet what I was looking for.

Are you wanting a column of brand subcats, and a column of fibre subcats next to it?
Making "groups" for those two categories will let you treat them separately for positioning. (You will need a group for each of these subcats under each top cat.)Yes, that's exactly what I want to do!

In the category define page, I currently have:

define ('CAT_BOX_HEADING_1','1||1|||1|');//new list - text headings - multiple levels - styles 1 & 2
define ('CAT_BOX_HEADING_2','1|1|1||Major Heading|1|Subcat Heading|2|Subcat Heading |2|');//new list - text headings - multiple levels - styles 1 & 2
define ('CAT_BOX_HEADING_3','1|1|1||Major Heading|1|Subcat Heading|2|Subcat Heading |2|');//new list - text headings - multiple levels - styles 1 & 2
define ('CAT_BOX_HEADING_6','1|1|1||Major Heading|1|Subcat Heading|2|Subcat Heading |2|');//new list - text headings - multiple levels - styles 1 & 2
define ('CAT_BOX_HEADING_7','1|1|1||Major Heading|1|Subcat Heading|2|Subcat Heading |2|');//new list - text headings - multiple levels - styles 1 & 2

define('CAT_BOX_ACTIVE_LEVEL', '1|1|2');//hide top catsto tell you the truth, I'm lost :unsure:

can you show me one example for say Choose by Fibre in the Yarn category?

If I can understand your thought process, maybe I can give you a hand to further clarify this aspect of the define page. I know a lot of people are confused. It might reduce the number of posts asking for the same thing. :blush:

Is there a new version beyond 2.6? and can my request be handled with that new version?

thanks again for you time, Glenn. Your patience has no bounds.

Glenn:

just a heads up, placing .categoryListBoxContents { display: none; } in styleshee.css will hide the subcat list. so if someone goes and clicks the heading Choose By Brand, they only see dotted lines with no sub cat lists. So, I've palced .categoryListBoxContents { display: none; } in the category specific stylesheet c_1.css (for category cpath=1)

IT WORKED!!! :clap:

all that's left is grouping. thankyou thankyou thankyou !!

You are putting in a lot of extra stuff there...
From the readme:

To start a new <ul> list grouping in a specific place in the categories menu:
The first number in the "pipes" section '1|0||' controls the list grouping.

define ('CAT_BOX_HEADING_1','1|0||');//new list - no headings

When set to 1, a new list group will begin with the specified category, and continue until another group is defined. You do not need to have a heading for a group.
The group will have an id based on the cPath of the category at its head, like #catGroup48, which can be used to style and even move the group independently of the rest of the sidebox:

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

Leave this field set to 0 unless you specifically want to style a group starting with this category.

You are applying the groups to subcats, not top cats, so you would want:

define ('CAT_BOX_HEADING_1_15','1|0||');//brand
define ('CAT_BOX_HEADING_1_16','1|0||');//fibre
define ('CAT_BOX_HEADING_6_40','1|0||');//books
define ('CAT_BOX_HEADING_6_41','1|0||');//patterns

and in your stylesheet:

ul#catGroup1_15 {
    position: relative;
    left: 0em;
    top: 0em;
    }

ul#catGroup1_16 {
    position: relative;
    left: 15.0em;
    top: -11.0em;
    }
```adjusting numbers to fit.
You might want to use absolute positioning, but you would need to specify a height for the #categories box so that space is held open.

Read /includes/templates/template_default/css/CSS_read_me.txt for a description of how to make category-specific stylesheets. EDIT: I see you have done that.

You're right, those links can be hidden with CSS - I was thinking of centerboxes...

I submitted v2.7, but got it withdrawn before posting when I found a bug in the stylesheet. As soon as I get a bit of time for testing, I will be submitting v2.7.1, which will also have some added "active/level" display control settings.
But that will make no difference to your situation, as it is primarily for integrating the Uncollapsed Categories Tree mod.

Glenn:

just wanted to take a moment to thank you once more for your time and patience. If I can buy you a cup of coffee, let me know. :D

Hey Glenn:

I thought I was done bugging you, sorry.

I'm in the process of cleaning the code for this site for cross browser compatibility and to meet W3C standards.

I've noticed that you have placed nested UL tags inside the parent UL not the LI. for example, on my site:

<ul>
<ul id="catGroup1_15">
   <li class="cat-subs"></li>
   <ul>
      <li></li>
   </ul>
</ul>
```instead of

I'm working on Firefox 3 for Mac. I'm currently testing on Safari v3.2.1, IE6, and IE7. I will also test on Opera.

Also, I have zen Lightbox installed to work with product and attribute images. However, since installing your mod and/or perhaps the category tree mod, the lightbox is no longer working. Images open in a new window.

I've checked, and none of the files overwrite each other. Any ideas? Has anyone else experienced this?

As far as Lightbox, I have no idea. I don't know of any reason why there would be a conflict.

The list issue bears looking into. I think that it would take a bunch more coding to check whether there is already a list started, and whether a <li> should be wrapped around the one being built, or </li> added after the one being closed. I'll investigate and get back.

Glenn:

lightbox issue was caused by some jquery script I wanted to add to a slideshow. so not related to your script, which is what I suspected.

I would love a solution to the list issue. I'm finding that the positioning can be controlled for each of the IE browsers through separate stylesheets, but to meet both firefox and safari, is proving to be challenging. Firefox looks great, but in safari, the second list is higher than the first. can one have a separate stylesheet for safari?

On IE, it seems that the entire left column is pushing against the center column, because it's not just a list issue. i use web develepor plugin on firefox to determine causes, but IE has no such plugin that I'm aware, so it's hard to determine what's happenning.

Look at this PAGE on each browser, and you'll see what I mean.

thanks for reviewing this, Glenn, I'm hoping my questions will help solve many issues for the many people using this mod.

Hi Glen, I wonder if you could tell me what stylesheet area controls This margin/space between the bullet1.gif and the edge of the page:

Every time I try move it left a touch (so I can change 'swim' to swimwear without it forcing a new line) it moves the header bars too :-)

You have given the entire sidebox content 20px of left margin, so reducing that should take care of your problem:```
#chcategoriesContent {
margin-left: 20px;
}

Newagekat -

I think your positioning issues will be best solved by switching from relative to absolute positioning. The categories box is not holding the space open where it is displaying anyway, so it won't matter that it will become "invisible" as a box.

You need to make the box content position: relative; so it is a good frame of reference, and then position each category group with top: 0; and left: xxem; as appropriate.```
#chcategoriesContent {position: relative;}
ul#catGroup1_15
{
width: 14em;
position: absolute;
left: 0em;
top: 0em;
}

ul#catGroup1_16
{
width: 14em;
position: absolute;
left: 14.0em;
top: 0em;
}
ul#catGroup1_16 li
{
padding-left: 2em;
border-left: 1px dotted #7597A6;
}

Your method of moving the categories over to the right is the cause of #navColumnOne getting so wide. You give the box a huge left margin, but no corresponding negative right margin, so the whole container is stretched. Relative positioning doesn't move the element out of its container, but stretches the container in some fashion to still surround it. I haven't studied this aspect in depth.
Absolute positioning will get the box out of the layout flow. Then the content relative positioning will act as a frame for positioning the categories. I have also deleted a few properties from the code that were not doing anything in the new setup.

http://commonwealthyarns.com/includes/templates/craftBook/css/c_1.css

#chcategories
{
display: block;
height: 200px;
position: absolute;
left: 52em;
top: 33.5em;
}

.categoryListBoxContents { display: none; }

I am working on the list issue - thought I had it solved, and a new wrinkle cropped up. I think it will be necessary to rework the flow of the base tpl_categories code, first closing the previous <li> as appropriate before or after the <ul> step, then creating the new one but not closing it until the next round. Fun stuff...

Thanks Glen, you're the best... worked a treat :-)

Hi Glenn:

I don't know if this is related to one of the selectors we turned off in the stylesheet, but if you click on Specials, and no specials are available, then the center box with the border is not drawn at all. Is this a logic issue on my part or a stylesheet display: none issue?

the absolute positioning seems to be working. i'll keep you posted.

When there are no products on special, no specials are shown. With the categories box absolutely positioned, that doesn't hold any space open, so the page can collapse all the way. If you give a min-height to one of those elements, you can keep it from collapsing in browsers newer than IE6.

Hi, ive just downloaded the most recent version, and im having trouble removing the two heading images in the category list, where in the code are these placed.

Thanks