multiple css files not overriding properly

  • rattrayrob

    (@rattrayrob)


    11 years, 3 months ago

    Hi,

    I have multiple css files linked through my header.php. I am having a problem whereby the subsequent files (i.e. styles.css and custom.css) are not fully overriding the parent properly (i.e. bootstrap.min.css). They seem to override some elements but not all.

    I have tried linking through header.php AND through functions.php but i get the same result, some css applies but not all.

    I need them to strictly apply, and override, in this order (last being most important)
    1. bootstrap.min.css
    2. styles.css
    3. custom.css

    Any direction would be greatly appreciated.

    links for reference:

    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/styles.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/custom.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/responsive.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/colors/orange.css" />

    ps install/environment is local install so cannot provide live link. sorry.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Amin – WPMU DEV Support

    (@wpmudev-support2)

    11 years, 3 months ago

    Hey there rattrayrob,

    Hope you’re well! 🙂

    If you want we can unlink the css files provided by the parent theme but I need to know what is your parent theme so I can give you exact solution or you can do it by yourself by using Deregister & Dequeue function

    Looking forward for your reply! 🙂

    Take care,
    Calvin

    P.S Use wp_enqueue_style for linking the css file 🙂

    Thread Starter rattrayrob

    (@rattrayrob)

    11 years, 3 months ago

    Hi Calvin,

    Thanks for the quick response.

    This is where I get a little lost. I assume the parent theme is bootstrap as that is my “theme”. Here is the code once I switch to wp_enqueue_style. However this renders the same issue. 

    function theme_styles() {
	 	wp_enqueue_style('stylesheet','http://fonts.googleapis.com/css?family=Cabin:400,600|Open+Sans:300,600,400');

wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css', 1, array() );

 wp_enqueue_style('responsive_css', get_template_directory_uri() . '/css/responsive.css',2,);

wp_enqueue_style('styles_css', get_template_directory_uri() . '/css/styles.css',3,);

wp_enqueue_style('custom_css', get_template_directory_uri() .
 		'/css/custom.css',4,);

wp_enqueue_style('orange_css', get_template_directory_uri() . '/css/colors/orange.css');

}

add_action('wp_enqueue_scripts', 'theme_styles');
    Amin – WPMU DEV Support

    (@wpmudev-support2)

    11 years, 3 months ago

    Hey there rattrayrob,

    Hope you’re well! 🙂

    You can know the name of your theme at “Dashboard > Appearance > Themes > Then check the lower left like this: http://prntscr.com/5yxowp

    Looking forward for your reply! 🙂

    Take care,
    Calvin

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘multiple css files not overriding properly’ is closed to new replies.