Results 1 to 7 of 7
  1. #1
    Join Date
    Apr 2009
    Posts
    41
    Plugin Contributions
    0

    Default Newbie: How can I CENTER the Main Image on product description?

    ZC: 1.3.8a

    Please refer to my website: http://hugocruzgallery.com/shop/inde...&products_id=1

    I hope this is an easy answer for someone whom is more experienced. But I have searched high and low and added lines on the CSS but nothing seems to do what I am looking for. I am simply trying to center the MAIN IMAGE (like I centered the 'h1' Title).

    I have Firefox and Firebug and tried every CSS possibility (that I could come up with). I would really appreciate it if someone could tell me exactly what CSS line/command I need to enter and where (line number) it should be entered to do this?

    Thank you in advance.

  2. #2
    Join Date
    Apr 2009
    Posts
    41
    Plugin Contributions
    0

    Default Re: Newbie: How can I CENTER the Main Image on product description?

    Furthermore ...

    I am guessing it will be around line 856 in my stylesheet.css under #productMainImage img. If my assumption is correct then GREAT! However, I have no idea what CSS line/code would work to CENTER the main image. I have tried:

    vertical-align: center; (no change)
    text-aligh: center; (no change)

    Please let me know where I went wrong. Thank you.

  3. #3
    Join Date
    Apr 2009
    Posts
    41
    Plugin Contributions
    0

    Default Re: Newbie: How can I CENTER the Main Image on product description?

    Well, it looks like I answered my own question. Amazing what a little Googling can get you :-). It seems as though the correct CSS commands are:

    display: block;
    margin-left: auto;
    margin-right: auto }

    and I (or you) can add this to your main image heading (read my previous comment). Seems to work perfectly on my site.

    Yet, if any one with CSS experience sees a problem with what i did then please throw in your two cents. I will gladly accept any advice that comes my way.

  4. #4
    Join Date
    Apr 2009
    Posts
    41
    Plugin Contributions
    0

    Default Re: Newbie: How can I CENTER the Main Image on product description?

    EDIT UPDATE: I just noticed my image is NOT perfectly centered (perhaps about 25px too far to the RIGHT). AAAaaarrrgh!!! Anyone have any ideas or advice on how to CENTER this perfectly?

    Also, the CSS centering works on IE but Firefox still has the image LEFT aligned ... ????

    -- Thank you.

    Refer to: http://hugocruzgallery.com/shop/inde...&products_id=4
    Last edited by hugozc; 27 Apr 2009 at 06:25 AM.

  5. #5
    Join Date
    Aug 2006
    Location
    UK
    Posts
    449
    Plugin Contributions
    0

    Default Re: Newbie: How can I CENTER the Main Image on product description?

    You will need to edit your template file;

    \includes\templates\custom\templates\tpl_modules_main_product_image.php

    change the line;
    <div id="productMainImage" class="centeredContent back">

    to;

    <div id="productMainImage" class="centeredContent">

    removing the class "back" will stop the image being floated to the left.
    ~Steve~

  6. #6
    Join Date
    Aug 2006
    Location
    UK
    Posts
    449
    Plugin Contributions
    0

    Default Re: Newbie: How can I CENTER the Main Image on product description?

    Get yourself Firebug - an extension for Firefox... A great tool for troubleshooting CSS and Template issues.
    ~Steve~

  7. #7
    Join Date
    Apr 2009
    Posts
    41
    Plugin Contributions
    0

    Default Re: Newbie: How can I CENTER the Main Image on product description?

    s_t_e_v_e,

    THANK YOU! THANK YOU! THANK YOU!!!! You are the best! I cannot believe it was such a small edit (omitting the word "back"). Wow, the image is centered just the way I want it to be. I would have never come up with this solution on my own.

    I already had Firebug and web Developer for Firefox ... Yes, you are completely correct. They are great add-ons/tools for tinkering newbies, like me, to expert programmers.

    Thanks again!

 

 

Similar Threads

  1. How To Center Image on Product Description Page
    By dustisdesigns in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 10 Mar 2010, 05:35 AM
  2. How can I switch the image on the main product page to the right?
    By ttmb33 in forum Customization from the Admin
    Replies: 1
    Last Post: 28 Aug 2009, 12:02 PM
  3. How do I add Banner (Image) in the center column on the main page?
    By kubio in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 23 Mar 2009, 06:59 PM
  4. how do you place a image in the center of main page
    By graphx in forum Setting Up Categories, Products, Attributes
    Replies: 1
    Last Post: 17 Mar 2007, 03:02 AM
  5. Center the main product image
    By guitarslinger in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 5 Jun 2006, 09:06 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg