switch product listings to a grid layout

I'm trying to customize my template...it's supposed to look like this: studiolaguna.com/portfolio/artists2.htm

Which file do I need to change to make a grid layout work? I'm running version 1.3. Also, any suggestions on what code changes need to be made?

I'm a bit of a newbie to zen...any help is greatly appreciated!!!:happy:

first thing you have to do is make a new tempate file, then copy
includes/templates/template_default/common/tpl_main_page.php
to
includes/templates/your_temp/common/tpl_main_page.php
then open that bit of code up to see how Zen aranges information and the 3 box layout.
then also copy the header and footer files and look how they work.
then you will see where zen places information.
then you will need to build a 4 cell table(or CSS), as follows:

<!--body table -->
<table class="yourtableclass">
<TR><TD colspan="2" name="header">
Header code
</TD>
</TR>
<TR><TD name="leftnav">
Left bar content
</TD>
<TD name="body">
Body code
</TD>
</TR>
<TR><TD name="footer" colspan="2">
footer contet
</TD></TR></table>

obviously enter the php from tpl_main_page to the spots you want it and change widths and lengths.

tpl_default_left holds the information for the left bars(the layout and whatnot)
change those files as you like and you will start to see how easy it really is to change everything.

Desopolis' suggestion, while useful information, is not what you need specifically.

What you're after is the "column/grid layout" mod ... which will be accessible for download shortly once our contributions area comes back online.

Meanwhile, I've attached it here.

Hey look everyone Doc is back... wondered where you were man

Thanks guys!

DrByte, I've copied the files from the column/grid system and followed the instructions provided, but now I'm just getting 1 column for all the pages. Is the grid system all CSS?

This is what it looks like after installing the grid layout:
http://www.studiolaguna.com/portfolio/productlistings.gif

I'm probably missing something obvious :huh: but I'm clueless as to knowing what i need to change.

thx,

are you wanting to have 3 or 4 columns instead of one??? is that your question?
if so all you do is go to admin/product listing/Product Listing - Columns Per Row and set how many ever columns you want.

yes, ultimately I want to have a 4x4 grid. I've tried controlling it through the admin with no success. I have it set to 4 right now, but changing it doesn't seem to make a difference. I've followed the instructions from the 'grid layout' a few times now, thinking it was some error I'd made...yet it's still not working. Any suggestions?

did you upload all the correct files in the right place and then go to tools/sql patches and copy and paste the code (provided in the download) there and hit send? when i did that. it worked perfectly and let me change the column numbers in the product layout place in admin

dang, i'm pullin my hair out trying to figure this out...has anyone else had this problem?
I followed the instructions step by step. Still no change. Do I need to add something to the stylesheet??? I've been using the ZenCss template as a base for my template...does anyone know if the grid layout is compatible with the zen css template?

liquidlead:

dang, i'm pullin my hair out trying to figure this out...has anyone else had this problem?
I followed the instructions step by step. Still no change. Do I need to add something to the stylesheet??? I've been using the ZenCss template as a base for my template...does anyone know if the grid layout is compatible with the zen css template?

I'm having the exact same problem. I've installed the mod as instructed, changed to 3 columns, but I still get 1 column. Something's not right.

***Edited

I found it. There's a second option I had to change from rows to columns.
Product Listing - Layout Style

Hi. I'm looking for the same thing but I'm running 1.2.7 still. Would this work or is there an older version of the same thing?

I would like to get this working with the product description next to the product image and then have either the add to cart button or a link to full product detail underneath. How can I do this so I have 2 colums of product each colum having image with short description to the right?

Thanks in advance.

MG

I can give you a littile advice but not step-by-step instruction.

So you have center column width for example 400px so you need small images width set to less then center width / 4 for example 80. Then you need to edit template files so you will output your products to <div></div> not tables. Then you should set width of this div using css classes also less then center width / 4 for example 90 and set "float: left" property. So you should add some css classes to your style****.

That's all :-).

CheekyCockney:

Hi. I'm looking for the same thing but I'm running 1.2.7 still. Would this work or is there an older version of the same thing?

Here you go.

Vera of Texas, you are one cool bean.

Quote: > Originally posted by Tim_B:

I found it. There's a second option I had to change from rows to columns.
Product Listing - Layout Style
:no: I wish my problem were that simple. I don't have any clue on what the deal is...I'm thinkin I'll have to build a table, as suggested by Desopolis. Or does anyone else have any suggestions??? They'd be greatly appreciated!!!!

You don't need to build a table you need a float: left in your stylesheet for the appropriate class.

Originally Posted by Kim: You don't need to build a table you need a float: left in your stylesheet for the appropriate class.

It worked, Hallelujah!!! Thanks!
:smile:

heh, one more question...
I finally got the grid system working, now how would I switch from a 2x4 grid to a 4x4 grid?

change from: to:

                           ****
                           ****

I think I'm slowly, very slowly, getting a hang of this Zen world :) Thanks everyone for your help!

This worked perfectly first time for me (1.2.7) but it looks a little off. Where I have long product names it messes up the alignment and things are not centered. Eg http://www.cotswood-doors.co.uk/catalog/external-doors-handcrafted-c-1_7_11.html Where are the tables generated so I can set them up to align properly? (Assuming this is the problem and it would even help)