1

I need CSS that I can place in my custom CSS file that will fix the "Discount Codes" and "Place Order" buttons on my checkout page.

I need to manipulate each button color separately (if possible) and change both button background color and background hover color.

At the moment the green standard color will not disappear. It should be all red with a white text and pink hover. No green background in the middle of the button.

Checkout page is using the Magento extension IWD One Page Checkout.

Go here, add product to page, and then checkout to see problem: http://www.petpresto.com.au/large-chicken-coop-with-run-metal-pull-out-tray-and-vermin-proof-wire.html

2
  • random: are you using ultimo theme .. ;-)
    – echoashu
    Oct 13, 2014 at 8:48
  • Yes this is Ultimo
    – TinyTiger
    Oct 13, 2014 at 23:18

3 Answers 3

3

So you have two buttons.

First one is for Discount Coupons:

<button type="button" title="Apply" class="button apply-coupon" value="Apply"><span><span>Apply</span></span></button>

It has class .apply-coupon and .button so you can style it however you want in your CSS files by making:

.button.apply-coupon {
/*Your styles go here*/
    }

The background that you see under the text is caused by line 167 in opc.css

.opc-wrapper-opc .discount-block .button span span {
background: #00909E;
color: #FFF;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 1px #02484F;
padding: 0 20px;
}

The span that's inside the button is styling text wrapped in the button with green background. Delete the span inside the button or add additional css like:

 .opc-wrapper-opc .discount-block .button.apply-coupon span span{
background:none !important;
}

The green background on:

<button type="button" title="Place Order" class="button btn-checkout opc-btn-checkout"><span><span>Place Order</span></span></button>

Is caused by the same style in opc.css but on line 216.

.opc-wrapper-opc .btn-checkout span span {
background: #00909E;
color: #FFF;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 1px #02484F;

You can change it by deleting that background-color for button or adding css:

.opc-wrapper-opc .btn-checkout span span {
background: none !important; 
}

P.S. Check your whole OPC.css file as I see more duplicated styles for that span wrapper in buttons (i.e. search your file for: background: #00909E;)

Edit:

Now on SPAN element:hover you're changing your background color to #f55 just like on button. But on button you added

transition { 
 color 300ms ease-in-out, background-color 300ms ease-in-out;
-moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; 
-webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out;
-o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out;

}

So you have to add same transitoin on span hovering as span is immediately changing color to #F55, while button is animating transition effect which occurs with 300ms later color change.

1
  • Check my answer after edit.
    – versedi
    Oct 14, 2014 at 6:00
1

Use this css for Change Button color

 #opc-discount-coupon-form .button.apply-coupon {
    background: none repeat scroll 0 0 grey ;
 }

 #review-buttons-container .button.btn-checkout.opc-btn-checkout {
     background: none repeat scroll 0 0 yellow;
 }

#opc-discount-coupon-form .button.apply-coupon span {
    background: none repeat scroll 0 0 grey !important;
 }

#checkout-review-submit .button.btn-checkout.opc-btn-checkout > span span {
    background: none repeat scroll 0 0 yellow !important;
 }
4
  • Thanks for the help, but that CSS has made no change :(
    – TinyTiger
    Oct 12, 2014 at 0:46
  • Actually it did work, but the middle of the button is still green. Any idea how to fix that?
    – TinyTiger
    Oct 12, 2014 at 21:26
  • I have change now my answer please check Oct 13, 2014 at 4:24
  • I have used a mix of both your and @versedi answers, and its almost done (jsfiddle of my solution: jsfiddle.net/u58ngqke). Only thing I cant figure out is my Purchase Order button. The entire button doesnt change all at once when hovered, middle part changes then the rest catches up. I need to remove the span background to fix this but I cant get figure out how. I fixed that problem on the Apply Coupon button, but applying same solution to Purchase Order button does not work.
    – TinyTiger
    Oct 14, 2014 at 4:49
0

Use FireFox and install the FireBug Ap. Start playing around with it. Watch a video or two and you will start to make sense of it. Also love chicken coops. Seems pretty great. Good Luck

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.