Page 1 of 2 12 LastLast
Results 1 to 10 of 17
  1. #1
    Join Date
    Nov 2010
    Posts
    57
    Plugin Contributions
    0

    Default How to move the add to cart button to the left side?

    http ://walteholly.com/store/index.php?main_page=product_info&cPath=1&products_id=3

    How can I move the add to cart to the left side of the page?

    Thanks.

  2. #2
    Join Date
    Nov 2010
    Posts
    57
    Plugin Contributions
    0

    Default Re: How to move the add to cart button to the left side?

    How can I also align the picture to the left? It was on the left before, but it moved to the right. No idea how that happened.

  3. #3
    Join Date
    Feb 2005
    Location
    Lansing, Michigan USA
    Posts
    20,024
    Plugin Contributions
    3

    Default Re: How to move the add to cart button to the left side?

    #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
    margin: 0em 1em 1em 0em ;
    float:left;
    }

    Add the red part. If you don't want the other images on the left, separate the productMainImage into its own rule.



    #cartAdd {
    float: right;
    text-align: center;
    margin: 1em;
    border: 1px solid #FFFFFF;
    padding: 1em;
    }

    Change the right to left.


    This stuff is pretty easy to find if you:

    Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

    Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

    Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

    Some prefer Firebug, which does much the same thing.

  4. #4
    Join Date
    Nov 2010
    Posts
    57
    Plugin Contributions
    0

    Default Re: How to move the add to cart button to the left side?

    Help! I added image handler add on... but the pictures are out of alignment where do I find where to align them? I downloaded the webdeveloper addon for firefox and tried almost everything... but can't seem to find where to adjust those...

    htt p://walteholly.com/store/index.php?main_page=product_info&cPath=1&products_id=3

  5. #5
    Join Date
    Feb 2005
    Location
    Lansing, Michigan USA
    Posts
    20,024
    Plugin Contributions
    3

    Default Re: How to move the add to cart button to the left side?

    Add to your stylesheet:

    #productAdditionalImages {float:left; margin:8em 0 0 0;}

    #productAdditionalImages img {margin:0 1em 0 0;}

    Add the red part if you want space between the additional images.

  6. #6
    Join Date
    Nov 2010
    Posts
    57
    Plugin Contributions
    0

    Default Re: How to move the add to cart button to the left side?

    Hey, Thanks! It works!

    If I want to change the font size at the header and footer area,

    where About Us Privacy Policy Terms and Conditions Contact Us are...

    Do I also need to add additional css information because i tried changing alot of font sizes in the stylesheet but unable to customize the size for each individual(header and footer)... cause when i change the font size the middle categories fonts also change to the same size...

    Your help is greatly appreciated!

  7. #7
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: How to move the add to cart button to the left side?

    You need to use specific class or id selectors in the style rules, so that they apply only to the areas you want.

    The Web Developer's Information > Display Element Information button will show all of the class/id ancestors of an element so you know what to use.

  8. #8
    Join Date
    Nov 2010
    Posts
    57
    Plugin Contributions
    0

    Default Re: How to move the add to cart button to the left side?

    "You need to use specific class or id selectors in the style rules, so that they apply only to the areas you want."

    How do I do that if I have no knowledge of CSS? Can help me? Or where can I find information on that?

    Thank you.

  9. #9
    Join Date
    Nov 2010
    Posts
    57
    Plugin Contributions
    0

    Default Re: How to move the add to cart button to the left side?

    Hi, thanks I managed to move the additional images to the side.

    However, when I add more than 2 images, the images overlapped the Add to Shopping cart button.

    How do I aligned the 3rd picture below the 2nd picture so it looks like it's aligned in a column.

  10. #10
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: How to move the add to cart button to the left side?

    To get the additional images in a column:

    #productAdditionalImages {float:left; clear: left; margin:8em 0 0 0;}

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. PayPal Express Button Image -how do I get it to move to the right side, not the left?
    By Mike_Dean in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 14 Oct 2009, 04:46 AM
  2. How do I move the "add to cart button" closer to the price?
    By apples in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 1 Apr 2009, 11:42 AM
  3. how do i move/reposition the 'add to cart' button?
    By what44 in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 27 Oct 2007, 08:02 PM
  4. How to move the sidebox side ways. from left to more left? realy need help...
    By brekke00 in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 27 Aug 2007, 02:38 PM
  5. How to move BODY to the left side of the website.
    By williamL in forum General Questions
    Replies: 5
    Last Post: 3 Apr 2007, 06:44 PM

Bookmarks

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
Zen-Cart, Internet Selling Services, Klamath Falls, OR