Categories Dressing

[jenchord]

Hello,

Wow, this is a very useful module-- too bad my knowledge of CSS isn't really enough to make full use of it!

However, I've gotten what I wanted except for one thing. I'd like to have the flame resistant top category to have a background image.

I made my image, named it catBg4.png and saved it into the buttons/english folder with the other cat images. The only thing I did in defines was change the image extension from .gif to .png.

This is what I did in CSS:

#chcategories li a.catBg4 {
background-image: url(../buttons/english/catBg4.png);
background-repeat:no-repeat;
}


The result is no image for my category although its background color is changed as well as the background color of its subcategories when hovering (although I did give them their own defines and styles).

I'm learning that things don't just work at times and then not at others--there's always a reason. I know there's a simple mistake or rule that in the code that I'm missing, I just don't know what!

If you could just quickly point out what I'm doing wrong, I'd be very grateful, thanks a whole bunch for already have taken the time to help me.

Thanks again!

[gjh42]

catBg4.png

Image filename lookups are configured to be lowercase, so you would need to change this to catbg4.png if you want the background image to be substituted for the text. Only stylesheet tags use camel case.

If you just want the background behind the standard text, don't give it a keyword name, just something like fr-bg.png.
You can get the distinct styling without making "special categories", by making a define for catGroup4 (as you had originally, but with some incorrect heading tags). Use this as your model:

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

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

Now you can add rules for #catGroup4 {}, like

#catGroup4 li {background-image: url("../images/fr-bg.png");}

This category group will include the "Shop By FR Fabric" category, so both will have the distinctive background image, as will their subcats.

[pmurray]

pmurray - Sorry, didn't see your post earlier. For the "Vehicles" sidebox, you can define a category group for category 75 (Vehicles), and add to your stylesheet

#vehicles #catGroup67 {display: none;}

to hide all other top categories.
There is no such ability with the other sidebox, but if you install the ch_categories option bundled with Categories Dressing, you can enable the chcategories sidebox and use a rule

#chcategories #catGroup75 {display: none;}

to hide the Vehicles top cat in that box.

It's not entirely clear from looking at your site which elements you are currently using, so this advice may need a little tweaking.

Basically I am using your version of tpl_categories.php

I would like to select a sub cat with my vehicle list to show under vehicles if possible?

I see this in the php file
$skip_cat = 0;
$skip_cat = cat_active_level_manage($current_path);
if ($skip_cat or zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {

Is there any way to edit that to select a certain sub cat folder?

Trying to figure out how it all works but not getting very far

I have not really added my categories as such, only test ones so if i need to re-do all that it's not an issue.

Also my original categories is still pointing to the original tpl_categories but a renamed version to make the two sideboxes totally seperate.

Hope you can help.

Paul

[gjh42]

to select a certain sub cat folder?

What do you mean by this? Do you want a certain subcat of Vehicles open all the time, but not others??
If you have the chcategories option installed, and the display settings for only certain subcats (like "active tree") to show, you could add a test in the function file switch for the appropriate case to show that subcat regardless of other circumstances.

To show the different top cat groups in different boxes, the easiest way is as I described above. If you want the boxes in the same column, you can also just make the appearance of two boxes in the one sidebox using "category groups" and hiding the outer sidebox container - see the readme for details.

[limelites]

Hi Glen.

I've just noticed an odd effect in IE in compatibility view on the categories:

http://www.silkblooms.co.uk/

Do you see the excessive gaps between "coming soon", "Hire Products", "All Wedding Flowers" and "Colour Filter"? All the bold ones that is.

Weird. It's not happening in any other browser, just IE in compatibility view. Can you see what might be causing it?

[jenchord]

Image filename lookups are configured to be lowercase, so you would need to change this to catbg4.png if you want the background image to be substituted for the text. Only stylesheet tags use camel case.

If you just want the background behind the standard text, don't give it a keyword name, just something like fr-bg.png.
You can get the distinct styling without making "special categories", by making a define for catGroup4 (as you had originally, but with some incorrect heading tags). Use this as your model:

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

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

Now you can add rules for #catGroup4 {}, like

#catGroup4 li {background-image: url("../images/fr-bg.png");}

This category group will include the "Shop By FR Fabric" category, so both will have the distinctive background image, as will their subcats.

Thank you much!

[jenchord]

I have the images in place...now just one more thing.
I would like to move the text for the Flame Resistant category a little to the right so that it's not sitting on top of the image. I'm thinking this might be done by giving it some left padding or margin.

I can't figure out how to make this margin apply to the text only. Currently, I'm trying this in my CSS:

#chcategories li.cat-special_style2 a.cat-not-selected {margin-left: 10px;}

It's not taking affect.

Please excuse my ignorance, I think this will be the last thing

[jenchord]

I have the images in place...now just one more thing.
I would like to move the text for the Flame Resistant category a little to the right so that it's not sitting on top of the image. I'm thinking this might be done by giving it some left padding or margin.

I can't figure out how to make this margin apply to the text only. Currently, I'm trying this in my CSS:

#chcategories li.cat-special_style2 a.cat-not-selected {margin-left: 10px;}

It's not taking affect.

Please excuse my ignorance, I think this will be the last thing

Sorry, I don't know how I got this .cat-not-selected.

This is how the CSS looks:

#chcategories li.cat-special_style2 a {margin-left: 10px;}

And it is taking affect, just not the one I wanted.

I suppose I actually have to define a heading for category Flame Resistant to apply positioning rules to its text?

[gjh42]

Use padding instead of margin to get the text moved in from the edge of the background.

[gjh42]

limelites - I see the effect you describe, but am away from home and have no diagnostic tools available right now. I'll see if there is anything I can find out when I get home. Unfortunately the nice Firefox tools are not relevant to IE display quirks...