how to put a line between categories?

gjh42:

Install Categories Dressing and follow the instructions in its readme to style it the way you want.

Glen,

Thank you for your reply! But, huh, where do I go to install cateogries dressings?

cameo

cameo:

Glen,

Thank you for your reply! But, huh, where do I go to install cateogries dressings?

cameo

Glen,

Nevermind I found the link to categories dressing.

cameo

lina0962:

I want to seperate categories with lines in the category sidebox, just like there is a line between "new products" and categories. How can I do that?

Also, I want to add a little triangle in front of each category. How can I do that?

Thank you very much for instructions!

Lina

I'm sorry, but I still can not figure this out. I'm not really good at css I'm just playing a guessing game with it.

Can someone please help me with:

1. The lines in the category sidebox.
2. The little triangle in front of each category.
3. The little dashes in front of each sub-cagegory.

If someone could just give me the codes and tell me where to put them I would really appreciate it.

And yes I installed Categories Dressing and as far as following the instructions :dontgetit

cameo

You do not have Categories Dressing installed now. You need that before you can get all of the styling you want. The "triangles and dashes" are standard for Cat Dressing, and you will get the lines by adding to your stylesheet```
#categories li.cat-top {
border-top: 1px solid #aabbcc;
}

Note - the dashes are actually standard to indicate a subcat open to products; general subcats get the "triangle" arrow, but this can be changed by editing the bullet filenames in the stylesheet.

gjh42:

You do not have Categories Dressing installed now. You need that before you can get all of the styling you want. The "triangles and dashes" are standard for Cat Dressing, and you will get the lines by adding to your stylesheet```
#categories li.cat-top {
border-top: 1px solid #aabbcc;
}

> 
> Note - the dashes are actually standard to indicate a subcat open to products; general subcats get the "triangle" arrow, but this can be changed by editing the bullet filenames in the stylesheet.

Glen,

I thought I installed Categories Dressing when I go to my cPanel and click on the following:

public_html/includes/templates/your_template/css/   

I see the stylesheet_categories_dressing.css 

Is this not correct?

cameo

You may have the stylesheet, but you do not have tpl_categories.php. Check that all of the mod files are there in your template folders.

gjh42:

You may have the stylesheet, but you do not have tpl_categories.php. Check that all of the mod files are there in your template folders.

Ok I think I'm dumb, stupid and retarded because I'm so confused. I have a pre-loaded Zen Cart and the only time I see

tpl_categories.php

is when I do this

/public_html/includes/templates/your_template/sideboxes/

Now, my question is the name and directory of the template that I have for my pre-loaded Zen Cart is called TemplateEditor, so where it says your_template should I do this

/public_html/includes/templates/TemplateEditor/

if so and when I do then I don't even see sideboxes all I see is

common
css
images
modules
templates
template_info.php

So, what am I doing wrong? How do I get tpl_categories.php?

cameo

gjh42:

You do not have Categories Dressing installed now. You need that before you can get all of the styling you want. The "triangles and dashes" are standard for Cat Dressing, and you will get the lines by adding to your stylesheet```
#categories li.cat-top {
border-top: 1px solid #aabbcc;
}

> 
> Note - the dashes are actually standard to indicate a subcat open to products; general subcats get the "triangle" arrow, but this can be changed by editing the bullet filenames in the stylesheet.

When you say I will get the lines by adding to my stylesheet 

Code:

#categories li.cat-top {
    border-top: 1px solid #aabbcc;
    }

Where do I add this at?

Here

/public_html/includes/templates/your_template/css/stylesheet_categories_dressing.css 

or here

 /public_html/includes/templates/TemplateEditor/css/defaults.css  ???? 

I tried both and neither one worked did not see lines.

And when I click to edit the stylesheet where does the code go?  I guessed and put it here

}
.sideBoxContent {
padding:0.4em;
}
#categories li.cat-top {
border-top: 1px solid #aabbcc;
}
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color:#FFFF33;
text-decoration:none;

I know that wrong's because it didn't work.  Dunno??

cameo

If your template is named TemplateEditor, you should change all of the your_template folders in Categories Dressing to TemplateEditor before you upload the files to your site.
How did you get a stylesheet named defaults.css? That name will never be used by Zen Cart's standard system. Either it is not actually doing anything, or you have some very customized code in your template designed to load that particular file.> /public_html/includes/templates/your_template/css/stylesheet_categories_dressing.css

or here

/public_html/includes/templates/TemplateEditor/css/defaults.css ????Neither of these will work for you. You need to move stylesheet_categories_dressing.css to /includes/templates/TemplateEditor/css/

Once you have the file in the right place, it will start to work.

gjh42:

If your template is named TemplateEditor, you should change all of the your_template folders in Categories Dressing to TemplateEditor before you upload the files to your site.
How did you get a stylesheet named defaults.css? That name will never be used by Zen Cart's standard system. Either it is not actually doing anything, or you have some very customized code in your template designed to load that particular file.Neither of these will work for you. You need to move stylesheet_categories_dressing.css to /includes/templates/TemplateEditor/css/

Once you have the file in the right place, it will start to work.

YAY it worked. :clap: Thank you so very much Glenn I really appreciate your help with this. Now I'm happy. :smile:

I dunno how I got a stylesheet named defaults.css it was already there.

I might be back with more How To questions. :D

Thanks again!

cameo

I went back and looked at it, and defaults.css starts with @import, so it is set up to be called by something else.

gjh42:

I went back and looked at it, and defaults.css starts with @import, so it is set up to be called by something else.

Ok, thank you.

cameo

I'm sorry to take over this thread with my own problem but it involves roughly the same issue.
w w w.L J S p o r t s.c a
If you go there, you will see near the bottom of the categories (on the left) the last category (Youth & Kids) and the CatBoxDivider directly underneath.
The problem is (as you may have noticed) that the CatBoxDivider is touching the last category and isnt spaced properly. I'm learning everything as i go so im not the best with css or php. I have been fiddling around with the "inspect element" plugin for google chrome but have not been able to do anything.

Any help would be appreciated. thank you

Well you could control it like this, which will take it out completely..
See what you think...

Add this to the bottom of your_template/ css/ stylesheet.css

#catBoxDivider {display:none;}

i know how to remove it, but i'm looking to just provide the spacing it needs to look proper

You can add to the #catBoxDivider {} rule
margin-top: 1.0em;
or whatever you want.