Back to Designing a Responsive Magento Website for $99

Styling the Cart – Buttons

 

“Access expert led videos & answers for less than £1 a day, with a 30 days money-back guarantee”

Howdy,

This is a Premium tutorial and available to Premium members only.

As a Premium member you’ll gain access to all the tutorials and courses like this one which go those extra steps.

Also being a Premium member gives you these extra perks:

  • Access to over 400 step-by-step video tutorials
  • Learn how to build a fully-responsive, mobile friendly Magento website for just $99
  • Access to WidgetChimp.com for free saving you up to £29.99 per month
  • Access to Premium Webinars & the Webinar Library
  • Talk with peers in the premium members only lounge in the forums

UnderstandingE Premium is now available. Click here to join.

Matt & Dave.

 

 

 

20 replies

Comments are only availaible for registered members.


    • Masoud Ilyas
      Masoud Ilyas says:

      Hi, i applied the fix in the tutorial above, but the hover over button colour change is not working. The button colour changes fine, but when i hover over the button it stays to my default black colour, even though i have changed the colour code in the css file. I have tried all the fixes listed below in the comments, and also Matts span fix. Can someone help me out regarding this problem.
      Regards
      Masoud

      Reply
  1. Adam Cowles
    Adam Cowles says:

    I can remove and replace the static blocks with the changes to the custom.css file just fine, but the button colours will not change to grey.

    Reply
  2. pete
    pete says:

    Also if you want to add a different hover colour:

    .cart-table .btn-continue:hover{
    background-color: #751b18;
    }

    .cart-table .btn-update:hover, .cart-table .btn-empty:hover{
    background-color: #751b18;
    }

    .cart .discount .buttons-set button.button:hover, .cart .shipping .buttons-set button.button:hover{
    background-color: #751b18;
    }

    Cheers
    Pete Martin

    Reply
  3. pete
    pete says:

    Hi – Ultimo must have changed how the buttons are done since this excellent tutorial – you need to add:

    .cart-table .btn-continue{
    background-color: #a72623;
    }

    .cart-table .btn-update, .cart-table .btn-empty{
    background-color: #a72623;
    }

    .cart .discount .buttons-set button.button, .cart .shipping .buttons-set button.button{
    background-color: #a72623;
    }

    This will colour the button surroundings with #a72623

    Cheers
    Pete Martin

    Reply
    • pete.donnelly75
      pete.donnelly75 says:

      I might have found a fix for this tonight. Works on Chrome, Safari and Android Browser at least. The span tags are causing the issue on the site and when I removed them from the css it worked just fine.

      Eg change from this:

      /* Cart – “Continue button” */
      #shopping-cart-table button.button.btn-continue.btn-inline span {
      background-color: #A3A3A3;
      }
      /* Cart – “Continue button” when Hovered on! */
      #shopping-cart-table button.button.btn-continue.btn-inline span:hover {
      background-color: #ED1495;
      }

      to this:

      /* Cart – “Continue button” */
      #shopping-cart-table button.button.btn-continue.btn-inline {
      background-color: #A3A3A3;
      }
      /* Cart – “Continue button” when Hovered on! */
      #shopping-cart-table button.button.btn-continue.btn-inline:hover {
      background-color: #ED1495;
      }

      Whaddya reckon?

      Reply
  4. Thorstein Nordby
    Thorstein Nordby says:

    Hi, when I edited one of these static blocks, I started messing around with the WYSIWYG-editor.

    Suddenly this CSS code no longer apply. How do I fix this?

    Thanks!

    Reply
  5. tranquefuller
    tranquefuller says:

    Hi Guys, I’m with catgirl, this code isn’t working. All it does is change the color around my text. I was able to get the blocks to hide only after removing the “/*” in front of the “display: none;”

    But none of the other code works as “advertised.” Do you have any updates available on this?

    Reply
  6. catgirl
    catgirl says:

    I copied and pasted the code but only the part of the button under the text changes to grey, the border around the text is still the original pink?
    I am using Ultimo 1.11.0.

    Reply
  7. clive
    clive says:

    Hi

    The hover doesn’t work in the custom css when viewed in Firefox, changing button span:hover to button:hover span works, but it then doesn’t work in chrome……grrrr

    Reply
    • Steve Latham
      Steve Latham says:

      This has been doing my head in too! Especially as the buttons DO work when you hover before putting Matts CSS mod in. Trying to find a straight answer on the Google was impossible. So after rolling my sleeves up…

      Viewed the cart page source HTML.
      Figured design_yoursitename_en.css looked like a good candidate
      Found the CSS for a button.
      Looks like it has my Ultimo theme settings for the colours so must be in the right place!
      Hmmmm, syntax looks a little different to me!

      I have also added CSS to change my text colour. Hopefully this displays ok and helps others

      /*
      * Cart Buttons
      * —————————
      * Note: These override the standard button colours
      */

      /*
      * Updated with Steves Fix to make this work in Firefox
      */

      /* Cart – “Continue button” */
      #shopping-cart-table button.button.btn-continue.btn-inline span {
      color: #000000;
      background-color: #E5E5E5;
      }

      /* Cart – “Continue button” when Hovered on! */
      #shopping-cart-table button.button.btn-continue.btn-inline:hover span{
      color: #c5ff14;
      background-color: #333333;
      }

      /* Cart – “Update Shopping Cart” button */
      #shopping-cart-table button.button.btn-update.btn-inline span {
      color: #000000;
      background-color: #E5E5E5;
      }

      /* Cart – “Update Shopping Cart” when Hovered on! */
      #shopping-cart-table button.button.btn-update.btn-inline:hover span {
      color: #c5ff14;
      background-color: #333333;
      }

      /* Cart – “Get a Quote” button */
      #shipping-zip-form button.button span {
      color: #000000;
      background-color: #E5E5E5;
      }

      /* Cart – “Get a Quote” when Hovered on! */
      #shipping-zip-form button.button:hover span {
      color: #c5ff14;
      background-color: #333333;
      }

      /* Cart – “Apply Coupon” button */
      #discount-coupon-form button.button span {
      color: #000000;
      background-color: #E5E5E5;
      }

      /* Cart – “Apply Coupon” when Hovered on! */
      #discount-coupon-form button.button:hover span {
      color: #c5ff14;
      background-color: #333333;
      }

      Reply
      • Steve Latham
        Steve Latham says:

        I should have made it clear.

        DONT modify design_yoursitename_en.css

        Just put the amended code in to

        skin/frontend/ultimo/child/css/custom.css

        Reply
      • stitchfactory
        stitchfactory says:

        I know it was around 18 months ago when you posted this but just wanted to thank you. It saved some head scratching!

        Reply