Categories Dressing

[bluedragon]

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 www.bluedragonmartialarts.co.uk

Thanks in advance.

[FenG]

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

[FenG]

i think i did it

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

[gjh42]

Add to your stylesheet

#chcategoriesHeading {margin-bottom: 0;}

#chcategoriesContent {padding-top: 0;}

[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?

[FenG]

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

[gjh42]

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.

[bluedragon]

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

[gjh42]

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

Delete the list-style lines in
#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.

[bluedragon]

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