CODEWITHSUNDEEP
csswordpress
Afterlame
Afterlame

Reputation: 1248

Is there a way to set a stylesheet’s priority higher than !important?

I know I should not really ask this question, but before I get down voted to oblivion hear me out … I try to make the best out of a really bad situation:

My client has bought a WordPress theme and hired me to customize some parts of it. The bought theme is a a child theme and is a coding horror … The theme’s stylesheet, tries to overwrite some styles from the woocommerce plugin, while the woocommerce stylesheet is loaded after the theme’s stylesheet. To do so it uses a crapload of !important declarations. I can not really fix any of this without breaking the theme update function.

So here is my plan: I want to add another stylesheet at the end, which overwrites all the mess, that has been done before. But simply putting it there would not overwrite all the !important declarations from the stylesheets before. So I was wondering if there is a way to prioritize my stylesheet above all the mess from before.

Any way to up my priority above the !important declarations are also appreciated!

Upvotes: 4

Views: 4092

Answers (4)

helgatheviking
helgatheviking

Reputation: 26319

Normally with a child theme you would directly edit it. But if you are concerned about getting updates for the child theme, you could also deregister the crappy stylesheet and enqueue your own version from a plugin. 

<?php
/*
Plugin Name: Fix Theme Stylesheets
Plugin URI:  http://stackoverflow.com/q/33544364/383847
Description: Save me from these poorly coded marketplace themes
Version:     0.1-alpha
Author:      helgatheviking
Author URI:  http://kathyisawesome.com
 */


function so_33544364_custom_scripts() {
    $theme = get_template();

    if( ! is_admin() && 'your-themes-folder-name' == $theme ){
        // get rid of the child theme's crappy stylesheet
        wp_deregister_style( 'child-style' );
        // optionaly load the parent theme directly instead of importing. can be better for minifying plugins
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        // load your improved stylsheet! style.css in the same folder as this plugin file
        wp_enqueue_style( 'your-style', plugins_url( 'style.css', __FILE__ ) );
    }
}

add_action( 'wp_enqueue_scripts', 'so_33544364_custom_scripts' );

Upvotes: 2

holden
holden

Reputation: 1779

!important is in 99% of cases a lazy way to obtain something that should be reached being more specific; specificity AND positioning are both keys elements, for instance:

p.foo { text-align: right; }

can be overwritten in this way: 

body p.foo { text-align: left; }

Specificity is very important and it's the right way to go, here how you can calculate it: link

Upvotes: 0

Moob
Moob

Reputation: 16184

You can either:

  1. Ensure your declarations are equally specific but come later in the stylesheet:

div p strong {color:red!important}
div p strong {color:blue!important}
<section>
  <div>
    <p>lorem <strong>ipsum</strong></p>
  </div>
</section>

  1. Make your declaration more specific:

section div p strong {color:blue!important}
div p strong {color:red!important}
<section>
  <div>
    <p>lorem <strong>ipsum</strong></p>
  </div>
</section>

See: https://css-tricks.com/specifics-on-css-specificity/ for some useful tips.

Upvotes: 4

Abhishek Mahajan
Abhishek Mahajan

Reputation: 28

ya you will try to using parent div..eg:-

.parent_div Child_div ul li{
  margin: 0px;
}

this is way to Without using !important.parent div most be ist preroty rather than !important

Upvotes: -2

Related Questions