Categories Dressing

[giuly]

hello glenn
thanks for your reply via pm, ok I write here.
My site is
www_giocattoliamo_it
so
if you see I have divided the 3 groups of categories
categorie giocattoli
giocattoli in legno
giocattoli neonati

(in future I have to add a new group)

Now I would to know
how to disable bullet gif, because before are without gif on the various categories, and I wouldn't the effect when you click on a category (blue bar when I pass with mouse on 1 category)

and please I attach the previous css file, I would the same configuration (not the configuration of standard category dressing stylesheet).

previous css in zip file

Please and
thank you in advance
then I have another some questions (but are little bit)

[gjh42]

I have modified the stylesheet to do most of what you want. Replace your current stylesheet_categories_dressing.css with this:

/**
 * 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
 * Modified for giuly - gjh42 2009-10-24
 */
/*
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: #ffffff; 
    background-color: #ff66ff;
    background-image: url(../images/tile_back.gif); /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    padding: 0.3em 0em;
    margin: 0 -0.3em;
    text-align: center;
    }

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

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

.catBoxSubtext1 {
    }

#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: block;
    margin: 0.3em 0 0.1em;
    padding: 0;
    color: #006600;
    font-weight: bold;
    line-height: 1.0em;
    }

#categories ul ul {/*subcategory lists*/
    border: none;
    margin: 0 0 0.4em 0;
    padding: 0 0 0 0.3em;
    }

#categories ul ul a {/*subcategories*/
    border: none;
    margin: 0.3em 0 0.1em;
    padding: 0;
    font-weight: normal;
    }

/*change  bullet when a category w/o bg image is open to subs:*/
#categories li a.cat-parent-text {
    font-weight: bold;
    }

/*change  bullet when a category w/o bg image is open to products:*/
#categories li a.cat-selected-text {
    font-weight: bold;
    }

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

/* top category hover effects*/
#categories li.cat-top a:hover {
    color: #ff0000; 
    background:  /*#ddeeff url(../images/catbghover.gif)*/;
    } 

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

#categories li a.category-links:hover {
    color: #ff0000;
    }

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

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

/*example for custom individual category styling*/
#categories li.cat-holiday a {
    }

/*example for custom category group styling*/
ul#catGroup48 {
    }

.catCount {color: #000000;}

Then let me know what else you would like. Do you want the three boxes separate, or do you like them as is?


By the way, if you want the headings to look the same, you can use .catBoxHeading1 for all of them ( |1| in define).

[gjh42]

In the stylesheet above, I tweaked line-height and margins to set off category names that take two lines. This will indent the second line so the categories are even more distinct:
Add a text-indent and change margins as shown in these two rules.

#categories ul a {/*top categories*/
    display: block;
    margin: 0.3em 0 0.1em 0.5em;
    padding: 0;
    color: #006600;
    font-weight: bold;
    line-height: 1.0em;
    text-indent: -0.5em;
    }


#categories ul ul a {/*subcategories*/
    border: none;
    margin: 0.3em 0 0.1em 0.5em;
    padding: 0;
    font-weight: normal;
    }

[giuly]

thank you very much

I have adjusted like you say to me.

Now I would only
the three categories separated
and the possibility to add like head of category my image

and then i finished it.

Thanks in advance, you are very gentle.

[gjh42]

It's looking good!
To get the separate boxes, replace this in stylesheet_categories_dressing.css

#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: block;
    margin: 0.3em 0 0.1em;
    padding: 0;
    color: #006600;
    font-weight: bold;
    line-height: 1.0em;
    text-indent: 0.1em;
    }

#categories ul ul {/*subcategory lists*/
    border: none;
    margin: 0 0 0.4em 0;
    padding: 0 0 0 0.3em;
    }

with this

/*for category group boxes*/
#categories {
    border: none;
    border-bottomx: 5px solid #FF9900;
    margin-top: 1.5em;
    }

#categoriesHeading {display: none;}

#categoriesContent {
    margin: 0;
    padding: 0;
    background: none;
    }

#categories ul {/*top category lists*/
    border: 1px solid #FF9900;
    border-bottom: 5px solid #FF9900;
    background-color: #ffcc33;
    list-style: none;
    margin: 1.5em 0 0.4em 0;
    padding: 0.4em;
    }

#categories ul a {/*top categories*/
    display: block;
    margin: 0.3em 0 0.1em;
    padding: 0;
    color: #006600;
    font-weight: bold;
    line-height: 1.0em;
    text-indent: 0.1em;
    }

#categories ul ul {/*subcategory lists*/
    background: none;
    border: none;
    margin: 0 0 0.4em 0;
    padding: 0 0 0 0.3em;
    }

Change this in .catBoxHeading1 and .catBoxHeading2

    margin: 0 -0.3em;

to this

    margin: -0.3em -0.3em 0;

Make a new define in categories_dressing_defines.php for the top box heading

define ('CAT_BOX_HEADING_107','1|0|||Categorie giocattoli|1'); 

You will need to either make a heading for the "Promozioni ... Articoli in vetrina ..." box, or combine it with the "Giocattoli neonati" box.
To make a heading, add this define with the text you want

define ('CAT_BOX_HEADING_SPECIALS','0|0|||Your heading text|1'); 

Turn the divider off in Configuration > Layout Settings > Categories Separator between links Status >set to 0.
Making the box combine with the one above will be more complicated. Ask for directions if that is what you want to do.

Remove the divider above the Giocattoli neonati heading by editing its define to this

define ('CAT_BOX_HEADING_7','1|0|||Giocattoli neonati|1'); 

[gjh42]

the possibility to add like head of category my image

Could you explain what and where you want this to be?


Oops - I left a bit of stray code in my post above. It won't hurt anything, but would be better removed. Delete the line in red

#categories {
    border: none;
    border-bottomx: 5px solid #FF9900;

[gjh42]

Another typo to fix:

define ('CAT_BOX_HEADING_SPECIALS','0|0|||Your heading text|1');

should start with '1|0|||...

define ('CAT_BOX_HEADING_SPECIALS','1|0|||Your heading text|1');

[giuly]

I did all great and thanks
only 1 thing
it is remained a line bar under box giocattoli neonati

and for image I mean (like your image in demo files sale) to insert an image in way for example of title (giocattoli in legno).

Thanks to you in advance
and within tomorrow I will donate to you because this mod is great and because you are fantastic and very gentle.

Again thanks

[gjh42]

"Turn the divider off in Configuration > Layout Settings > Categories Separator between links Status >set to 0."
I guess you missed that among all the other instructions.

The site looks great! :)

[giuly]

yes I missed between your instructions, now it isn't anymore.

Very last thing, for the image like background of header of sidebox?

Then I really finished.
And sorry for the continue requests.

Thank you


but.....moment....tomorrow where can I donate to you? please...