Columns in Isotope

**Don** · 04/16/2013, 17:48

This is my first attempt using Isotope and was wondering how to get several columns for the product list instead of one.

When I created the module it has an option to "Enter a number of columns to display width-wise in the listing template." so I entered 4 expecting 4 columns in each row.

Obviously this didn't work.

Does this have to be done with CSS?
If it does where can I go to learn this or can someone help me out?

Thanks
Don

**Ruud** · 04/16/2013, 23:20

Not sure about this being "columnized" automatically, but you should inspoect the products classes. If you set column size to 4, then each forth column will have the class col_last, each 4th+1 will be col_first and many more handy column names (like col_0, col_1, col_even and everything for rows as well). With those you should be able to style the columns.

I couldn't find any col_ or row_ classes, so I guess this has to be done manually. I had not expected that, though it is hard to apply a general css that works for everyone...

**Don** · 04/17/2013, 16:09

Thanks Rudd

It worked great!

**Ruud** · 04/17/2013, 17:40

Ruud. Common English mistake!

**Don** · 04/17/2013, 20:42

Sorry for the error Ruud.

Thanks again for your help.

Can I ask you one more question?
How do you line up the thumbnails in the details page under the main image?

thanks for everything in advance.

**Ruud** · 04/17/2013, 23:44

Depends on your html. Need more info.

Usually some floating and positioning...

**Don** · 04/18/2013, 00:11

All I have done is take the Music Academy template and put the Isotope eCommerce module in it under the public_html/ file of my server.

This is my first time with Isotope and am trying to learn how to format it.
Do you know where I might find a tutorial or even a good class to take?

Any help you can offer is greatly appreciated.

Thanks in advance.

**Ruud** · 04/18/2013, 06:55

What you are trying to do has little to do with Isotope itself. Yes, because it is Isotope I know what the HTML looks like, but you are asking help with CSS. So, look at the HTML that is generated and construct the CSS you need based on that. All Isotope templates contain enough class names and id's for you to select elements from, and Contao by default allows you to add any id/class to any module/element.

Sorry, but I don't have any Isotope shop with thumbnail gallery and in the default template there is no container around the code that generates the thumbnail gallery (probably because the code generates the container). So I can't give you ready made code if you do not give me the html.

You should read up on CSS, otherwise working with Contao/Isotope might become frustrating. Knowing HTML/CSS I think is required, PHP is helpful.