We will now change the style of the checkout steps, as shown in this screenshot:
We inspect the element, as shown in the following screenshot, and change the CSS as per our requirement:
Add the following CSS to the end of catalog/view/theme/packttheme/stylesheet/stylesheet.css
and refresh the checkout steps. You will see the changes. You can see the canceled portion of CSS from bootstrap.min.css
, which means that the bootstrap.min.css
class is overridden by the stylesheet.css
class:
.panel-default>.panel-heading { color: #fff; background-color:#e84e1b; background-image: linear-gradient(to bottom, #e84e1b, #c93a17); background-repeat: repeat-x; border-color: #e84e1b; }
The code has changed the step's heading to an orange background. In this way, you can make changes and implement them in your theme.