Category Dressing and Separate Category Sidebox

Hi There,

I have installed both Category Dressing and Separate Category Sidebox modules.

Both modules are working as advertised. However, the Separate Sidebox does not uses nice category styles I have created using Category Dressing module!

How can I make Separate Category Sidebox do that?

My store URL is https://www.shinypetstore.com

You can add .separatesideboxlist li and .separatesideboxlist a to the appropriate selector lists in stylesheet_categories_dressing.css.

Thanks so much for your reply. I am not very familiar with CSS code. Could you please be more specific?

I can take the time for a full answer later, possibly tonight.

That would be great. I really appreciate your help :D

#categories ul, .separatesideboxlist ul {/*top category lists*/
    list-style: none;
    background: none;
    border: 1px solid #ffaa99;
    margin: 0 0 0.4em 0;
    padding: 0;
    }

#categories ul a, .separatesideboxlist a {
display:list-item;
list-style:disc inside url(/includes/templates/pure_orange_free/images/bullet1.gif);
background:no-repeat;
border:none;
margin:0;
padding:0
}
```It's hard to be sure exactly what is in your stylesheets, as the minify script alters the look of things quite a bit.

Thanks so much :clap:

I'll add it to category dressing stylesheet and let you know the result.

Hi Glenn,

I added your recommendation to stylesheet_categories_dressing.css file but I see absolutely no change on my Separate Category side box on the right. This is how the stylesheet looks now (see my comments in area I applied the change):

#categories ul, .separatesideboxlist ul {/*top category lists - modified for Separate Cat. */
list-style: none;
background: none;
border: 1px solid #ffaa99;
margin: 0 0 0.4em 0;
padding: 0;
}

#categories ul a, .separatesideboxlist ul a {/*top categories - modified for Separate Cat. */
display: list-item;
list-style: disc inside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
background: no-repeat;
border: none;
margin: 0;
padding: 0;
}

#categories ul ul, .separatesideboxlist ul ul {/*subcategory lists - modified for Separate Cat. */
list-style: none;
background: #ffeecc;
border: none;
margin: 0 0 0.4em 0;
padding: 0 0 0 1.3em;
}

#categories ul ul a, .separatesideboxlist ul ul a {/*subcategories - modified for Separate Cat. */
display: list-item;
list-style: circle inside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
background: #ffddbb;
border: none;
margin: 0;
padding: 0;
}

/change bullet when a category w/o bg image is open to subs:/
#categories li a.cat-parent-text, #separatesideboxlist li a.cat-parent-tex {
list-style: square inside url(../images/bullet2.gif);/change to list-style: none; to remove bullet/
}

/change bullet when a category w/o bg image is open to products:/
#categories li a.cat-selected-text, #separatesideboxlist li a.cat-parent-tex {
list-style: square inside url(../images/bullet3.gif);/change to list-style: none; to remove bullet/
}

/disable bullet for cats w/ image or bg image/
#categories li a.cat-parent, #categories li a.cat-selected, #categories li a.cat-not-selected {
list-style: none;
display: block;/fix IE6 margin-left bug/
}

Thanks in advance for your help.

First, this rule is not going to apply to the separate sidebox because it does not have code to generate link classnames:

#categories li a.cat-parent-text, #separatesideboxlist li a.cat-parent-tex {

The separate sidebox display is consistent with the rules that do apply to it, except for the arrow. Mm okay, there should probably be a red border showing from the demo styling. Do you have bullet1.gif saved in your template's /images/ folder? What does the regular categories box look like?

I made one error in suggesting .separatesideboxlist ul - the ul is not under .separatesideboxlist, it is named that. You would use ul.separatesideboxlist, or just .separatesideboxlist .

My suggestion of .separatesideboxlist a was correct, and you need to use that form instead of .separatesideboxlist ul a as you have.

That did it. Now I can see the bullets and orange box :cool:

In regard to your previous post, can I simply add classnames to the main stylesheet so that separate sidebox can also generate link?

Thanks for your help.

No, the separate sidebox would need to be recoded to have the ability to apply the same classnames. It may be able to use some standard classnames like a.category-subs and a.category-products, etc. You would have to check various conditions using the Firefox Web Developer or Firebug to see what classnames are actually being generated.