Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Shopping cart "add to cart" button css help!

    I'm experiencing some difficulties understanding what is happening here:

    The green color and hover effect is being applied to the add to cart button on the products list page

    http://www.jkadengeart.com/gallery/

    but is not being applied to the add to cart button on the single product pages

    http://www.jkadengeart.com/gallery/p...n-prints-only/

    Also, when I do float:left, the button still remains flush right.

    Your help is very much appreciated.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    There's a difference because that's what your css is applying.

    On the product list page the button is green, from line 403 of jkadengeart.css:

    Code:
    #mp_product_list input.mp_button_addcart, .type-product input.mp_button_addcart, input.mp_cart_direct_checkout_link, #mp_shipping_submit, form.mp_buy_form .mp_adding_to_cart, .mp_cart_direct_checkout_link, .mp_link_buynow {
        background-color: #349936;
        background-image: -moz-linear-gradient(center bottom , #2F8C32 0%, #339937 100%);
        box-shadow: 0 1px 0 #2B7F2E inset;
        text-shadow: 0 -1px 1px rgba(27, 110, 29, 0.6);
    }
    but on the product page the colour is grey, from line 383:

    Code:
    #mp_product_list input[type="submit"]:active, input.mp_button_addcart, .type-product input[type="submit"]:active, .mp_cart_col_updatecart input[type="submit"]:active, .mp_cart_direct_checkout_link:active, #mp_shipping_submit:active, #order-id-submit:active, #mp_payment_confirm:active, .mp_link_buynow:active {
        background-image: -moz-linear-gradient(center bottom , #B2B2B2 0%, #A5A5A5 100%);
        box-shadow: 0 1px 0 #BFBFBF inset;
        text-decoration: none;
    }
    In both cases I've highlighted the selectors that are applying.
    If you want things green throughout then you'd need to amend your css. There are so many selectors in that statement that I'm loth to jump in and suggest amendments, but you could try amending line 403 to:

    Code:
    #mp_product_list input.mp_button_addcart, .type-product input.mp_button_addcart, 
    input.mp_cart_direct_checkout_link, #mp_shipping_submit, 
    form.mp_buy_form .mp_adding_to_cart, .mp_cart_direct_checkout_link, .mp_link_buynow, input.mp_button_addcart {
        background-color: #349936;
        background-image: -moz-linear-gradient(center bottom , #2F8C32 0%, #339937 100%);
        box-shadow: 0 1px 0 #2B7F2E inset;
        text-shadow: 0 -1px 1px rgba(27, 110, 29, 0.6);
    }
    That whole css seems unnecessarily complicated to me....

    On the float:left thing, it's floating right because the containing form is floated right via (line 14):

    Code:
    form.mp_buy_form {
        float: right;
    }
    Get rid of that and it'll align left.

    Have a look at using Firebug (see my sig) which is enormously helpful for identifying what css is being applied to a given element.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

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