Moving Additional Pictures

Hello,
I can't seem to get my additional pictures to the location I want.. I have included a picture of how I want the extra pictures to look

Here is a link to how the page currently looks, any help would be super!

Thanks!

http://www.alexandracassaniti.com/neoprene-bikini-bottom-c-90_191/bikini-bottom-p-173

Moving your additional images up or down on the product page may be an easier task for the forum.

However moving them to the left side in rows instead of the zc traditional columns may be worth submitting to the commercial forum for this involves a bit more coding.

Can be done though!

That really doesn't help me at all. I am looking to do it myself, not paying someone to do it.

I got this to work on my test site so I may be able to walk you through it. 1 step at a time.

open your
/includes/templates/CUSTOM_TEMPLATE/templates/tpl_product_info_display.php

find:

<!--bof Additional Product Images -->
CONTENTS_WITHIN
<!--eof Additional Product Images -->

move it below:

<!--bof Main Product Image -->
CONTENTS_WITHIN
<!--eof Main Product Image-->

now above <!--bof Main Product Image --> tag insert a ```

Once that is done I can give you the correct code (styles) to add to your stylesheet to bring it all together.

Okay, I did that.. only one question.. where do i add the &2
after I add the </div> ? or somewhere else?

& 2 <br class="clearBoth" />

so it will look like this:

</div><br class="clearBoth" /><br class="clearBoth" />

Ok, that is done.. I am ready for the css code.

ok here goes, in your /includes/templates/classic/css/stylesheet.css file:

find:

#additionalImages {
	clear:both;
	font-size:1.3em;
	padding-top: 15px;
	float:left;
	margin:0 0 0.5em 0;
	line-height:1.4em;
	text-transform:capitalize;
}

change to:

#additionalImages {
position:absolute;
top:160px;
right:0px;
width:225px !important;
font-size:1.3em;
padding-top: 15px;
margin:0 0 0.5em 0;
line-height:1.4em;
text-transform:capitalize;	
}

find:

#productAdditionalImages {
margin: 0;
padding:0;
float:left;
width:80%;
}

change to:

#productAdditionalImages {
position:absolute;
top:190px;
right:0px;
width:225px !important;
text-align:center;
}

find:

.additionalImages {
float:left;
}

change to:

.additionalImages {
width:225px !important;
}

find:

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	clear:both;
	margin:0px 150px 0px 5px;
		}

change to:

#reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	clear:both;
	margin:0px 150px 0px 5px;
		}

and add:

#productMainImage {float:left;width:500px !important;position:relative;}

Hope it works! Good luck

It works but I need to adjust it a bit, Any help will be awesome, thanks again!

smaller images?

for:
#additionalImages & #productAdditionalImages

change
right:0px;

to
right:50px;

& add:
padding-left:40px;

to
#productMainImage

@valansi,

I just hope you donate a little to Mr. Rb for all his time and help on this...

So, my final question is..I want to get the product attribute info, all on one line.. like so.... I know it has something to do with the CSS.. more possible the tpl_ product_info.. not sure..

Looking at the picture:

Just to clarify, you want the product attributes, cart qty and button all in a row (line)?

Yah, just how it is in the picture..

I will play with it on my test site - I will post changes to make if I can make it happen.

Thanks a million times!

I am attempting to follow the steps in this thread. I edited the "tpl_product_info_display.php" file and successfully moved my discription below my image.

I then prepared to edit the "/includes/templates/classic/css/stylesheet.css" file to move the additional images.
My stylesheet.css does not have the same text as your example. For instance, you say to find "#additionalImages {...". My file does not have that.

So I thought that maybe, since I have installed "Zen Cart Free Template 2", I should try the stylesheet.css in that template. I still do not find the exact item you specified, but similar. Mine is "#productAdditionalImages {
clear: both;
}", much less info then your contains.

So, my question is, are slight differences like this a sign that I am in the wrong place or am I in the right place?
I could send you the file if you like.

Darn it, there is not enough time allowed for editing a post.

I think I have the right file. Mine has all the stuff you specified except the first one..."#additionalImages {
...". Do I simply CREATE it?

Sorry for all the confusion.

sofasurfer:

Darn it, there is not enough time allowed for editing a post.

I think I have the right file. Mine has all the stuff you specified except the first one..."#additionalImages {
...". Do I simply CREATE it?

Sorry for all the confusion.

In most cases when editing a stylesheet, it will be site specific if the already original template (theme) has been altered.

All the ID's & Classes I use in my examples above are Zen id's and classes.

You may have to add some, but I am sure you will for sure have to alter the widths.

Once you have made all the changes, if it does not work post a link to your site, I am sure myself or someone can help you achieve that look.