Page 1 of 1

Images in the category page

Posted: Wed Dec 24, 2008 11:54 pm
by Jacob
How do I control the position of the products on the category page?

I have been trying to edit this code on  page:

catalog/template/default/content/category.tpl

Code: Select all

<div class="products"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>"></a><br>
  <b><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></b><br>
  <?php echo $product['price']; ?></div>
I was thinking to create a new products div

Example:
Category
Classes

Product
    left column                            right column
Dance Mon Normal rate  -    Dance Mon Concessions rate

Dance Tue Normal rate    -  Dance Tue Concessions rate

And so on ...


Two columns one side N. rate the other C. rate

Thanks

Re: Images in the category page

Posted: Thu Dec 25, 2008 2:44 am
by bthirsk
You cloud also change The column width in default.css

.products, .images, .categories {
float: left;
width: 33.3%;  Change to 50%
text-align: center;
cursor: pointer;
font-size: 10px;
height: 140px;

Re: Images in the category page

Posted: Thu Dec 25, 2008 3:59 am
by Qphoria
bthirsk wrote: You cloud also change The column width in default.css

.products, .images, .categories {
float: left;
width: 33.3%;   Change to 50%
text-align: center;
cursor: pointer;
font-size: 10px;
height: 140px;

Yea, the way bthirsk described is how it it meant to be done
1 row - 100%
2 rows - 50%
3 rows - 33.3%
4 rows - 25%
5 rows - 20%
etc

Re: Images in the category page

Posted: Thu Dec 25, 2008 4:50 am
by Jacob
Ah, yes I see that % method for dividing the page, but it does not give you control of each individual image. If you notice in my example I have all Concessions on the left. I would also like to have the two columns with different bck grd colours to make the distinction clearer.

Do you get me?  ;D

Re: Images in the category page

Posted: Sat Dec 27, 2008 9:51 pm
by Jacob
Hello

Can I get any further help?

Thanks

Re: Images in the category page

Posted: Sat Dec 27, 2008 9:59 pm
by bthirsk
You would have to create custom coding to do this.
Maybe something like in the display loop, for every other item,
you would alternate CSS background or whatever other changes you need.

You just have to play with it to find what you need.
If you're on your own server, create a test site you can break.

Re: Images in the category page

Posted: Sat Dec 27, 2008 10:07 pm
by Jacob
Thanks

'display loop' ?

Could you give any suggestions as to which code/files to play with?

I am trying things here:
catalog/template/default/content/category.tpl

:)