themes - Custom CSS is overwritten by WordPress?

So I made a new website for a club/ organization. My task is to update an old website on WordPress with this new website.

I transferred all my HTML pages and CSS/JS files. However, some of my custom CSS is being overwritten somehow. For example, my button colors are blue on WordPress, yet orange on local machine.

What's going on? I looked through every option and plugin setting and I can't figure it out.

So I made a new website for a club/ organization. My task is to update an old website on WordPress with this new website.

I transferred all my HTML pages and CSS/JS files. However, some of my custom CSS is being overwritten somehow. For example, my button colors are blue on WordPress, yet orange on local machine.

What's going on? I looked through every option and plugin setting and I can't figure it out.

• themes
• pages
• css
• errors
• html

Share Improve this question asked Jan 29, 2018 at 2:06 acerteliacerteli 1 2

• 1 More info needed: where do you 'put' your CSS? How do you call/load the CSS? Where is your custom CSS file? – Rick Hellewell Commented Jan 29, 2018 at 2:08
• If it's just some of your css, and you have a class for your buttons .btn, but wordpress has defined in it's css .wordpress .btn that automaticly overwrites your css because it's more specific. If it's like that, you should change your classes and make them unique, or be more verbose with your selectors in your css. Developer Tools can help you determine what exactly is going on. – D. Dan Commented Jan 29, 2018 at 7:14

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I do assume you have functions.php file in your theme directory after that you can add following code :

/*Section for enqueuing styles and scripts*/
    function keyword_theme_styles_and_scripts(){
        /* Styles Below */
        wp_enqueue_style('bootstrap-min-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

        wp_enqueue_style('video-js-min-css', get_template_directory_uri().'/assets/css/video-js.min.css');

        wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800');

        wp_enqueue_style('font-awesome-min-css', get_template_directory_uri().'/assets/font-awesome/css/font-awesome.min.css');

        wp_enqueue_style('magnific-popup-css', get_template_directory_uri().'/assets/css/magnific-popup.css');

        wp_enqueue_style('animate-min-css', get_template_directory_uri().'/assets/css/animate.min.css');

        wp_enqueue_style('device-mockups-min-css', get_template_directory_uri().'/assets/device-mockups/device-mockups.min.css');

        wp_enqueue_style('main-css', get_template_directory_uri().'/style.css');

        /*  Scripts Below */

        wp_enqueue_script('jquery-min-js', get_template_directory_uri().'/assets/js/jquery.min.js', array(), '', true);

        wp_enqueue_script('video-min-js', get_template_directory_uri().'/assets/js/video.min.js', array('jquery-min-js'), '', true);

        wp_enqueue_script('bootstrap-min-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), '', true);

        //wp_enqueue_script('bootstrap-min-js', get_template_directory_uri().'assets/bootstrap/js/bootstrap.min.js', array('jquery-min-js'), '', true);

        wp_enqueue_script('jquery-easing-min-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js', array('jquery-min-js'), '', true);

        wp_enqueue_script('scrollreveal-min-js', get_template_directory_uri().'/assets/js/scrollreveal.min.js', array('jquery-min-js'), '',true);

        wp_enqueue_script('jquery-magnific-popup-min-js', get_template_directory_uri().'/assets/js/jquery.magnific-popup.min.js',array('jquery-min-js'), '', true);

        wp_enqueue_script('svg-injector-min-js', get_template_directory_uri().'/assets/js/svg-injector.min.js', array('jquery-min-js'), '', true);

        wp_enqueue_script('wow-min-js', get_template_directory_uri().'/assets/js/wow.min.js', array('jquery-min-js'), '', true);

        wp_enqueue_script('index-min-js', get_template_directory_uri().'/assets/js/index.min.js', array('jquery-min-js'), '', true);

    }
    add_action('wp_enqueue_scripts', 'keyword_theme_styles_and_scripts');

Remember to enqueue your custom styles and scripts at the bottom of the queue.

and order of the scripts ans styles matters as well so enqueue in proper order.

I hope it helps.

Good Luck!!!