Why won’t child theme’s style.css override plugin’s css

2 Views

I am using my own child theme for twentyeleven, and I’ve made some changes to some plugin’s css classes in my child style.css. The problem I’m having is that if I add a new css attribute to a class from the plugin’s css, then it will make the change. But, if the attribute is already declared in the plugin’s css, it relies on that.

How can I make my child theme’s style.css take precedence over the plugin’s css files?

Read More

Here’s an example of what happens from firebug (the first css file is from the plugin, the second is from my child theme):

enter image description here

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. I suggest that you use specificity to do this. Right now both rules are of equal value. What div holds the div “product?” If the Div is called “wrapper” your code could look like this: 

    body div.product div.images img {
  ......
}

  2. Some plugins has also Inline CSS . check the source code of the page .
    Anyhow –
    You have several ways to resolve this .

    1 . use the ( !important ; ) property in CSS.

     p { color: #000000 !important; }

    2 . add a function to deactivate the plugin css 

    add_action( 'wp_print_styles', 'k99_deregisterr_plugin_css', 100 );

function k99_deregisterr_plugin_css() {
    wp_deregister_style( 'name of plugin  style' );
       // add here more lines to deregister other css ...
}

    2.a My solution is usually to COPY all plugin´s the stylesheet css to my own css , and then just delete or rename it (or deregister – see above) .

    Having a unified css will also save on http requests.

    (This however will not be a solution for ALL production websites, because a client triggered upgrade could cause problems.)