Categories Dressing

Hi Glenn
Ive been using the categorie dressing addon and it works a treat. Ive seen another add on called horizontal links with drop down or something like that. I would like the ezpages header function which comes under the header in a horizontal bar. I would like to customise this and was wondering if this can be done through the mod created by you.

Thought i'll ask before checking any other mod out

Categories Dressing only applies to the categories sidebox. Some of its styling methods could be modified to apply to other elements, but this would have to be done on a case-by-case basis.

Quote:

---

Originally Posted by gjh42

Your case is actually very simple, and you don't need to mess with groups at all. Setting the top cats to be hidden in categories_dressing_defines.php means that you will want to move the entire remaining content of the box to the right-side position. You will also want to disable or hide the subcategory links on pages that are not subcat listings.

---

Hey Glenn:

Thanks so much for your help thus far. adding extra tabs is similar to adding sideboxes to the header - you just reference the FILENAME. I'll remember that.

Can I impose further? How do I make my vision come true? I've poured over your readme and the define lang file from your mod, I simply don't get it.

Here's what I envision:

• On the category index page, I want to hide the currently visible sub categories and position the side box next to some image. I want the side box to show all sub category levels. NOTE: i have layout Grid and column divider pro installed. So in Yarn, should show up like this:

By Brand
Be Sweet
Chuckanut Bay
Commonwealth Yarn
etc.

By Fibre
Cotton
Mohair
Wool
etc.

• I don't want the box showing on the sub category pages or product pages
• the sub categories currently visible below the DIV box in Yarn category page should be hidden. If I comment out the code from tpl_index_categories.php, sub category pages are affected.

My aim is to simplify the design, leave a lot of white space, but not sacrifice usability. it should be very intuitive. Any suggestions is much appreciated.

Thank again for your time.

You want the subcats of the current top cat all showing at once, so you will need to install the Uncollapsed Categories Tree mod, which works with Categories Dressing. See the discussion with Limelites above.

I also note that you have set the category links to float left. What was the intention here? The effect is to make them bunch up on one line where they are short enough to fit. Do you really want that?

#categories ul ul li { float: left;}

I'll address the subcat and other page display issues later.

Quote:

---

Originally Posted by gjh42

You want the subcats of the current top cat all showing at once, so you will need to install the Uncollapsed Categories Tree mod, which works with Categories Dressing. See the discussion with Limelites above.

I also note that you have set the category links to float left. What was the intention here? The effect is to make them bunch up on one line where they are short enough to fit. Do you really want that?

#categories ul ul li { float: left;}

I'll address the subcat and other page display issues later.

---

sorry about the float left. I put it in when I was tinkering with another idea and forgot i had it in. I've removed it. I will check out Limelites' posts.

ok, im sure this has to do with my image proportions, and is prob. in the 68 pages before this, but could not locate anything with a thread search...

i know that ive gotten the categories dressing *almost* right, because it is showing a place for the image now, just not showing the actual image.

www.customk9design.com/catalogzen

to experiment, i have only changed the 1st category "edannas" so far.

my images are in the includes/templates/darkness/buttons/english folder, and are named:
catbg2.gif and
catbg2hover.gif (no uppercases)

the top of my css categories dressing file is:
(i have not changed anything, other than inserting your code... also, because my image is 27px high, i did change the 24px to 28, then 30... still no change



/**
* CSS Stylesheet for Categories Dressing examples
* @copyright Copyright 2009 Glenn Herbert
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.gnu.org/licenses/ GNU Public License V3.0
* Categories Dressing v2.6 Glenn Herbert (gjh42) - 20090128
*/
/*
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*/
}
#categories li a.catBg2 {
background-image: url(../images/catbg2.gif);
height: 30px;
}

#categories li a.catBg2:hover {
background-image: url(../images/catbg2hover.gif);
}

.catBoxHeading1 {
font-family: georgia, serif;
font-weight: bold;
font-size: 1.4em;
color: #335511;
background-color: #ff66ff;
/*background-image: url(../images/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
/*height: 23px; */ /*uncomment to use background image without coded text*/
padding: 0.3em 0.4em;
margin: 0;
}

The specific page rules you show are probably being overridden by the general rules, because you have put the specific rules at the top of the file. They should go after this line in stylesheet_categories_dressing.css:

/*individual page rules go after the general rules*/

moved, but still not showing the image...

i noticed some stuff near the top that mentions "uncomment to use"... am i supposed to do something there??

also, is the ".catCount {color: #000000;}" supposed to remain?
and why do the examples still remain after deleting them here...?

thanks. youre exceptionally patient!!



/**
* CSS Stylesheet for Categories Dressing examples
* @copyright Copyright 2009 Glenn Herbert
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.gnu.org/licenses/ GNU Public License V3.0
* Categories Dressing v2.6 Glenn Herbert (gjh42) - 20090128
*/
/*
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: 1.4em;
color: #335511;
background-color: #ff66ff;
/*background-image: url(../images/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
/*height: 23px; */ /*uncomment to use background image without coded text*/
padding: 0.3em 0.4em;
margin: 0;
}

.catBoxHeading2 {
font-family: 'times new roman', serif;
font-weight: bold;
font-size: 1.4em;
color: #335544;
background-color: #ffaaff;
/*background-image: url(../images/catheadbg2.gif); */ /*uncomment to use background image with or without coded text*/
/*height: 23px; */ /*uncomment to use background image without coded text*/
padding: 0.3em 0.4em;
margin: 0 0 2px 0;
}

.catBoxHeading3 {
font-family: 'comic sans ms', sans-serif;
font-weight: bold;
font-size: 1.2em;
color: #336699;
background-color: #ffbbdd;
/*background-image: url(../images/catheadbg3.gif); */ /*uncomment to use background image with or without coded text*/
/*height: 23px; */ /*uncomment to use background image without coded text*/
padding: 0.3em 0.4em;
margin: 0 0 2px 0;
}

.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 categories*/
list-style: none;
background: none;
border: 1px solid #ffaa99;
margin: 0 0 0.4em 0;
padding: 0;
}

#categories ul a {/*top categories*/
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 {/*subcategories*/
list-style: none;
background: #ffeecc;
border: none;
margin: 0 0 0.4em 0;
padding: 0 0 0 1.3em;
}

#categories ul ul a {/*subcategories*/
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 {
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 {
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*/
}

/*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: #dd6633;
background: #ddeeff url(../images/catbghover.gif);
}

/* subcategory hover effects*/
#categories li li.cat-subs a:hover, #categories li li.cat-products a:hover {
color: #aa9966;
background: #ffb9ff url(../images/catbghover.gif);
}

/*individual page rules go after the general rules*/
#categories li a.catBg2 {
background-image: url(../images/catbg2.gif);
height: 30px;
}

#categories li a.catBg2:hover {
background-image: url(../images/catbg2hover.gif);
}
.catCount {color: #000000;}

There is a typo in the stylesheet - I forgot to change the example background image path from /images/ to /buttons/english/ when modifying the code to allow for multiple languages. So

Code:

---

/*individual page rules go after the general rules*/
#categories li a.catBg2 {
    background-image: url(../images/catbg2.gif);
    height: 30px;
    }

#categories li a.catBg2:hover {
    background-image: url(../images/catbg2hover.gif);
    }

---

should be

Code:

---

/*individual page rules go after the general rules*/
#categories li a.catBg2 {
    background-image: url(../buttons/english/catbg2.gif);
    height: 30px;
    }

#categories li a.catBg2:hover {
    background-image: url(../buttons/english/catbg2hover.gif);
    }

---

See the revised stylesheet I posted above (post 658).

Hello people,

I need some help here http://www.bionaturaldrops.com/. I want my categories:

1. To have a background colour as they do now but to fill the whole sidebox.
2. My seperators to go from end to end in my categories sidebox.
3. The hover effect to be of a different colour and also to highlight the whole space of the hovered category (enclosed in the two seperators) and not just highlight the name of the category.
4. When the category is selected the whole space to become highlighted and stay highlighted so the customer will know where he/she currently is in categories.

Sorry for the many "wants" that I have but I tried to search this thread for my answers but without success. Is there any other info I need to post? I am open to suggestions.

Thanks in advance!

http://www.bionaturaldrops.com/