Zen Cart Logo
Forums / Addon Sideboxes / Categories Dressing

Categories Dressing

Views: 531,646

Results 1,041 to 1,060 of 2,268
4 Nov 2009, 8:41 AM
#1041
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Categories Dressing

The heading widths are controlled in the stylesheet (stylesheet_chcategories_dressing.css in your case). You should rename stylesheet_categories_dressing.css to stylesheet_categories_dressing.bak, or delete it entirely, so it doesn't interfere with your styling.

Use negative left & right margins to pull the headings out to the full box width, and delete the width property.

You have used .catBoxHeading1 and .catBoxHeading2, when you really wanted both headings identical; put both selectors in the same rule and add xxx to the second rule to disable it. You can probably just delete the second rule.

.catBoxHeading1, .catBoxHeading2 { 
    font-family: "Lucida Grande", tahoma, verdana, arial, helvetica, sans-serif;
    font-weight: normal;
    font-size: 1.0em;
    text-align:center;
    width:100%; /*delete this line*/
    color: #ffffff; 
    background-color: none;
    background-image: url(../images/aqua/sidebox.gif);  /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
	display: block;
	padding:0;
    margin: 0 -5px 0 -15px;
	
    }

.catBoxHeading2xxx { 

You need to give all the categories sort orders in their editing page (Catalog > Categories/Products > edit category). Set the sort orders as you want them to line up in the sidebox.

4 Nov 2009, 8:45 AM
#1042
bluedragon avatar

bluedragon

New Zenner

Join Date:
Nov 2009
Location:
Cheshire, UK
Posts:
18
Plugin Contributions:
0

Re: Categories Dressing

Hi firstly this is my very first post, I have gone through the first 50 pages of the thread and apologise if this has been covered, but all I want to do is add a separate icon next to the text link for each category, I have installed what is a great mod and it works fine, I just want this last little bit sorted.

the site is at https://www.bluedragonmartialarts.co.uk

Thanks in advance. :smile:

4 Nov 2009, 9:16 AM
#1043
feng avatar

feng

New Zenner

Join Date:
Nov 2009
Posts:
40
Plugin Contributions:
0

Re: Categories Dressing

gjh42:

The heading widths are controlled in the stylesheet (stylesheet_chcategories_dressing.css in your case). You should rename stylesheet_categories_dressing.css to stylesheet_categories_dressing.bak, or delete it entirely, so it doesn't interfere with your styling.

Use negative left & right margins to pull the headings out to the full box width, and delete the width property.

You have used .catBoxHeading1 and .catBoxHeading2, when you really wanted both headings identical; put both selectors in the same rule and add xxx to the second rule to disable it. You can probably just delete the second rule.

.catBoxHeading1, .catBoxHeading2 {
font-family: "Lucida Grande", tahoma, verdana, arial, helvetica, sans-serif;
font-weight: normal;
font-size: 1.0em;
text-align:center;
width:100%; /delete this line/
color: #ffffff;
background-color: none;
background-image: url(../images/aqua/sidebox.gif); /uncomment to use background image with or without coded text/
/*height: 23px; */ /uncomment to use background image without coded text/
display: block;
padding:0;
margin: 0 -5px 0 -15px;

}

.catBoxHeading2xxx {

> 
> You need to give all the categories sort orders in their editing page (Catalog > Categories/Products > edit category). Set the sort orders as you want them to line up in the sidebox.

I got the header background showing up correct.
But i am not understanding how i can get my Our Murrini and Our Products to another spot in the sidebox.

I already gave my categories the correct sort order. And that is sorted correctly. It are just those 2 headers than are out of place :dontgetit
4 Nov 2009, 9:30 AM
#1044
feng avatar

feng

New Zenner

Join Date:
Nov 2009
Posts:
40
Plugin Contributions:
0

Re: Categories Dressing

i think i did it :clap::clap::clap:

1 last question. If you have a look at the sidebox. You will notice there is a bit more space between OUR BLENDS and teh first sub category INTRODUCTION SALE

How can i have that moved up a bit. So it looks like the others :)

Thank you so much!!!!

4 Nov 2009, 9:50 AM
#1045
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

Add to your stylesheet```
#chcategoriesHeading {margin-bottom: 0;}

#chcategoriesContent {padding-top: 0;}

4 Nov 2009, 9:56 AM
#1046
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

bluedragon - Would you like to replace the red arrows with your icon, or have the icon in addition to the arrows? Do you want the icon for subcategories too, or just top cats?

4 Nov 2009, 9:58 AM
#1047
feng avatar

feng

New Zenner

Join Date:
Nov 2009
Posts:
40
Plugin Contributions:
0

Re: Categories Dressing

gjh42:

Add to your stylesheet```
#chcategoriesHeading {margin-bottom: 0;}

#chcategoriesContent {padding-top: 0;}


Thank you glenn

I have 1 last question. ( Sorry for being such a pain )

What if i would like to keep the white space in between OUR BLENDS and INTRODUCTION SALE

and also want this white space between :
Sparkle Blends - OUR MURRINI -Murrini Blends
and between:
Murrini Blends - OUR PRODUCTS -Furnace 

I tried changing it from 0 to 1 but that did not do the trick
4 Nov 2009, 10:08 AM
#1048
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

Add a bottom margin to the .catBoxHeading rule:

margin: 0 -5px 10px -15px;

If you just do this, there will be too little space above the new headings, so also add a top margin:

margin: 10px -5px 10px -15px;

Adjust to taste.

4 Nov 2009, 1:28 PM
#1049
bluedragon avatar

bluedragon

New Zenner

Join Date:
Nov 2009
Location:
Cheshire, UK
Posts:
18
Plugin Contributions:
0

Re: Categories Dressing

gjh42:

bluedragon - Would you like to replace the red arrows with your icon, or have the icon in addition to the arrows? Do you want the icon for subcategories too, or just top cats?

I want different icons for each category, just the top categories, not the subs, and replacing the red arrows altogether.

Thanks

4 Nov 2009, 5:47 PM
#1050
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

A different icon for each top category will require making each top cat "special" per the directions in the readme and in the comments in /includes/templates/your_template/sideboxes/tpl_categories.php.
Then you will have to duplicate the "bullet" styling for each special top cat class.

Change "list-item" to "block" here (delete red text, add green text):```
#categories ul ul a {/subcategories/
display: list-item block;
list-style: circle inside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
background: #ffddbb;
border: none;
margin: 0;
padding: 0;
}

#categories li a.cat-parent-text {
and its companions.

Add a rule for each special category, in the 
/*example for custom individual category styling*/ 
section:```
#categories li.cat-special_style a {
    list-style: square inside url(../images/your_first_icon.gif);
    }
```Replace the red text with your custom names.

A note for you: Categories Dressing v2.8 is almost ready, and it has a simplified procedure for creating the special category classnames. If you can wait a week, I should have that posted (there is only a little bit of final editing left, but I am heading out of town on a business trip).


P.S. - since you are using the chcategories version, you will want to change all instances of #categories to #chcategories.
5 Nov 2009, 2:52 PM
#1051
bluedragon avatar

bluedragon

New Zenner

Join Date:
Nov 2009
Location:
Cheshire, UK
Posts:
18
Plugin Contributions:
0

Re: Categories Dressing

superb :-), only one tiny problem now the text for the category names flows underneath the icon for the category now onto 2 lines. Is there any way to get it not to go under the icon and flow only under the text itself???

5 Nov 2009, 3:39 PM
#1052
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

Changing "inside" to "outside" in list-style:
will take care of that.

You will then need to refigure left margins. Make configuring easier by altering the style property wording a bit:```
#categories ul a {/top categories/
display: list-item;
list-style: disc outside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
background: no-repeat;
border: none;
margin: 0 0 0 5.0em;
padding: 0;
}

For the individual category rules, make the rule apply only to the marker url:```
#categories li.cat-vouchers a {
    list-style: disc inside url(../images/cat1.gif); 
    padding: 0em 0em;
    }
/*change all individual cat rules as below*/
#categories li.cat-uniforms a {
    list-style-image: url(../images/cat2.gif); 
    }

If you want to improve the vertical alignment of the bullets and text, you will need to move the list styling from the <a> back to the <li>. This will not be difficult; let me know if you need help.

5 Nov 2009, 7:50 PM
#1053
bluedragon avatar

bluedragon

New Zenner

Join Date:
Nov 2009
Location:
Cheshire, UK
Posts:
18
Plugin Contributions:
0

Re: Categories Dressing

cheers Glenn, thanks for the help, but I am totally lost at the moment??? I tried changing to ouside url but lost the icons altogether then changed it back as it was. I think i am out of my depth???

10 Nov 2009, 5:28 AM
#1054
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

You need to make all the changes shown in post 1051 to get the icons to work as desired. One at a time will make it messy.

13 Nov 2009, 9:15 AM
#1055
bluedragon avatar

bluedragon

New Zenner

Join Date:
Nov 2009
Location:
Cheshire, UK
Posts:
18
Plugin Contributions:
0

Re: Categories Dressing

Aha seem to have got it this time, just need to get it so that the text is aligned vertically with the icon rather than flowing onto another line below the level of the icon. Does this make sense??? So that the text and icon are level with each other vertically aligned centrally???

13 Nov 2009, 12:52 PM
#1056
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

"If you want to improve the vertical alignment of the bullets and text, you will need to move the list styling from the <a> back to the <li>."

#categories ul {/*top category lists*/
    list-style: none disc outside url(../images/bullet1.gif);
    background: none;
    border: none;
    margin: 0 0 0.45.0em 0;
    padding: 0;
    }

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

For the individual category rules, make the rule apply to the list item instead of the link:```
/change all individual cat rules as below/
#categories li.cat-uniforms a {
list-style-image: url(../images/cat2.gif);
}

There will be some other places you need to change along with these, following the same principle.
13 Nov 2009, 3:26 PM
#1057
bluedragon avatar

bluedragon

New Zenner

Join Date:
Nov 2009
Location:
Cheshire, UK
Posts:
18
Plugin Contributions:
0

Re: Categories Dressing

I have tried changing the bits as described, but no change in the vertical alignment has happened, all I got was a white space at the bottom of the categories box???

Is it actually possible to align the text with the centre of the icon vertically???

13 Nov 2009, 11:42 PM
#1058
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

Definitely not if you have two lines of text, and with the size of the icon I don't think it is going to align with a single line either. I will have to play with some positioning styling and see what can be done, but am heading out of town for the weekend.

14 Nov 2009, 6:57 PM
#1059
feng avatar

feng

New Zenner

Join Date:
Nov 2009
Posts:
40
Plugin Contributions:
0

Re: Categories Dressing

I have a problem :(

I just installed this on my other website, which is in 3 languages. I copied the categories_dressing_defines.php to reflect all languages.

And i wrote all teh headings in it.

It looks like this:

<?php
/**
 * 
 * @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
 * Categories Dressing v2.7.3  -  Glenn Herbert (gjh42)   - 20090505  
 * includes/languages/english/extra_definitions/your_template/categories_dressing_defines.php
 */

//example defines - copy & modify for each category desired
define ('CAT_BOX_HEADING_#','group|divider/class|[imgname]|[imgalt][|headcontent|headclass][|headcontent|headclass]...');
define ('CAT_BOX_HEADING_1','1|0||');//new list - no headings
define ('CAT_BOX_HEADING_9','1|0|||Supplies|1');//new list - text headings - multiple levels - styles 1 & 2
define ('CAT_BOX_HEADING_109','1|0|||Boro Glass|2');
define ('CAT_BOX_HEADING_2','1|0|||Education|3');
define ('CAT_BOX_HEADING_1','1|0|||Tools|4');
define ('CAT_BOX_HEADING_6','1|0|||Kilns|5');
define ('CAT_BOX_HEADING_141','1|0|||Members|6');
define ('CAT_BOX_HEADING_11','1|0|||Metals|7');
define ('CAT_BOX_HEADING_94','1|0|||Other|8');
define ('CAT_BOX_HEADING_7','1|0|||Soft Glass|9');
define ('CAT_BOX_HEADING_23','0|1|||none|2');//no list break - divider and text heading - style 2
define ('CAT_BOX_HEADING_33_34','0|0|||Subcat Heading|3');//simple text heading - style 3
define ('CAT_BOX_HEADING_48','1|0|cathead48.gif|Cat 48 Heading|Buy Now...|3');//image heading and alt text - can be followed by text heading(s)
define ('CAT_BOX_HEADING_52','0|1||');//divider only - style 1
define ('CAT_BOX_HEADING_53','0|2||');//divider only - style 2
define ('CAT_BOX_HEADING_FEATURED','0|0|||Featured Heading|3');//no list break - text heading
define ('CAT_BOX_SUBTEXT_23','Subtext for cat 23 escape apostrophe\'s|1');//subtext - style 1

//
//display only the active top category and its subs, hide top cats, hide sub-subcats, or any combination.
//only uncomment and set this define if you want to hide cats based on active tree or level
// 'active|highest_level|deepest_level'
//active: 0=all tops/1=full active tree only/2=active only (all tops when no cat selected)/
//3=full active tree, others per level/4=like 3, active branches only/5=like 1, no tops|
//highest_level: 0=all levels/1=no topcats/etc.|
//deepest_level: 1=only first subcats/2=first & second subcats/etc.
//
//define('CAT_BOX_ACTIVE_LEVEL', '0|1|9');//hide top cats
//define('CAT_BOX_ACTIVE_LEVEL', '1|0|1');//show only active cats, to first subcat level
?>

But when you go to the website it only shows the first 2 headings. What did i do wrong? http://www.fritenglas.eu/index.php?main_page=index&language=EN

Als the big spacing between Beadliner & Tools and Books

This is an excisting shop and i need this to be altered asap, please can i get soem help ( again ):cry:

14 Nov 2009, 8:10 PM
#1060
feng avatar

feng

New Zenner

Join Date:
Nov 2009
Posts:
40
Plugin Contributions:
0

Re: Categories Dressing

Never mind the above! However i have another strange problem.

I sorted all my sub categories as the should show in the categorie listing. As follows going from top to bottom of the listing:

Supplies
EyeWear (1)
Supplies (1)
Torches (1)

Boro Glass
Frit (2)
Murrini (2)
Rods (2)
Shards (2)

Education
Books (3)
DVD's (3)
Magazines (3)
Workshops (3)

Tools
Beadliner (4)
Electroforming (4)
Optic Molds (4)
Presses (4)
Tools (4)

Kilns
Kiln Supplies (5)
Paragon (5)
Uterm (5)

Members
Members (6)

Metals
Copper & Brass (7)
Silver - Gold - Palladium (7)

Other
Gift Vouchers (8)
Zirconias (8)

Soft Glass
Aventurine (9)
Enamels (9)
Frit (9)
Murrini & Millifiori (9)
Pixie dust (9)
Rods (9)
Sample packs (9)
Shards & Confettie (9)

But when you see the categorie listing it shows an ALL different thing.

As ou can see at this link http://www.fritenglas.eu/index.php?main_page=index&language=EN

How on earth is this possible. And more important how can i change it to my liking?

Thanks