Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Product listing - image style

Product listing - image style

Locked

Views: 2,199

Results 1 to 6 of 6
This thread is locked. New replies are disabled.
7 May 2007, 8:42 AM
#1
marknew avatar

marknew

Zen Follower

Join Date:
Oct 2005
Posts:
274
Plugin Contributions:
0

Product listing - image style

Hi,
I have made a border around the images on the products details page and want to add the same style to the images on the product listing pages. Does anyone know how to do that?

Product info pages
http://www.rosecliffe-arabians.com/straight_egyptian/index.php?main_page=product_info&cPath=2&products_id=13

Product listing pages
http://www.rosecliffe-arabians.com/straight_egyptian/index.php?main_page=index&cPath=2

Here's the style.
.additionalImages centeredContent back {
padding: 0.7em;
border: 1px solid;
border-color: #930000;
}

7 May 2007, 9:01 AM
#2
ryk avatar

ryk

Totally Zenned

Join Date:
Oct 2004
Location:
Southport, UK
Posts:
3,644
Plugin Contributions:
6

Re: Product listing - image style

#productListing IMG {padding: 0.7em;
border: 1px solid;
border-color: #930000;
}
7 May 2007, 9:02 AM
#3
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Product listing - image style

To do this you would attach the styles to **.productListing-data a img
**

You may also wish to take a look at
This page which is badly broken in FF and deal with the rather large number of validation errors that you have, which might explain the problem.

7 May 2007, 9:19 AM
#4
marknew avatar

marknew

Zen Follower

Join Date:
Oct 2005
Posts:
274
Plugin Contributions:
0

Re: Product listing - image style

Hey thanks Ryk and Kuroi for the fast reply.
I've added the style and it works great Thanks heaps! Kuroi, that page you saw is a big mes, i know but it's just a table in the product description, so easily fixed. Thanks again :-)

While I'm here i have another problem. On the details page, the additional images show below each other. I have set them to 2 per per row in admin.

I took out 'style="width: 50%' and fixed it but then uploaded an old file and i can't find it in the code now.

<div class="additionalImages centeredContent back" style="width: 50%;">
7 May 2007, 9:28 AM
#5
marknew avatar

marknew

Zen Follower

Join Date:
Oct 2005
Posts:
274
Plugin Contributions:
0

Re: Product listing - image style

Don't worry, I found it. in modules>my template>additional_images.php

Thanks again.

7 May 2007, 9:37 AM
#6
ryk avatar

ryk

Totally Zenned

Join Date:
Oct 2004
Location:
Southport, UK
Posts:
3,644
Plugin Contributions:
6

Re: Product listing - image style

Best way round this problem which occurs mostly in IE - and it applies to various other module files as well - is to find in additional_images.php (near line 70) the code similar to :

if ($num_images) {
  $row = 0;
  $col = 0;
  if ($num_images < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) {
    $col_width = floor(100/$num_images);
  } else {
    $col_width = floor(100/IMAGES_AUTO_ADDED);
  }

and replace it with

if ($num_images) {
  $row = 0;
  $col = 0;
  if ($num_images < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) {
    $col_width = floor(100/$num_images)-0.5;
  } else {
    $col_width = floor(100/IMAGES_AUTO_ADDED)-0.5;
  }