Modify the theme after I've added this code

[dani555]

Hello
After I made the next edit that works for the add to cart button, the theme also changed.
1. Replace you css code with :
.btn-default {
transition: 0.4s;
color: #fff;
background-color: #303030;
text-transform: uppercase;
position:relative;
padding-right:52px;
width:100%
}
.fa-shopping-cart {
position:absolute;
right:0px;
top:0px;
padding:9px 12px 7px 10px;
background:red;
height:100%;
font-size:130%;
}
.product-thumb {
padding-bottom: 0px;
}

1. Navigate to catalog/view/theme/oc-light/template/common/header.twig
   Search for and replace it with

Original site button add to cart
http://prntscr.com/l9kk9v

After I added the modification of my button add to cart
http://prntscr.com/l9klf3

Here it has changed to the original theme
http://prntscr.com/l9ko60

Original theme
http://prntscr.com/l9koio
Opencart 3.0.2.0
Does anyone know how to change the css code?
Thank you

[JeroenR]

It is impossible to tell you what you can do without seeing any HTML. So without something like an example in codepen we can’t really help you.
My best guess is that the class btn-default (which is quite a common name) is used in several buttons. So when changing that, you will affect every button that uses this class.
So you will have to find the selector that makes your add to cart button unique. And override that styling.
That selector can either be a style on that button or somewhere in the context of that button.

[dani555]

Hello
I’ve added all the css code to the theme and some of the html code I’ve found
https://codepen.io/dani888/pen/mzQoYE
Maybe you can figure out what needs to be changed
Themes is http://www.spearthemes.com/oc-light/
Thank you

[Author]

Posts