Modifying how products are shown?

[ShanM]

Hi all! I'm currently tinkering with the Presta Shop Christmas Theme, the layout of my shop is almost identical to the demo here - http://xmas2010.prestaworks.se/category.php?id_category=3.

 

You'll notice that the products under the "Accessories" section are descending and each product's info takes up the width of the middle section.

 

Where/how would I modify the products so that they can appear side by side in a more square fashion? If I'm not making myself clear, I'm meaning something how this site has their products ordered - http://www.archiduchesse.com/

 

This default style simply wont work for the number of products I have to show.

 

Thank you

- Shannon

[ShanM]

Surely someone has had to edit the height and width parameters regarding their products?

 

Even a push in the right direction could be all I need. I have a decent basic knowledge of CSS.

 

Thank you!

[curtdonohue]

ShanM,

 

Do you know how to use Firebug (Mozilla Firefox plugin)? In addition to Firebug, there are other web development tools that will allow you to zero in on the location of the CSS for whatever your want to work on.

 

Here's a really good tutorial on how to use Firebug:

 

By the way, I don't think this is any simple task as PrestaShop is using a background image for the display of the accessories. You would need to delete that background image and create a new one, or delete it altogether and use divs to create your new container structure.

[ShanM]

ShanM,

 

Do you know how to use Firebug (Mozilla Firefox plugin)? In addition to Firebug, there are other web development tools that will allow you to zero in on the location of the CSS for whatever your want to work on.

 

Here's a really good tutorial on how to use Firebug:

 

By the way, I don't think this is any simple task as PrestaShop is using a background image for the display of the accessories. You would need to delete that background image and create a new one, or delete it altogether and use divs to create your new container structure.

Thank you very much for your reply Curt, I appreciate it!

 

I have heard allot of FireBug during my browsing hours for help. Google Chrome comes with an application that I think is quite similar, but I will certainly be looking into it.

 

As for the products under accessories, I've been able to modify the width that each product takes up, however I haven't been able to figure out how to align them next to each other. They are still ordered vertically.

 

I don't think I'm going to get the in depth CSS help I need here, so I am looking for some forums dedicated to CSS help. But, I would love it if someone does have an idea of what I can do to align the products how I need to though!

__________________________________________________________

 

Edit: I requested help on a CSS forum, and was given the solution! It is not perfect as there is a problem with the container not containing the over-flow, but hopefully I can get that fixed up as well.

 

I needed to add these two lines:

float: left;

margin-right:3em;

 

to ul#product_list li { in the product_list.css