Make the css of the widget overwrite theme css

Question

I have created a widget that creates forms. I am using the Twitter Bootstrap framework in order to style those forms. I have two instances of WP:

• One is using the Alterna theme, which uses Bootstrap too. The forms look great on that theme.

• The other one uses OptimizerPress, which does not use Bootstrap. The problem comes here. That theme doesn't use Bootstrap, and their CSS overwrites the definitions in Bootstrap.

So my question is:

• How can I make my widget CSS to take high priority than the Theme CSS?

Here is how I am adding the CSS into my Widget:

class LeadCapture_Form_Widget extends WP_Widget {
    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'lc-form-widget', // Base ID
            'LeadCapture_Form_Widget', // Name
            array( 'description' => __( 'Widget that outputs a basic form with that will capture the user\'s information and submits it to the CRM.', 'text_domain' ), ) // Args
        );
        add_action( 'wp_enqueue_scripts', array( $this, 'register_plugin_styles' ) );
    }

    /**
     * Register and enqueue style sheet.
     */
    public function register_plugin_styles() {
        wp_register_style( 'lc-form-widget', plugins_url( 'LeadCapture_Form_Widget/css/form.css' ) );
        wp_enqueue_style( 'lc-form-widget' );
    }

Answer 1

Is possible to make bootstrap css "contextualized" inside a selector, i.e. bootstrap styles works inside that selector, and thanks to css specificity rules, there them take precence over other rules.

How to do:

First of all download bootstrap less. Let's assume that this files are in 'bootstrap/less' folder.

Now create a new less file, let's assume my-bootstrap.less.

In this file put

#my-widget-container .my-widget {
    @import 'bootstrap/less/bootstrap.less';
}

Compiling this less file^*, let's assume you obtain a file my-bootstrap.css. If you open this file, you'll see that it is the full bootstrap environment, but where every rule is prefixed by '#my-widget-container .my-widget'.

At this point you can remove completely the bootstrap less files, and also your less file and only keep this my_bootstrap.css file (better if minimized), then instead of enqueuing original bootstrap you can enqueue that file, and you'll have no issues with themes not using bootstrap.

However, if the theme is based on bootstrap your css file is redundant, so you should enqueue it only if bootstrap is not present:

function __construct() {
    // your stuff here
    add_action(
      'wp_enqueue_scripts',
      array( $this, 'register_plugin_styles' ),
      PHP_INT_MAX // highest priority
    );
}

public function register_plugin_styles() {

  global $wp_styles;

  $s = array_map( 'basename', wp_list_pluck($wp_styles->registered, 'src') );

  if ( ! in_array('bootstrap.css', $s ) && ! in_array( 'bootstrap.min.css', $s )  ) {
    // no one has registered bootstrap, let's register your 'my-bootstrap'
    wp_enqueue_style(
      'my-bootstrap', get_template_directory_uri() . '/my-bootstrap.css'
    );
  }  

}

Now what you have to do it's just wrap the output of your widget with

<div id="my-widget-container">
  <div class="my-widget">

   YOUR WIDGET CONTENT GOES HERE

  </div>
</div>

^{* How to compile a less file into a css one is out of the scope of this answer and of this site, a simple Google search will give you any guidance, if you need it.}

Answer 2

There's probably a few ways you could go about doing this:

Method 1) Enqueue your styles after theme styles - View Codex

Method 2) Use !important which will take 100% precedence - View Stack Overflow

Method 3) If you're creating your own widgets you can insert your own <style> tags which will take precedence over any external files - View Stack Overflow

I would try the above methods in that order and try to avoid Method 3 if possible, though it does exist.