Page 1 of 1
How to change Product and Checkout page button colors
Posted: Thu May 02, 2019 10:04 pm
by wafflemeister
Hi,
I am running OC 3.0.3.1. I would like to change the colors of the 'add to cart' button as well as the buttons in the checkout process. Can someone point me to the exact entries in the stylesheet that would do this?
Thank you.
Re: How to change Product and Checkout page button colors
Posted: Thu May 02, 2019 11:06 pm
by straightlight
Unspecified if OP is using custom themes. Look at the class names of each DIV objects where those buttons are initiated until it leads you to the right location from your stylesheet.css file.
Re: How to change Product and Checkout page button colors
Posted: Fri May 03, 2019 12:52 am
by wafflemeister
I have the default theme. What I am specifically looking for is what color the 'Continue' buttons in the checkout process have when I press them. I see that it is the btn-primary that controls this but I have already changed it but it has no affect. I must be missing something.
Re: How to change Product and Checkout page button colors
Posted: Fri May 03, 2019 1:00 am
by cyclops12
As well as changing the background-color you may also have to remove/change the background-image
Re: How to change Product and Checkout page button colors
Posted: Fri May 03, 2019 1:11 am
by wafflemeister
This is what I see for default button
Code: Select all
.btn-default {
color: #522306;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #da9100;
background-image: linear-gradient(to bottom, #ffcf70, #ffae0e);
background-repeat: repeat-x;
border-color: #ffae0e #ffae0e #ffcf70 #b7b7b7;
}
.btn-primary {
color: #522306;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #da9100;
background-image: linear-gradient(to bottom, #ffcf70, #ffae0e);
background-repeat: repeat-x;
border-color: #ffae0e #ffae0e #ffcf70;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
color: #522306;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ffae0e;
background-position: 0 -15px;
border-color: #ffae0e #ffae0e #ffcf70;
Where else could one change the default OC blue color of button when they are pressed? Example of these buttons are the submit button in the contact page or the continue buttons in the checkout page.
Re: How to change Product and Checkout page button colors
Posted: Fri May 03, 2019 6:38 pm
by paulfeakins
wafflemeister wrote: ↑Fri May 03, 2019 12:52 am
I have the default theme. What I am specifically looking for is what color the 'Continue' buttons in the checkout process have when I press them. I see that it is the btn-primary that controls this but I have already changed it but it has no affect. I must be missing something.
I could tell you. But I'm not going to.
Instead I'm going to say right-click the element you want, select Inspect, and that will show you the exact part of the stylesheet you need.
Re: How to change Product and Checkout page button colors
Posted: Fri May 03, 2019 7:08 pm
by straightlight
Once the changes applied from CSS, ensure to look at the console tab in the Inspect Element in case of noticeable error messages.