Swap Images via Mouseover or Click Add-on: how to add CSS Style?

Swap Images via Mouseover or Click Add-on:

http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=311

Is it possible to add some CSS Style attributes to additional images thumbnails in this add-on? (aligning them properly below the main image, setting border style, margin) The additional pics does not look good without some styling. If this possible, where to add the CSS rules?

It should be possible, but we can't give exact directions without seeing it live on your site.

You always add CSS rules in your stylesheet (/includes/templates/your_template/css/stylesheet.css).

gjh42:

It should be possible, but we can't give exact directions without seeing it live on your site.

You always add CSS rules in your stylesheet (/includes/templates/your_template/css/stylesheet.css).

demo site:
http://sunstream.isgreat.org/index.php?main_page=product_info&cPath=1_5&products_id=27

For some reason, image swap on Mouseover not work for me.
I want place additional images under the main product image, align additional images left, set 1px border around small images, and around product viewport.

Something like this
sample

Can the CSS rules be added into add-on itself?

Can the CSS rules be added into add-on itself?
No, you always add CSS rules to a stylesheet. It is possible to use inline styling, but not recommended.

gjh42:

Can the CSS rules be added into add-on itself?
No, you always add CSS rules to a stylesheet. It is possible to use inline styling, but not recommended.

Some add-ons have own CSS files. The Product Additional Images is feature of Zen cart itself, not the specific template? So, have to adjust template and css to arrange additional images like in above sample?

Yes, "a" stylesheet - can be the main one or an individual mod's stylesheet.

To get the additional images displayed just below the main image instead of at the bottom of the page, you first need to move the additional images block of code up in
/includes/templates/your_template/templates/tpl_product_info_display.php.
Then you can style #productAdditionalImages {} and .additionalImages {} as desired for fine-tuning.

gjh42:

Yes, "a" stylesheet - can be the main one or an individual mod's stylesheet.

To get the additional images displayed just below the main image instead of at the bottom of the page, you first need to move the additional images block of code up in
/includes/templates/your_template/templates/tpl_product_info_display.php.
Then you can style #productAdditionalImages {} and .additionalImages {} as desired for fine-tuning.

by individual mod's stylesheet you mean the additional one which belongs to my_template?

What is difference between #productAdditionalImages and .additionalImages?

Some idea why swap images via Mouseover not work?

Oops, I forgot I have set image swap via onclick event, sorry.

Does these thumbnails are controlled by id #productAdditionalImages or class .additionalImages ? What is difference between them?

In the default onMouseOver mode, clicking on additional images bring a popup window with the "large" version displayed, whereas this option not work for main product image. I want to make this on contrary, i.e. to disable popup option for additional images and enable it for main product image. How to implement this?

For that you need to talk to someone familiar with the mod's code.
#productAdditionalImages is the id of the whole additional images group, while .additionalImages is the class for each additional image.

"by individual mod's stylesheet you mean the additional one which belongs to my_template?"
Either your template's stylesheet, or a stylesheet just for the mod, which may be in your template's /css/ folder.

thanks a lot. Still one change: I want to move Products Description section below the Additional Product Images section(right after it). How to accomplish this correctly?

You already have that. If you want the add to cart above the description, move its code block up in the file also, either just before or just after the additional images, whichever you want.

I edited tpl_product_info_display.php template in
/includes/templates/template_default/templates/tpl_product_info_display.php

I moved Additional Product Images section to the top, and placed it right after the 'free ship icon' section:

....
<!--eof free ship icon  -->

<!--bof Additional Product Images -->
<?php
/**
 * display the products additional images
 */
  require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->
<br class="clearBoth" />

 <!--bof Product description -->
<?php if ($products_description != '') { ?>
<div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
<?php } ?>
<!--eof Product description -->

I added <br class="clearBoth" /> after the end of Additional Product Images section, since Product description text wrapped around images without it. Is this correct way?

I did not added <br class="clearBoth" /> after 'free ship icon' section: is this correct also?

What's correct is what works (as long as you don't create PHP or HTML errors in the process). If it is working well for you, that is all you need to do.

You could have done without the added
<br class="clearBoth" />
and just added to your stylesheet
#productDescription {clear: both;}

Either way works.

in default template after the 'Main Product Image' section goes 3 sections, 'Product Name', 'Product Price', 'free ship icon'. Does these 3 sections ('Product Name' ->'Product Price' ->'free ship icon') always will be displayed in one row, at the right side, irrespective of sections that will be located below them?

You can change their location a bit with style rules in the stylesheet, or move them in the file if you want them in a different part of the page.

gjh42:

You can change their location a bit with style rules in the stylesheet, or move them in the file if you want them in a different part of the page.
The currect location is OK. I just wanna make sure that these elements will always stay on the same positions/will not break #productGeneral layout after I placed 'Additional Product Images' right after the 'free ship icon' section. (I didn't want place 'Additional Product Images' just after the 'Main Product Image'section, as this moves Product Name and Price downwards, under the Additional Product Images).