Categories Dressing

[gjh42]

OK, you do actually have a full complement of categories, even though you have hard-coded all of the links (leading nowhere) in one heading define for category 92. The question I still have is why you do not want to let the system dynamically link to the categories.

For the setup you have now, of course you are unable to distinguish between the different groupings - you have used the same heading class numbers for each type of link. You could do something like this if you want the groups to have the same colors and borders (changes from your current define in red):

define ('CAT_BOX_HEADING_92','1|0|||
<a href="">DVD</a>|2t|<a href="">Blu-Ray</a>|2|<a href="">English Manga</a>|2|<a href="">Books & Magazines</a>|2|<a href="">Apparel</a>|2| ... |2|<a href="">Wall Scrolls</a>|2|<a href="">Toys & Figures</a>|2b|

Top Manufacturers|3|
Electronics|1|
<a href="">Acer</a>|2|<a href="">Apple</a>|2|<a href="">BlackBerry</a>|2| ... |<a href="">Pentax</a>|2|<a href="">Samsung</a>|2|<a href="">Sharp</a>|2|<a href="">Sony</a>|2|<a href="">Sony Ericsson</a>|2|
<a href="">Toshiba</a>|2b|

Collectibles|4|
<a href="">ADV</a>|2|<a href="">Alter</a>|2| ... |<a href="">Viz Media</a>|2|<a href="">Yamato USA</a>|2b|

Other Departments|3|
<a href="">Best Sellers</a>|2|<a href="">New Releases</a>|2|<a href="">Coming Soon</a>|2|<a href="">Clearance</a>|2|<a href="">Promotions</a>|2b|');

In your stylesheet:

.catBoxHeading2t, .catBoxHeading3, .catBoxHeading4 { /*top link or heading in a group - top & side borders*/
    ...
    margin: 0;
    padding: 0.3em 0.4em;
    border-top: 1px solid #ffaabb;
    border-left: 1px solid #ffaabb;
    border-right: 1px solid #ffaabb;
    }  

.catBoxHeading2, .catBoxHeading1 { /*middle link in a group - side borders only*/
    ...
    margin: 0; /*no top or bottom margins so the borders touch the neighboring borders*/
    padding: 0.3em 0.4em;
    border-left: 1px solid #ffaabb;
    border-right: 1px solid #ffaabb;
    }  

.catBoxHeading2b { /*bottom link in a group - side & bottom borders*/
    ...
    margin: 0;
    padding: 0.3em 0.4em;
    border-left: 1px solid #ffaabb;
    border-right: 1px solid #ffaabb;
    border-bottom: 1px solid #ffaabb;
    }

[Berserker]

Hello,

Thanks for the reply.
I have categories made in admin but they will not show in the left column (using hidecategories) as I will move them to the top. As far as I know, this module will not work if there are no categories showing in the left column so I specifically made "Weekly Special" just to make it work. If im wrong on this, please correct me.

Im doing your changes and will report back.

Thanks

[Berserker]

Have made the changes and even though havent done it properly yet, it's looking like it will work.
Just one problem though, I do not have borders on the category that is making this to work (Category 92 = Weekly Special).
I left the changes on the site so you could check.

[gjh42]

Take the 2b off the "Promotions" link and return it to 2, then add #catGroup92 .cat-top to the rule for the box bottom:

.catBoxHeading2b, #catGroup92 .cat-top { /*bottom link in a group - side & bottom borders*/


I still don't understand why you think it is better to hard-code the links in the sidebox, but if this works for you and I don't have to maintain it, I guess it doesn't matter.

[corditreasures]

Hello Sir Glenn,

I think i need your help again..

its about categories dressing mod css..

I thought i modified the css perfectly but its showing wrong in IE.

the bullets in IE is different in FF. In FF its looking great but in IE the bullets are too close to the categories. I tried editing the css file but i can't get it working..

any idea how can i correct this? Thanks....

heres my stylesheet_categories_dressing.css

/**
 * CSS Stylesheet for Categories Dressing examples
 * @copyright Copyright 2009 Glenn Herbert
 * @copyright Portions Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.gnu.org/licenses/ GNU Public License V3.0
 * /includes/templates/your_template/css/stylesheet_categories_dressing.css
 * Categories Dressing v2.7.3   Glenn Herbert (gjh42)   - 20090505
 */
/*
hr.catBoxDivider1 { 
    color: #aabbcc;
    }
*/

/*IE6 hacks*/
* html #categories li, * html #categories li a {
    height: 1em;/*fix IE6 whitespace bug*/
    background-image: url(../images/pixel_trans.gif);/*partially fix IE6 a block display bug*/
    }

.catBoxHeading1 { 
    font-family: georgia, serif;
    font-weight: bold;
    font-size: 1em;
    text-align:center;
    color: #FFD700; 
    background-color: #080808;
    padding: 0.3em 0.4em;
    margin: 0 0 2px 0;
    }


.catBoxHeading2 { 
    font-family: arial;
    font-weight: bold;
    font-size: .9em;
    text-align:center;
    color: #000000; 
    background-color: #c9c7b6;
    padding: 0.2em 0.3em;
    margin: 0 0 1.5px 0;
    }

.catBoxHeading3 { 
    font-family: 'comic sans ms', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    color: #336699; 
    background-color: #ffbbdd;
    }

.catBoxHeadingImg { 
    padding: 0;
    margin: 0;
    }

.catBoxSubtext1 {
    font-family:  'times new roman', serif;
    font-weight: normal;
    font-size: 1.2em;
    color: #669911; 
    background-color: #ffddff;
    padding: 0.1em 0.2em 0.1em 1.0em;
    }

#categories ul {/*top category lists*/
    list-style: none;
    background: none;
    border: none;
    margin: 0 0 0.4em 0;
    padding: 0;
    }

#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;
    }

#categories ul ul {/*subcategory lists*/
    list-style: none;
    background: none;
    border: none;
    margin: 0 0 0em 0;
    padding: 0 0 0 0em;
    }

#categories ul ul a {/*subcategories*/
    display: list-item;
    list-style: none;
    background: #none;
    border: none;
    margin: 0;
    padding: 0;
    }

/*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*/
    }

/*different bullet for links if desired*/
/*
#categories li a.category-links {
    list-style: disc inside url(../images/bullet4.gif);
    }
*/

/* top category hover effects*/
#categories li.cat-top a:hover {
    color: #000000; 
    background:  none;
    } 

/* subcategory hover effects*/
#categories li li.cat-subs a:hover, #categories li li.cat-products a:hover {
    color: #000000; 
    background: none;
    } 

/*individual page rules go after the general rules*/
/*example for individual category as bg image*/
#categories li a.catBg25 {
    background-image: url(../buttons/english/catbg25.gif);
    height: 30px;
    }



/*example for custom individual category styling*/
#categories li.cat-holiday a {
    border-top: 3px dotted #112233; 
    background-color: #aabbff; 
    color: #112233; 
    padding: 1em 0em;
    }

/*example for custom category group styling*/
ul#catGroup48 {
    border: none;
    background: #bbeeff; 
    position: relative;
    left: 0em;
    top: 0.2em;
    }


.catCount {color: #000000;} 

[corditreasures]

i found out i'm not just the only one having this issue.

http://www.kirkgateflowers.co.uk/

http://www.editricebahai.com/libreria/

http://www.hidguy.net/

http://www.venomousstangz.net/

these websites are using the mod and look at the bullets in IE its closer to the categories than in FF..

atlast! i found a website that looks good on both browser..

http://www.smokin-paint.com/

ahhh... i thought the bullet is similar in FF but theres a difference. It looks good in IE but if you look closer the bullets are not located exactly where its located in firefox.

I cleared cookies, cache and etc and still the same result.

I hope you can check this out.. thanks...

[Berserker]

Take the 2b off the "Promotions" link and return it to 2, then add #catGroup92 .cat-top to the rule for the box bottom:

.catBoxHeading2b, #catGroup92 .cat-top { /*bottom link in a group - side & bottom borders*/


I still don't understand why you think it is better to hard-code the links in the sidebox, but if this works for you and I don't have to maintain it, I guess it doesn't matter.

Are there other ways in having selected manufacturer links in the sidebox without having to create folders for them in admin?
And im just wondering, does this module only add other links above the defined category or can you add links below it as well? All the links I added are above but I would like to add some below if possible.

Thanks

[gjh42]

You can add text (including links) below a category by using the "subtext" feature, described in the readme.

You do have categories in admin for your manufacturers, at least of mobile phones. As you don't seem to have any products beside Acer phones entered yet, I have no way of seeing what other categories you do have. Do the "Top Electronics" manufacturers also have categories under something other than mobile phones? If so, a single link from the sidebox is not going to be able to show more than one type of those manufacturers' products. Do you have a definite flow worked out for how the sidebox links are going to connect to all the products they need to? I can't really advise on alternate setups without knowing your intentions. Anyway, I am currently in the last two weeks of preparation for a festival on my land, and shouldn't be spending much time on non-business stuff.
One suggestion I would make is to modify the manufacturers sidebox to show a list of names (I think there is a mod for this in Free Addons). This would be dynamic and free you from maintaining the hard-coded list forever. I think it would take care of showing all of a manufacturer's products, even if they are in different categories (I don't use manufacturers for my site, so am not sure of details).

[gjh42]

corditreasures - I think the differences you see are just the way the two browsers implement list displays, and there is nothing that can be done to alter them. IE seems to always give a few pixels more indentation on inside lists than Firefox. It is a small difference, and in most cases I don't think it really matters. In some cases it might actually matter, and then I would google something like "IE list indent" or similar keys to see if someone has solutions for it.

[corditreasures]

Hi! thanks for letting me know about it, don't know this really 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.

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...