0

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

Update

header.php:

<?php
/**
 * 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(); ?>>
    <head>
        <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(); ?>        

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

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

        <nav class="navbar">
         <div class="container">
              <div class="logo-area-top">
                  <a href="<?php bloginfo('url'); ?>">
                    <?php  
                        $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>';
                        }
                    ?>
                  </a>
              </div><!--logo-area-top-->

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

              </div><!--menu-area-top-->
              <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
          </div> 
        </nav><!--nav-->

    </div><!--.navbar-container-->
</header>

functions.php:

<?php
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');

closed as off-topic by Nathan Johnson, Michael, Jacob Peattie, Fayaz, Jack Johansson Apr 5 '18 at 14:34

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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. – Jacob Peattie Apr 4 '18 at 10:02
0

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.