Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Product image layout in centrebox - this must be easy?

Product image layout in centrebox - this must be easy?

Views: 664

Results 1 to 7 of 7
3 Sep 2011, 10:39 AM
#1
4lex avatar

4lex

New Zenner

Join Date:
Aug 2011
Posts:
16
Plugin Contributions:
0

Product image layout in centrebox - this must be easy?

Hello all. I'm struggling with trying to centre the two column layout of products I have in the centrebox, using ZC 1.3.9h and the classic template. As it stands they're left justified, I just want them in the middle!

I'm thinking it must be this part of the stylesheet:```
/The main content classes/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents,

.categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch,

.centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}
/.content,/ #productDescription, .shippingEstimatorWrapper {
/font-size: 1.2em;/
padding: 0.5em;
}


Appreciate any help :)

Alex
3 Sep 2011, 10:56 AM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Product image layout in centrebox - this must be easy?

In a stock Zencart installation, they are centered (if I understand the question). (see www .stevesh.org) Can you provide a link to your site ?

3 Sep 2011, 12:00 PM
#3
4lex avatar

4lex

New Zenner

Join Date:
Aug 2011
Posts:
16
Plugin Contributions:
0

Re: Product image layout in centrebox - this must be easy?

I don't want it visible just yet, please excuse my not linking it.
Cleansun dot co dot uk slash shop
Thanks for your help :)

3 Sep 2011, 12:58 PM
#4
eentje avatar

eentje

Zen Follower

Join Date:
Jan 2009
Location:
The Netherlands/Germany
Posts:
144
Plugin Contributions:
4

Re: Product image layout in centrebox - this must be easy?

If you are talking about the images being left... try adding:

.centerBoxContentsNew img {
margin-left: auto;
margin-right: auto;
}

to your stylesheet

3 Sep 2011, 12:58 PM
#5
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Product image layout in centrebox - this must be easy?

Ah, the New Products listing.

Add something like this to the bottom of your stylesheet:

.centerBoxContentsNew img {margin: auto;}

A couple of hints:

Stop everything and create your custom template and move the files you've edited already into those folders. You'll lose everything at your next upgrade if you use the Classic template.

Your product images are waaaay too big (file size, not dimensions, though they're a little big that way, too) and your site loads very slowly as a result. Rule of thumb is that the main (smallest version) of the product image be <10kb.

3 Sep 2011, 1:03 PM
#6
4lex avatar

4lex

New Zenner

Join Date:
Aug 2011
Posts:
16
Plugin Contributions:
0

Re: Product image layout in centrebox - this must be easy?

thank you both, will try shortly. Yes, aware that the images are too big, i'm intending to re size them all prior to launch.

3 Sep 2011, 1:26 PM
#7
4lex avatar

4lex

New Zenner

Join Date:
Aug 2011
Posts:
16
Plugin Contributions:
0

Re: Product image layout in centrebox - this must be easy?

.centerBoxContentsNew img {margin: auto;}
``` worked a charm, many thanks.

I thought about the custom template thing briefly, and then thought I didn't want to upgrade anyway. I think you're right though, I should do it right. Going off in search of a guide to creating a custom template now.

Thanks again for your help.