Magento Question posted in
The official documentation can be found here.

Magento : override css class into my custom css file

I have a button called ‘Request More Info‘ with code like below and its css class ‘plp-description-request-btn’ which is coming from main.css
(skinfrontendthemedefaultcssmain.css)

<a href="javascript:void(0);" class="plp-description-request-btn">Request More Info</a>

appdesignfrontendthemedefaultlayoutpage.xml

<action method="addItem"><type>skin_css</type> <name>css/custom.css</name></action>

I need to override the css class for a particular element from main.css to my custom.css file ( skinfrontendthemedefaultcsscustom.css)

I tried something like below by in my custom.css file, but its not reflecting

.plp-1col-container .plp-description-request-btn{
    background-color: #cb9b36; 
    color: red;
    border: 2px solid #cb9b36;
    transition: .2s cubic-bezier(.15,.9,.5,1);
    margin-right: 7px;
}
Tags:

2

Answers


  1. 0

    Think you would be better off making the change in the original CSS file, but if that’s not an option you could try:

    .plp-1col-container .plp-description-request-btn{
    background-color: #cb9b36 !important; 
    color: red !important;
    border: 2px solid #cb9b36 !important;
    transition: .2s cubic-bezier(.15,.9,.5,1) !important;
    margin-right: 7px !important;
}
    Login or Signup to reply.
  2. 0

    Using !important should be the last resort. The first thing you would check is if the CSS is loaded at all. Then if it is, but is overrided, it could just be a question of target specificity.

    Check this page for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search