0

I've installed the Faxhion theme for a client, and I've successfully created a child theme. However I'm somehow not able to override the parent themes css.

Similar questions such as this one & this one have been asked, I've followed the instructions on both, and I've managed to see that my child theme css is being applied as the below picture shows.

dev tools

If you look at the bottom right of dev tools you can see that I've given body{background: blue;} in the child theme's style.css.

The issue is that as you can see the main.css is cancelling out the child theme's style.css. I'm not sure how to fix this as I'm new to WP Dev.

Here is the child theme comment header:

/*
Theme Name: Faxhion Child
Author: Jordan Miguel
Template: faxhion
Version: 0.1
*/

body {
    background: blue;
    font-size: 30px;
}

And here is how I'm using the parent theme css **note that @import did not work for me so I'm using functions.php as statedhere -

    <?php
add_action( 'wp_enqueue_scripts', function() {
    //* Parent CSS
    wp_enqueue_style( 'faxhion', 
      get_template_directory_uri() . '/main.css' );

    //* Child CSS
    wp_enqueue_style( 'faxhion-child', 
      get_stylesheet_directory_uri() . '/style.css', [ 'faxhion' ], );
} );

EDIT Here is the order of the stylesheets in the head. The parent theme css is linked above the child theme css, should that be changed?

 <link rel='stylesheet' id='faxhion-css'  href='http://www.rareselect.co.uk/wp-content/themes/faxhion/main.css?ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='faxhion-child-css'  href='http://www.rareselect.co.uk/wp-content/themes/faxhion-child/style.css?ver=0.1' type='text/css' media='all' />
<link rel='stylesheet' id='plugins-css'  href='http://www.rareselect.co.uk/wp-content/themes/faxhion/assets/css/plugins.css?ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='fontawesome-css'  href='http://www.rareselect.co.uk/wp-content/themes/faxhion/assets/css/font-awesome.min.css?ver=4.8.1' type='text/css' media='all' />
  • Can you show the order of the stylesheets in the <head> ? – David Lee Sep 7 '17 at 13:58
  • @DavidLee I can't add the picture as I do not have 10 reputations. Ive inspected the head and can see that the parent them css is above the child theme style.css – Jordan Miguel Sep 7 '17 at 14:09
  • @DavidLee I've updated the question – Jordan Miguel Sep 7 '17 at 14:14
1

I see the issue, there is a second call to main.css :

<link rel="stylesheet" id="faxhion-css" href="http://www.rareselect.co.uk/wp-content/themes/faxhion/main.css?ver=4.8.1" type="text/css" media="all">
<link rel="stylesheet" id="faxhion-child-css" href="http://www.rareselect.co.uk/wp-content/themes/faxhion-child/style.css?ver=0.1" type="text/css" media="all">
<link rel="stylesheet" id="plugins-css" href="http://www.rareselect.co.uk/wp-content/themes/faxhion/assets/css/plugins.css?ver=4.8.1" type="text/css" media="all">
<link rel="stylesheet" id="fontawesome-css" href="http://www.rareselect.co.uk/wp-content/themes/faxhion/assets/css/font-awesome.min.css?ver=4.8.1" type="text/css" media="all">
<link rel="stylesheet" id="style-css" href="http://www.rareselect.co.uk/wp-content/themes/faxhion/assets/css/main.css?ver=4.8.1" type="text/css" media="all">

The one you are calling with id="faxhion-css" its loading nothing its a 404 because main.css its not there, the actual main.css file its inside /assets and its already being loaded somewhere. You have 2 options:
Option 1:
Dont call the parent CSS and put 'style' as a dependency:

add_action( 'wp_enqueue_scripts', function() {

    //* Child CSS
    wp_enqueue_style( 'faxhion-child', 
      get_stylesheet_directory_uri() . '/style.css', [ 'style' ], );
} );

'style' its the ID of the main stylesheet.

Option 2: Remove the main stylesheet and add it back:

<?php
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'style' );//removing main.css
    //* Parent CSS
    wp_enqueue_style( 'faxhion', 
      get_template_directory_uri() . '/assets/css/main.css' );//adding it back

    //* Child CSS
    wp_enqueue_style( 'faxhion-child', 
      get_stylesheet_directory_uri() . '/style.css', [ 'faxhion' ], );
} );

Second option will work but i dont recommend it, the first option should work too, if you are having 500 errors its more likely the <?php and ?> are not matching and 1 is missing.

  • This code broke my website with HTTP error 500 unfortunately – Jordan Miguel Sep 7 '17 at 14:40
  • Is there a simple method of removing the second call to main.css ? – Jordan Miguel Sep 7 '17 at 14:41
  • 500? are you missing a php closing tag? the code its your same code but without the wp_enqueue_style of the parent and replaced 'faxhion' by 'style' – David Lee Sep 7 '17 at 14:43
  • Ok great, so its kind of working. When I reload the page, I see the body{background:blue} is working as the page flashes blue for a split second, before going back to the original styling. Inspect the page again to see. – Jordan Miguel Sep 7 '17 at 14:50
  • that is because of #csmx-page { background: #fff; position: relative; overflow: hidden; } that div its over body that is just CSS now, the good thing its the order of the files is the correct one now. – David Lee Sep 7 '17 at 14:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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