Post by wafflemeister » Thu May 02, 2019 10:04 pm

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.

New member

Posts

Joined
Fri Jun 21, 2013 11:10 pm

Post by straightlight » Thu May 02, 2019 11:06 pm

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.

The most generated errors being found on Opencart forum originates from contributed programming. The increased post counters are caused by redundancies of the same solutions that were already provided prior.


Regards,
Straightlight
Opencart.com contractor officials representative


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by wafflemeister » 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.

New member

Posts

Joined
Fri Jun 21, 2013 11:10 pm

Post by cyclops12 » Fri May 03, 2019 1:00 am

As well as changing the background-color you may also have to remove/change the background-image

Active Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by wafflemeister » Fri May 03, 2019 1:11 am

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.

New member

Posts

Joined
Fri Jun 21, 2013 11:10 pm

Post by paulfeakins » Fri May 03, 2019 6:38 pm

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.

For quick, professional OpenCart support please email info@antropy.co.uk


User avatar
Expert Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - Reigate, Surrey, United Kingdom

Post by straightlight » Fri May 03, 2019 7:08 pm

Once the changes applied from CSS, ensure to look at the console tab in the Inspect Element in case of noticeable error messages.

The most generated errors being found on Opencart forum originates from contributed programming. The increased post counters are caused by redundancies of the same solutions that were already provided prior.


Regards,
Straightlight
Opencart.com contractor officials representative


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON
Who is online

Users browsing this forum: paulfeakins, roja123 and 5 guests