Hi Folks
I searched the forum and wasn't able to find what I am trying to do, so I figured I would try posting instead.
I have Opencart version 3 Default template and theme.
Is there a way to change the color of the ADD TO CART button, on both the Product Page and the List of Products Page?
Examples:
- https://www.clubplug.ca/NGK-Spark-Plugs ... R5EIX-5688
- https://www.clubplug.ca/NGK-Spark-Plugs ... park-Plugs
Thank you all for your help.
Frank
Yes, it can be done in the catalog/view/theme/*/stylesheet/stylesheet.css.
I suggest you create your own theme folder at /catalog/view/theme/my-theme and then copy the stylesheet folder from above into it, and then modify it as per your needs. Then, in the admin backend, set it to the new theme folder at Extensions > Extensions > Theme > edit Default Store theme > Theme Directory.
In this new stylesheet.css , add and modifiy this:
with your own color values.
I suggest you create your own theme folder at /catalog/view/theme/my-theme and then copy the stylesheet folder from above into it, and then modify it as per your needs. Then, in the admin backend, set it to the new theme folder at Extensions > Extensions > Theme > edit Default Store theme > Theme Directory.
In this new stylesheet.css , add and modifiy this:
Code: Select all
#button-cart {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
}
#button-cart:hover, #button-cart:active, #button-cart.active, #button-cart.disabled, #button-cart[disabled] {
background-color: #1f90bb;
background-position: 0 -15px;
}Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig
Thank you JNeuhoff!!JNeuhoff wrote: ↑Wed Mar 12, 2025 12:47 amYes, it can be done in the catalog/view/theme/*/stylesheet/stylesheet.css.
I suggest you create your own theme folder at /catalog/view/theme/my-theme and then copy the stylesheet folder from above into it, and then modify it as per your needs. Then, in the admin backend, set it to the new theme folder at Extensions > Extensions > Theme > edit Default Store theme > Theme Directory.
In this new stylesheet.css , add and modifiy this:
with your own color values.Code: Select all
#button-cart { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; border-color: #1f90bb #1f90bb #145e7a; } #button-cart:hover, #button-cart:active, #button-cart.active, #button-cart.disabled, #button-cart[disabled] { background-color: #1f90bb; background-position: 0 -15px; }
Hi JJNeuhoff wrote: ↑Wed Mar 12, 2025 12:47 amYes, it can be done in the catalog/view/theme/*/stylesheet/stylesheet.css.
I suggest you create your own theme folder at /catalog/view/theme/my-theme and then copy the stylesheet folder from above into it, and then modify it as per your needs. Then, in the admin backend, set it to the new theme folder at Extensions > Extensions > Theme > edit Default Store theme > Theme Directory.
In this new stylesheet.css , add and modifiy this:
with your own color values.Code: Select all
#button-cart { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; border-color: #1f90bb #1f90bb #145e7a; } #button-cart:hover, #button-cart:active, #button-cart.active, #button-cart.disabled, #button-cart[disabled] { background-color: #1f90bb; background-position: 0 -15px; }
Sorry but in the file catalog/view/theme/default/stylesheet/stylesheet.css
The #button-cart does not exist. Maybe I'm missing something ?
Thanks again.
Frank
It needs to be added, and modified as per your color needs.
Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig
Can I mark this as [SOLVED] now?
UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk
Who is online
Users browsing this forum: No registered users and 32 guests
