Categories Dressing

You have named the file catimage136.gif - this will not work. It needs to be in the form catimg136.gif.

See the readme section titled "To add a non-linked heading to the all/featured/specials/new links:" and comment out the heading code around line 132 in tpl_categories.php:```php
if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
}

    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
      $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
    }
```

Thank you - I knew it was something simple!
Mona

I have installed this mod and followed the instructions.

I am trying to put simple bullets on each category and sub category level.

I am a little confused by the instructions though as they just say:

Add to your stylesheet:
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links {
display: list-item;
list-style: disc inside url(../images/bullet1.gif);
}

To change the bullet when a category is open to subs, add to your stylesheet:

a.category-top-text .category-subs-parent {
display: list-item;
list-style: square inside url(../images/bullet2.gif);
}

"Add to your stylesheet"

Where? do I add this to the stylesheet?

Is it an appendage to some other code?

Is it a new line?

At the top?

At the bottom?

I know nothing whatsoever about php/css etc so I am just following the instructions, but with little success.

Thank you in advance anyone.

https://www.diversofpearls.com

Mark

Thanks, extaclty what i needed but I have one problem.... I changed the stylesheet and everything works perfect but when I eventually want to change the 'Heading 1' to another heading... nothing happens!:huh:

It stays with 'Link Heading' in my category box...

mtimber -

The CSS rules you mention are already in the stylesheet_categories_dressing.css file included in the mod folder. All you need to do is, in some cases, remove the comment marks /* */ from around the rule. Be sure to remove them in pairs as shown; anything else will cause trouble. Some of the rules are already active and need nothing done.

Anything to be added to your stylesheet can usually be put at the end of the file, or else just below related rules. If the exact location matters, I will say so, as will most mod writers. Just don't put a new rule in the middle of another one.

And to get up to speed quickly on the basics of how PHP and CSS work, you can go to https://www.w3schools.com. They have comprehensive tutorials starting from the beginning.

rooisnor -

The "Heading 1" and "Link Heading" are coded in different places in tpl_categories.php. You need to change the right section. If you want the Link Heading to go away, add comment marks // in front of the appropriate line as described in the readme.

gjh42:

mtimber -

The CSS rules you mention are already in the stylesheet_categories_dressing.css file included in the mod folder. All you need to do is, in some cases, remove the comment marks /* */ from around the rule. Be sure to remove them in pairs as shown; anything else will cause trouble. Some of the rules are already active and need nothing done.

Thank you, I went back and followed the instruction again and it all works now.

Thank you for taking the time to help :-)

Mark

Hello :-)

I could do with some help please.

I have set up this mod, but would like to do the following.

When top category is selected, the sub category bullet changes.

I would like this to happen with the sub category and the sub sub category.

So that the arrow is pointing to ONLY the category or sub category the browser is looking in.

I do not know enough about css to write that, so could somebody please help me.

I would also like to get rid of the item number (30) (3) etc (or at least have it on the same line, but will wander the boards for an answer to that one...

Thank you,

Mark

Have figured out the number thing.

Line spacing also done.

Just need help with setting up the bullets as above.

Mark

I need alot of help. Can't get the number thing. And tere's a image over one of my categories I can't get rid of. There's also a heading one That apperared out of no where I can't get rid of. Also My Sub Menu's I know How to style but I can't get them in a list not side by side in the example. HELP!!!!!!

All of your questions but the last are explicitly answered in the readme.html that came with the download.
The numbers are controlled in Configuration > My Store > Show Category Counts.
For subcategories, it sounds like you may have lost one of the display: block; properties in stylesheet_categories_dressing.css.
Post a link to your site so I can tell for sure.

Can anyone help with the code for the bullets please?

As post above.

Here's a link to the site:

http//:https://www.nineandup.com/Store

Replace this whole section in your stylesheet_categories_dressing.css```
/* bullet for top categories & links:*/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links {
display: list-item;
list-style: disc inside url(../images/bullet1.gif);
}

/change bullet when a category is open to subs:/
a.category-top-text .category-subs-parent {
display: list-item;
list-style: square inside url(../images/bullet2.gif);
}

/bullet for subcategories:/
/*
#categories a.category-subs-text, #categories a.category-products-text {
display: list-item;
list-style: circle inside url(../images/bullet3.gif);
}
*/
with this
/invisible placeholder bullet for top categories & links:/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, a.category-top-text .category-subs-parent , #categories a.category-links {
display: list-item;
list-style: disc inside url(../images/pixel_trans.gif);
}

/bullet for current top category with products:/
a.category-top-text .category-subs-selected {
list-style: disc inside url(../images/bullet1.gif);
}

/bullet for current subcategory with products:/
#categories a.category-products-text {
display: list-item;
list-style: circle inside url(../images/bullet1.gif);
}

Massilla -

Your /includes/templates/your_template/images/ folder is loaded with these demo images by Cat Dressing:
bullet1.gif
bullet2.gif
catbg25.gif
catbg25hover.gif
catbghover.gif
catimg3.gif

Delete catimg3.gif and the catbg gifs.

It looks like you have sorted the subcat display.

Thanks that worked like a charm. The only thing that's not right is the sub, sub headings have a huge gap in between the bullet and the sub cat. Also it's sort of indented to the right by about 5 pixels. How can I get it to stay flushed with the rest of the category headings? Also how can i get the dividers back? when I removed the image and added your code my divivders were also removed.

For the dividers, I think you had added a border-bottom or similar property to one of the rules I mentioned, which was eliminated in the replacement. If you have a record of what you did originally, you can go back and add that property to the rules you have now, or perhaps to a new rule.

Admin > Configuration > Layout Settings has lines that control things like the subcategories indent. Make records of what they are now and try changes, like deleting the   spaces.

gjh42:

Replace this whole section in your stylesheet_categories_dressing.css```
/* bullet for top categories & links:*/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links {
display: list-item;
list-style: disc inside url(../images/bullet1.gif);
}

/change bullet when a category is open to subs:/
a.category-top-text .category-subs-parent {
display: list-item;
list-style: square inside url(../images/bullet2.gif);
}

/bullet for subcategories:/
/*
#categories a.category-subs-text, #categories a.category-products-text {
display: list-item;
list-style: circle inside url(../images/bullet3.gif);
}
*/
with this
/invisible placeholder bullet for top categories & links:/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, a.category-top-text .category-subs-parent , #categories a.category-links {
display: list-item;
list-style: disc inside url(../images/pixel_trans.gif);
}

/bullet for current top category with products:/
a.category-top-text .category-subs-selected {
list-style: disc inside url(../images/bullet1.gif);
}

/bullet for current subcategory with products:/
#categories a.category-products-text {
display: list-item;
list-style: circle inside url(../images/bullet1.gif);
}

Hello Glen :-)

I am a little confused.

I have copied the css from the original stylesheet_categories_dressing.css to my stylesheet (the parts I have needed to use) and deleted that stylesheet_categories_dressing.css file.

This is the code I now have at the bottom of my stylesheet.css:

/* bullet for top categories & links:*/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links {
    display: list-item;
    list-style: disc inside url(../images/bullet1.gif);
    }
	
/*change  bullet when a category is open to subs:*/
a.category-top-text .category-subs-parent {
    display: list-item;
    list-style: square inside url(../images/bullet2.gif);
    }

/*bullet for subcategories:*/

#categories a.category-subs-text, #categories a.category-products-text {
    display: list-item;
    list-style: circle inside url(../images/bullet1.gif);
    }

This gives me the red pointing down arrow for the top category (graphics not text bullets), and then the side point arrow for the sub categories.

What I am trying to do is, everytime the side arrow is selected it changes to a drop down arrow.

This is to happen in the top categories and ALL the sub categories.

Does that make sense?

I really apprecieate you taking the time to help me :-)

Mark

OK, I had the impression that you wanted an arrow only for the one selected (sub)category. The behavior you want should be possible; I'll have to get some info from my files when I get back home late tonight.

gjh42:

OK, I had the impression that you wanted an arrow only for the one selected (sub)category. The behavior you want should be possible; I'll have to get some info from my files when I get back home late tonight.

Thank you for your help :-)

Mark

Sorry, it appears it will not be possible to correctly include that functionality with the present code. It's not just a matter of adding some more class tags; partly due to IE6 browser limitations, the class tags have to be added to different elements, so there would be multiple arrows on some subcategories.
The code really needs to be approached from a different direction to be efficient and effective with this functionality.

I have been considering ways to revamp the mod, but don't expect to change it until after v1.4 comes out, as that may affect the codebase.