Moving Additional Pictures

[valansi]

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/ne...i-bottom-p-173

[rbarbour]

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!

[valansi]

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

[rbarbour]

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

<div>

and below <!--eof Additional Product Images --> tag insert a

</div>

& 2

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

[rbarbour]

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

[valansi]

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

[rbarbour]

& 2 <br class="clearBoth" />

so it will look like this:

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

[valansi]

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

[rbarbour]

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

[valansi]

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