Line up the grid (block) of products better balanced page

Line up the block (grid) of products for a better balanced page
This tutorial shows how to symmetrical line up the array of products on the category page.
For a better balanced block array line up.

See: http://www.toonkamer-webshop.nl

First decide how much products you want on one line ( for me eight)
Then decide how much lines of products you want (for me 3)

Log in to your admin panel and go to configuration , shop design , select your shop , go to options and set the number ( items per page) (for me 3x8 = 24)

Log in to filezilla and go to catalog/view/theme/default/stylesheet/stylesheet.css

Find:
#container {
width: 980px;
The total with of your site is in this case 980 Pixels (I chanced mine to 1216)
Now find
.product-grid > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 15px;

130 px is the dimension of the box in which your images are placed.
Adjust: 130 px and margin right: 20 px till you have your perfect layout

(For me I changed it to 148 and margin right = 0px)

Log in to your admin and go to configuration , shop design , select your shop , go to images.
Change the dimension of your image till it fits well in the box.

Now the pull down button above the pictures is of no use anymore. You can remove it:
Go to admin/catalog/view/ theme/default/template/product/category.tpl
Find:

<div class="limit"><b><?php echo $text_limit; ?></b>
<select onchange="location = this.value;">
<?php foreach ($limits as $limits) { ?>
<?php if ($limits['value'] == $limit) { ?>
<option value="<?php echo $limits['href']; ?>" selected="selected"><?php echo $limits['text']; ?></option>
<?php } else { ?>
<option value="<?php echo $limits['href']; ?>"><?php echo $limits['text']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
And delete this part (after first coping it and saving it )



http://www.toonkamer-webshop.nl

1 Change text color , tekst size of description and price
http://forum.opencart.com/viewtopic.php ... 67#p610201
2 This tutorial shows how to change the menu layout , color ,background font size etc.
So you can adjust the menu to for example a tablet and make it better visible (larger text).
http://forum.opencart.com/viewtopic.php ... 12#p609626
3 This tutorial shows how to symmetrical line up the array of products on the category page.
For a better balanced block array line up.
http://forum.opencart.com/viewtopic.php ... 96#p603834
4 This tutorial shows how to put the product description price and so on next to the product image on the product page instead of under it.
http://forum.opencart.com/viewtopic.php ... 03#p603505
5 This tutorial shows how you can upload your images much faster than by ADMIN.
http://forum.opencart.com/viewtopic.php ... 38#p603647
6 This tutorial shows how to make a back up of your uploaded images. If by accident a map of images is lost you can easely restore them and do not have to one by one upload the images again.
http://forum.opencart.com/viewtopic.php?f=21&t=162242
7 This tutorial shows how to add text to your home page in different ways
http://forum.opencart.com/viewtopic.php ... 10#p603531
8 This tutotial shows how to remove the colorbox lay-out and leave only the picture.
(click on the picture for more or beside it to go back tot he product page.)
http://forum.opencart.com/viewtopic.php ... 35#p603227
9 Remove white space from Image white borders around images pop-up colorbox
http://forum.opencart.com/viewtopic.php?f=21&t=162244
10 This tutorial shows how to remove certain features you don't use in your shop
remove breadcrumb , remove title , remove image and category description , remove refine search , remove sort by name, date, price , remove compare , remove
http://forum.opencart.com/viewtopic.php ... 05#p603517
11 This tutorial shows how to make different background images on the different pages.
http://forum.opencart.com/viewtopic.php ... 26#p602451
12 Change layout of additional images breadcrumbs small picture
http://forum.opencart.com/viewtopic.php?f=21&t=162874
13 Simple structure of opencart how layout lay-out build up
http://forum.opencart.com/viewtopic.php?f=21&t=162872