Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

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

share|improve this question

migrated from stackoverflow.com Dec 14 '11 at 1:05

This question came from our site for professional and enthusiast programmers.

1  
Are they definately included in that order, if you check the source of the page are you seeing the plugin stylesheet followed by your own, i can't personally see any reason what you have shouldn't work, though i suppose if necessary you force the style with !important (yeah not ideal i know). –  t31os Dec 14 '11 at 1:13

3 Answers 3

up vote 2 down vote accepted

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 {
  ......
}
share|improve this answer
    
or just adding the body tag should work to –  Joseph Marikle Dec 14 '11 at 2:02
    
could you expound on that?? –  novicePrgrmr Dec 14 '11 at 6:26
    
did this work at all for you? I can explain more if you would like. –  Michael Rader Dec 14 '11 at 6:29
    
I can't figure out which div holds the "product" div... the page is bolistylus.com/shop/boli-2 –  novicePrgrmr Dec 14 '11 at 6:56
    
just add body to the beginning of the css rule. see if that works. I edited it the way it should look ^ –  Michael Rader Dec 14 '11 at 6:59

You could add a 3rd parameter to the code which loads your themes style sheet so its loads after all plugins and remove the default action which loads your themes style sheet before your plugins.

Example:

add_action( 'wp_enqueue_scripts', 'add_stylesheet', 999 );

For Genesis users, here's a tiny plugin which does the job http://wordpress.org/plugins/genesis-style-trump/

share|improve this answer

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.)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.