I recently tried to add custom css to one of my stylesheets for my theme to customize a WPBakery Page Builder button element. But I saw that the plugin(WPBarkey Page Builder) overrides the css I set for the button. This also happens for some other plugins.

I would like to know how I can override the button styles with my own styling by using a custom stylesheet.

I read this article - best way to overide plugin CSS?

I assume this is only if I want to call style.css after all the plugins have been loaded. But in my case, I have a different stylesheet to customize the plugin elements. I also saw that even if I do as the article says, the plugin still overrides the css from style.css

So my questions are:

  1. Can the article above work for different stylesheets or how can I alter it to work?

  2. What would be the best up-to-date way to do it without using the !important css rule? (I saw this article is very old).



 * The header for our theme
 * This is the template that displays all of the <head> section and everything up until <header>
 * @since 1.0
 * @version 1.0

<!DOCTPYE html>
<html <?php language_attributes(); ?>>
        <meta charset="<?php bloginfo('charset') ?>">
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
        <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <?php wp_head(); ?>        

    <body <?php body_class(); ?>>

    <div class="container-fluid navbar-container">

        <nav class="navbar">
         <div class="container">
              <div class="logo-area-top">
                  <a href="<?php bloginfo('url'); ?>">
                        $custom_logo_id = get_theme_mod( 'custom_logo' );
                        $logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
                        if ( has_custom_logo() ) {
                                echo '<img src="'. esc_url( $logo[0] ) .'" class="logo">';
                        } else {
                                echo '<h1>'. get_bloginfo( 'name' ) .'</h1>';

              <div class="menu-area-top">
                        wp_nav_menu( array(
                            'theme_location' => 'header-menu',
                            'menu_class' => 'nav-ul js--nav-ul',
                            'fallback_cb' => false
                        ) );

              <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>



function af_enqueue_script() {
    wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), true);
    wp_enqueue_script( 'mobile-nav', get_template_directory_uri() . '/js/mobile-nav.js', array( 'jquery' ), '1.0.0', true );

    wp_enqueue_style('bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); //bootstrap
    wp_enqueue_style( 'google-fonts-lato', '//fonts.googleapis.com/css?family=Lato:300,400,900'); //fonts
    wp_enqueue_style('vc-style', get_stylesheet_directory_uri() . '/css/vc_elements-style.css'); //visual composer
    wp_enqueue_style( 'ionicons', get_stylesheet_directory_uri() . '/assets/ionicons.css'); //icon library
    wp_enqueue_style('style', get_stylesheet_uri(), false); //custom stylesheet for theme
    wp_enqueue_style('queries-layout', get_stylesheet_directory_uri() . '/css/queries.css');


add_action('wp_enqueue_scripts', 'af_enqueue_script');
  • 1
    Try putting your stylesheet after plugin's stylesheet. If you are enqueuing your stylesheet, try adding a dependency or use a high value for priority. Can't help much without seeing your code.
    – Abhik
    Apr 3 '18 at 17:50
  • @Abhik I updated to show the header.php and functions.php. I did try a higher priority too. Didn't work even if I set it.
    – Feyt
    Apr 3 '18 at 18:20
  • You need to learn about specificity and write your CSS with it in mind. Apr 4 '18 at 10:02

Assuming you are overriding the Page Builder styles with vc-style stylesheet.

Try this..

function vc_override() {
    wp_enqueue_style( 'vc-style', get_stylesheet_directory_uri() . '/css/vc_elements-style.css', array('js_composer_front') ); //visual composer
add_action( 'wp_enqueue_scripts', 'vc_override', 999 );

View your site's source to check whether your style is appearing before or after visual composer style.

  • Thank you @Abhik. This worked. I added the priority to wp_enqueue_style instead of to the add_action function. It now works correctly.
    – Feyt
    Apr 4 '18 at 7:02

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