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' );
}