Subcategories as grid

[Soesoe]

Hello everyone,

 

i'm working on a site, i'm not so experienced so i'm asking the prestashop community.

I have many subcategories and they are in a list-view so it's pretty long before it you scroll down and find the products in the main category.

 

I want to have them next to eachother per two subcategories, now it's listed per one subcategory

How can I do this?

 

Also, I now have all the categories and subcategories under home, but I want to have one category that shows all maincategories.

 

How can I do those things above?

the site is www.studsgroothandel.nl

 

Hopefully it's understandable

 

 

Thanks in advance

[NemoPS]

What about this?

 

http://mypresta.eu/en/art/developer/prestashop-subcategories-grid.html

[Soesoe]

Yea it looks great, but it didn't work out so well like in the example.

This is how it looks now: 

http://studsgroothandel.nl/index.php?id_category=10&controller=category

 

Do you have any idea what went wrong?

 

thanks

[Teapot Creative]

Hi

 

Add/Change this to your themes category.css file:

 

category.css line: 38

 

.inline_list li {

text-align: center;

float: left;

display: inline-block;

width: 96px;

height: 170px; /*changed*/

border: 1px dotted #ccc;

margin: 4px;

 

and this...

 

category.css line: 56

 

.inline_list li .cat_name {

font-weight: normal;

font-size: 14px; /*changed*/

text-transform: uppercase;

display: block;

margin-bottom: 5px;

font-family: 'Open Sans', 'Segoe WP', 'Segoe UI', Arial, Helvetica, sans-serif;

}

 

Should do it...

 

if you want them in two rows add this...

 

category.css line: 26

 

#subcategories {

margin-top: 15px;

clear: both;

display: block;

overflow: hidden;

width: 50%; /* added changed*/

}

 

NB.. as your site is responsive you will have to change these values dependant on screen size.

 

Nick

Edited February 14, 2014 by Teapot Creative (see edit history)

[vekia]

i think that just remove the float:left; from .inline_list li

if i were you i will also remove the dotted border:

remove border: 1px dotted #ccc; from .inline_list li

 

and just add height:50px; param to:

.inline_list li .cat_name

 

effect:

[Teapot Creative]

Hi

 

The effect of the above styling is as attached...

 

 

 

 

Without the category.css line: 26 styling it is as below:

 

 

 

 

 

NickC

Edited February 14, 2014 by Teapot Creative (see edit history)

[Soesoe]

i think that just remove the float:left; from .inline_list li

if i were you i will also remove the dotted border:

remove border: 1px dotted #ccc; from .inline_list li

 

and just add height:50px; param to:

.inline_list li .cat_name

 

effect:

Hello,

 

First, thank you alot for helping, also others.

 

As above it would look great. I just made the changes as you suggest.

It improved, but it only shows half of the subcategories name.

[Soesoe]

Hi

 

The effect of the above styling is as attached...

 

 

Screen Shot 2014-02-14 at 15.27.45.png

 

 

Without the category.css line: 26 styling it is as below:

 

 

Screen Shot 2014-02-14 at 15.30.59.png

 

 

 

NickC

 

Yea the second option would look great, i did some changes and it improved, just the text doesn't all the text

[Teapot Creative]

Hi

 

This bit of CSS should reveal the text:

 

category.css line: 38

 

.inline_list li {

text-align: center;

float: left;

display: inline-block;

width: 96px;

height: 170px; /*changed*/

border: 1px dotted #ccc;

margin: 4px;

 

Nick

[vekia]

+ clear: both; to .inline_list li .cat_name

 

 

im confused now i have no idea which method you use

[Soesoe]

 

Hi

 

This bit of CSS should reveal the text:

 

category.css line: 38

 

.inline_list li {

text-align: center;

float: left;

display: inline-block;

width: 96px;

height: 170px; /*changed*/

border: 1px dotted #ccc;

margin: 4px;

 

Nick

 

 

Perfect! Thanks alot, it's fixed now.

Thanks to you guys the result became nicer then I had in mind.