Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Additional images spacing

Additional images spacing

Views: 631

Results 1 to 4 of 4
1 Dec 2011, 11:26 PM
#1
logicalstep avatar

logicalstep

New Zenner

Join Date:
Jan 2011
Posts:
44
Plugin Contributions:
0

Additional images spacing

Hi all,

I've been busy getting my site up and running and it's all live, however I never managed to solve a problem I'm having with the additional images.

I have zen light-box installed.

And I've had to change the following code to stop my images spreading about over the page.

if ($num_images < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) {
$col_width = floor(36/$num_images); // Changed to reduce width between Additional images on products page
} else {
$col_width = floor(36/IMAGES_AUTO_ADDED);
}

This is inconsistent between additional images. and ideally I'd like to not have to touch this code and just use CSS to align all my additional images to the left and just add some padding, but nothing I do to the CSS seems to have any affect on the additional images!

Please help, about to start going grey over this.

I'm going to mess up my domain so hopefully it doesn't get indexed.
B
Site:h**p://www. ristolfashion.co.uk

Example of images too close:
B
Site:h**p://www. ristolfashion.co.uk/index.php?main_page=product_info&cPath=6&products_id=9

Example of erratic spacing:
B
Site:h**p://www. ristolfashion.co.uk/index.php?main_page=product_info&cPath=1&products_id=36

Any help is appreciated. Thanks in Advance.

Logicalstep

2 Dec 2011, 12:34 AM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Additional images spacing

You have a stray quote mark in the margin line which will invalidate the padding declaration. The capital M may not be a problem, but it would be more consistent to keep it lowercase. And there is a typo in the padding declaration.

You can override the auto-set width by adding !important to a stylesheet declaration.

.additionalImages { /*Changes padding and spacing between additional images on product page*/

float: left;
Margin: 0.1em 0.1em 0.1em 0.1em; '
padding: 0.1em 0.1em 0.1em 0.1;em 

}

.additionalImages { /*Changes padding and spacing between additional images on product page*/
width: 15% !important;
float: left;
margin: 1.1em 2.1em 0.1em 0.1em; 
padding: 0.1em 0.1em 0.1em 0.1em; 

}
2 Dec 2011, 10:10 PM
#3
logicalstep avatar

logicalstep

New Zenner

Join Date:
Jan 2011
Posts:
44
Plugin Contributions:
0

Re: Additional images spacing

Thanks for the quick reply.

Your right some silly mistakes there, I think that was from me doing changes too late last night rather than then being the cause.

I have replaced it with the code you suggest, but the Padding and margin still don;t seem to have any affect.

When I change the 15% it has an affect.

It seem more consistent, but still look strange on some products, specifically: /index.php?main_page=product_info&cPath=8&products_id=7

Any more ideas?

I could adjust the php of the 15%, but that won;t change the padding having no affect.?

Thanks in advance.

Logicalstep

3 Dec 2011, 12:02 AM
#4
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Additional images spacing

When I change the margin and padding in Firebug, they have the expected effect.

stylesheet.css (line 1182)

.additionalImages {
float: left;
margin: 1em;
padding: 1em;
width: 15% !important;
}