Categories Dressing

Hi! thanks for letting me know about it, don't know this really :smile: i googled your suggestion but i can't find a solution for 0px margin or padding.

but the template i'm i currently have is using bullets but the developer does not use list indent instead he might used background??

here's the css code from you

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

here's the code from my template

.category-top, .category-links {
background-image: url(../images/point.gif);
background-repeat: no-repeat;
background-position: center left;
}

can we apply the second code instead? I tried to change it but the bullets won't show. :dontgetit

heres the sample of the template

http://www.zenflavor.com/demo4/

it looks good in FF and IE.

yap it matters to me because the bullets looks very close in IE and does not align with the bullets in the Information heading. thank you very very much...

Is it possible to have different categories images for each language? Like the buttons in language packs.

Yes. All images that are likely to include text are stored in /includes/templates/your_template/buttons/your_language/, and you can make a set for each language you use (in fact, you need to have a full set of them in each language folder).

corditreasures -
In #categories ul a {/top categories/
change display: list-item;
to display: block;
and add your background styling.

wow! That works wonder! :clap: Thank you very very much!

I think this is better to make it a background rather than list?

well anyway if someone is looking for this here's what i've done.

this is my old code

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

here's my new code

#categories ul a {/*top categories*/
    display: block;
background-image: url(../images/point.gif);
background-repeat: no-repeat;
background-position: center left;
}

again, thank you....

Regards :smile:

gjh42:

Yes. All images that are likely to include text are stored in /includes/templates/your_template/buttons/your_language/, and you can make a set for each language you use (in fact, you need to have a full set of them in each language folder).

I have both sets of language buttons stored in their respectives languages buttons directories.

But I came up with a problem. Since I'm using buttons with hover effects, I have to "declare" them in the stylesheet_categories_dressing.css file, and specify the path and names where the images are stored as explained in the help file. As a result, only one language directory can be specified, leaving the other language directory not specified in the stylesheet.

What is the solution for this?

autoace - Categories Dressing will affect the categories sidebox on every page unless you add special rules to limit it.

gjh42 - via category_dressing_defines, right?

Could you give me a simple example for the product listing page? Like only the 'active' category and its sub cats being displayed.

Your mod has awesome scope, still trying to get my head wrapped around ALL of it.

Cheo - You can have separate stylesheets for each language.

autoace - The rules would generally be in a stylesheet, not a PHP file. In short, you can add #indexBody in front of a copy of any style rule, and the different properties in that (like "display: none;") will apply only to "index" pages like category and product listings.

You could also modify the function cat_active_level_manage() in categories_dressing_functions.php.

Hello,

Glenn, how do I add links below the subtext? Is that possible?
And can I add a border to just 1 link? For example, the last link in the category box. I need to add a border-bottom without affecting the other links.

Thanks

You can add links as part of the subtext content, and use <br /> to put them on a new line. I've recently been trying to help someone who has put 20 or 30 links as "heading" content above one category.

You might need to do the "special category" mod to tpl_categories.php that is described in comments inside that file (part of the stock content). Then you can style this category with a border-bottom.

Glenn, I think that might have been me who has put 20+ links above one category. I reinstalled Zen-Cart so doing things from scratch again. Decided to just stick the category links in the category sidebox so no more hardcoded links there.

Ok, I have Category 21, and below this I have a Subtext that is acting as a Heading (I dont know other ways to have a heading below a category and I wont have any categories below so a Heading is not possible). Below this subtext, I would like to add some links that I can style using the stylesheet. I did what you said with the <br> but the links are just part of the whole subtext so I cant style them.

Also, I dont quite get what you mean about the special category mod. There are no other files. Im using version 2.7.3

Ah, right:)
You can add a <span class="subtextLink1"> </span> around each link
(or add the class to the link <a href="whatever" class="subtextLink1"> </a>)
and these links can now be addressed individually.

Did what you said but unfortunately, it does not work. Below is what I have in the define and stylesheet.
define ('CAT_BOX_SUBTEXT_21','Manufacturers
<br /><a href="/" class="subtextLink1">Link1</a>|1|');

.catBoxSubtext1 {background:#505050; color:#ffffff; font-family:tahoma, arial, helvetica, verdana; font-size:11px; font-weight:bold; margin-top:10px; padding:7px 0 7px 27px;}
.subtextLink1 {background:none; color:#ffffff; font-family:tahoma, arial, helvetica, verdana; font-size:11px; margin:0; padding:0;}

I also tried ".subtextLink1 a" but did not make any difference.

You might need
#categories .subtextLink1 {
to give it enough priority. A good way to tell if this is the case is to add !important in the property value. If it then shows, you just need more specificity or priority; if not, something is wrong with the way you have the rule written, or there is some error in your stylesheet.

That did work in a way but since I have padding on the CatBoxSubtext1, the links automatically have this padding as well even if I specify padding:0;.
Anyway, I think I'll just use a category instead and use that to get a heading and links.
Thanks for the help tho and for putting the time.

You can use negative margins on the sub-links to pull them back out and overcome the padding...

autoace - You can actually get the active category tree (only) displayed on category/product listing and product info pages, and all of the top cats on other pages, by a setting in categories_dressing_defines.php.

define('CAT_BOX_ACTIVE_LEVEL', '2|0|1'); //active only (all tops when no cat selected)

gjh42 - Thank you very much. Just not a lot of time currently to test and see all the capacity that your mod has. Absolutely great mod, hope to see it 'standard' in ZC 2.0!

I agree with autoace. This is definitely one of the very best mods there is.

I'm just wondering if you can help me figure seomthing out on https://www.silkblooms.co.uk as I'm planning to create a new major category called 'Hire Products'. How would I make it appear in bold underneath 'All Products' and above the seperator line so it is grouped together with 'New Products' and 'All Products'?

As you have already customized tpl_categories.php to show the new/all/etc. links above the categories instead of the standard location below the categories, and you want the new category between the links and the categories, not between two links, it should only require settings and not more code changes.

First, turn off the "Categories separator between links" in Configuration > Layout Settings (assuming this is still dynamic and not hard-coded into your new layout).
Then create your new category and set its order so it appears first in the list, and give the Weddings category a divider above it:

define ('CAT_BOX_HEADING_1','0|1||');//divider only - style 1