[SOLVED] Sub categories display in grid?

[dixie]

Hello,

 

Is there a way to make the sub categories display in a grid, instead of a long list? Thank you for any suggestions.

 

I am using the latest PS with the new template.

[MyNawtyToys]

Here is a post about using it in the default theme, you will have to modify it to fit the new theme

 

http://www.prestashop.com/forums/topic/141303-free-prestashop-module-products-in-categories-as-list-or-grid-using-jquery/page__hl__grid

[dixie]

Thank you for the information. However, I don't know enough coding to feel comfortable installing that module. I only want to change the list of subcategory products to a grid view, not the actual products. I have some pretty large subcategory lists, so it would be great if I could get them displayed in a grid. Maybe the image will show what I mean.

 

Thank you!

[Snade]

This should be easy, just add width, float: left, padding and margin to the subcategory element, then add float left to the image and the name of the category. Probably the name will go under the image, if you want it on top, you should edit the tpl file.

 

Post url and I can give you exact code if you want

[jhnstcks]

http://www.prestashop.com/forums/topic/99248-change-sub-category-view-to-grids-instead-of-list-v14/page__fromsearch__1

[dixie]

Thank you Snade. That sounds like what I need. I'm not a coder, so if you could supply me with the exact code, that would be wonderful! Following is my website: stitchbin.com

 

Forget the previous, above. I got brave and tried it myself. It worked! Please check my site, if you like, then let me know if I did it correctly.

 

Thank you very much!

[Snade]

HI

Since your category with the most subcategories has 6, I made them 3 in a row.

Replace the code, upload some images to the subcategories, and youre good to go

 

Here is your code

.inline_list li {
border-bottom: 1px dotted #CCCCCC;
float: left;
height: 85px;
padding: 10px 0;
width: 178px;
}

.inline_list li .img {
float: left;
margin: 0 56px;
}

.inline_list li .cat_name {
float: left;
font-weight: bold;
text-align: center;
width: 178px;
}

 

Dont forget to add [sOLVED] in the topic name, and if my post was helpfull to you, feel free to "like" it Thanks

 

p.s.

your permanent links block is not in the right position, move it on top(go to modules->positions, hook top of pages, and drag it on top)

also, make some padding in the right column, it will be better if the content is in the middle of the column, not on left like it is now.

 

Merry Christmas

[dixie]

Thank you for the code. I will fix what I did. With the right column, I tried to add padding, but when I did things got mixed up -- the descriptions went under the images. How should I go about fixing that column? I wanted to fix it, but could not figure out how to edit the css.

 

You helping me is a great Christmas present! Merry Christmas to you, also.

[Snade]

try this for the pading

.block {
margin-bottom: 20px;
padding: 0 0 15px 15px;
}

.block h4 {
background: none repeat scroll 0 0 #FFF6E5;
border: medium none;
color: #9B0000;
font-size: 12px;
margin: 5px 0;
padding: 3px 0;
text-shadow: 0 1px 0 gray;
text-transform: uppercase;
}

 

play with it to make it look as you wish

if you want it to apply only to the right column, add it like this - #right_column .block h4 { ...

[asood]

HI there

 

kindly let me know in which file this code has to be inserted.

 

even i wanted grid like appearance for my subcategories in prestashop_new theme.

[asood]

ok i inserted it in global.css file. the images are ok but there is some allignment problem with the other button

"previous 1 2 3 next"

 

how do align them

[asood]

its done thanks...

[charlie123]

ok i inserted it in global.css file. the images are ok but there is some allignment problem with the other button

"previous 1 2 3 next"

 

how do align them

 

I have the same problem, how did you fixed it? Thanks

[asood]

I have the same problem, how did you fixed it? Thanks

 

Items should be added in the multiples of 3.

[miholz]

Items should be added in the multiples of 3.

I have the same proplem. What can i do when i have 4 or 7 items.

How do align them that 1.2.3.4 is in an new line under the images?

[jmthd]

ok i inserted it in global.css file. the images are ok but there is some allignment problem with the other button

"previous 1 2 3 next"

 

how do align them

 

I still don't see what the solution is to this part of the problem. Can anyone help?

[bside2234]

I added this to the themes global.css and it seems to auto adjust so I don't have to put a certain amount of items BUT I haven't been able to get the product name under the image yet so it looks a little funky.

 

/* simple list inline */

.inline_list { list-style-type: none; margin-top: 1em }

.inline_list li { float: left; text-align: center }

.inline_list img { display: block }

ul.half {

width: 45%;

margin-right: 1em;

float: left

}

 

I attached a picture of what I have so far

 

Never mind. I tried the code above in post #7 and the 3 rows actually works fine for me.

It would be nice to understand how to adjust it to more or less rows though for those of us who barely understand any of this.

Edited October 10, 2012 by bside2234 (see edit history)

[grafician]

lol, guys, not global.css, in themes/default/css/category.css, in my case is default, I work on default theme