Grid 3 Layout

Developers Frontend
1

I want to be able to use the 3 grid layout, however to make it look right I need to move the product title and price to below the thumbnail.



Being a complete novice and beginner, I would appreciate your help. :wink:



Thanks



[url]http://213.175.196.220/~mainhost/index.php[/url] - does look too good right now

2

This should help you:

[url]http://forum.cs-cart.com/showthread.php?t=13142&highlight=grid+view[/url]

3

The code didn’t work, it deleted the whole grid?

4

Looks like “product grid” is the way to go. You’ll need to adjust some css to align descriptions to the left"



.multicolumns-list .center {

text-align: left;



Maybe will be better just change the class “.center” to “.left” in the tpl file that control the product grid view. I can’t tell right now.

5

[quote name=‘colortone’]Looks like “product grid” is the way to go. You’ll need to adjust some css to align descriptions to the left"



.multicolumns-list .center {

text-align: left;



Maybe will be better just change the class “.center” to “.left” in the tpl file that control the product grid view. I can’t tell right now.[/QUOTE]



Which template?



/skins/my_skin/customer/blocks/product_list_templates/products_grid.tpl



Code:



{* $Id: products_grid.tpl 11191 2010-11-11 11:56:01Z klerik $ }

{* template-description.products_grid **}



{include file=“blocks/list_templates/products_grid.tpl”

show_trunc_name=true

show_sku=true

show_rating=true

show_old_price=true

show_price=true

show_clean_price=true

show_add_to_cart=$show_add_to_cart|default:true

show_list_buttons=true

but_role=“action”

separate_buttons=true

no_pagination=$no_pagination}

6

This is for 2.1.4 CE (Friendly note: never trust any advice blindly, backup your files first)



in /skins/basic/customer/blocks/list_templates/products_grip.tpl, line 30








It requires change only 1 word:




This is only for the “product grid” view layout.

results.png

7

Colortone,



Thanks for the advice and thankfully I had backed everything up.



I have made the change and the layout remains the same.



Using Firebug I changed the HTML code by adding a and that worked a treat, but I’m not sure how to do this in CSS



Thanks

8

I’ve managed to do it, but need to line the text and price up centrally.



Any help would be apprecaited.

9

By default, “product grid” layout, place the image up and the text below centered. the adjustment I pointed earlier, move the text and price to the left ( I thought that is what you’re looking).

But If you want centered, just use the product grid by default, without any adjustments.

10

In order to centralise prices and product names, I replaced the code:



{assign var=“name” value=“name_$obj_id”}

{$smarty.capture.$name}







with this one:



{* [mink] }

{assign var=“name” value=“name_$obj_id”}

{$smarty.capture.$name}







{ [/mink] *}

in the “grid_list.tpl” file in the “skins/your_skin/customer/blocks/list_templates” directory of your CS-Cart installation

11

[quote name=‘The Joker’]In order to centralise prices and product names, I replaced the code:



{assign var=“name” value=“name_$obj_id”}

{$smarty.capture.$name}







with this one:



{* [mink] }

{assign var=“name” value=“name_$obj_id”}

{$smarty.capture.$name}







{ [/mink] *}

in the “grid_list.tpl” file in the “skins/your_skin/customer/blocks/list_templates” directory of your CS-Cart installation[/QUOTE]



Nice one thanks:D



Hey that Phil Taylor picture for your live help icon really cracks me up lol



JOhn

12

[quote name=‘johnbol1’]Nice one thanks:D



Hey that Phil Taylor picture for your live help icon really cracks me up lol



JOhn[/QUOTE]



:stuck_out_tongue: That’s on our old cart, can’t seem to get to sit right on the CS Cart