Custom CSS in Child Theme does not work

[todorchrisov]

After upgrading to Storefront 1.5.2 all my custom CSS tweaks in my child theme are not working anymore.

[opportus]

Same bug for me.

[S4Mi]

same here

[WPprodigy]

This is likely the cause: 7299ab6

Be sure to enqueue your child themes stylesheet. See: https://codex.wordpress.org/Child_Themes

[jameskoster]

@todorchrisov @opportus @S4Mi sorry about this. To fix, open /inc/functions/setup.php and find;

wp_enqueue_style( 'storefront-style', get_template_directory_uri() . '/style.css', '', $storefront_version );

after it please add

wp_enqueue_style( 'storefront-child-style', get_stylesheet_uri(), '' );

That should fix the issue. Let me know if it does and I'll push the update to .org.

[opportus]

If I understand what you say, the code should look like this:

if ( ! is_child_theme() ) {
    // If a child theme's not loaded, just load the stylesheet as usual.
    wp_enqueue_style( 'storefront-style', get_stylesheet_uri(), '', $storefront_version );
} else {
    // If a child theme is loaded, load the parent theme styles as normal (includes rtl) as well as the child themes style.css file.
    wp_enqueue_style( 'storefront-style', get_template_directory_uri() . '/style.css', '', $storefront_version );
    wp_enqueue_style( 'storefront-child-style', get_stylesheet_uri(), '' );
}

For me, it just loads the child theme style after the parent style, conflicting each other.

If I remove this line:

wp_enqueue_style( 'storefront-style', get_template_directory_uri() . '/style.css', '', $storefront_version );

The storefront customizer style does not load anymore.

[jameskoster]

@opportus

For me, it just loads the child theme style after the parent style, conflicting each other.

I think it is expected behaviour that the parent css is loaded.

We have to load the parent styles for the RTL css to be included. If you don't want to include the parent css you should dequeue that manually in your child theme. We can document this.

wp_enqueue_style( 'storefront-style', get_template_directory_uri() . '/style.css', '', $storefront_version );
The storefront customizer style does not load anymore.

It won't do. A lot of the styles are appended to that stylesheet. If it's not there, the styles don't get appended. TBH, removing the parent css entirely isn't really recommended. At that point you'd probably be better off creating your own custom parent theme.

[MonikaTS]

I update storefront (parent)
change storefront/inc/functions/setup.php after line 151
I added
wp_enqueue_style( 'storefront-child-style', get_stylesheet_uri(), '' );

delete wp_enqueue styles in my child theme,
html header child-theme:

link rel='stylesheet' id='storefront-style-css' ................
style id='storefront-style-inline-css' type='text/css'
...
/style
link rel='stylesheet' id='storefront-child-style-css' ..
link rel='stylesheet' id='storefront-woocommerce-style-css'......
style id='storefront-woocommerce-style-inline-css' type='text/css'
..
/style

I can design woo-commerce styles via css in my child-theme,
but with this style-order I have to use a very strange cascade and this is bad for performance :(

in a perfect world :-) child-css is loading last, after all woo-commerce styles

and I agree, child css shouldn't be enqueued from parent theme => in a perfect world

[todorchrisov]

Thaks for all your efforts and feedback, @jameskoster !

Regretfully, I am totally lost with this new custom code. I pray for an update which will revert back the old functionality of Storefront where everything was nice and easy with custom css.

[jameskoster]

Thanks @MonikaTS. OK, looks like we might need a new function here. I'll update shortly.

[jameskoster]

@MonikaTS would you be able to give that a try? ^^

[MonikaTS]

yes what should I do :-)
my coding skills are much better than my english knowledge :-)

[jameskoster]

@MonikaTS

1. overwrite your copy of storefront/inc/structure/hooks.php with: https://github.com/woothemes/storefront/blob/17b69e67bc024b546f0e5f51a76f023cc20b32be/inc/structure/hooks.php
2. overwrite your copy of storefront/inc/functions/setup.php with: https://github.com/woothemes/storefront/blob/17b69e67bc024b546f0e5f51a76f023cc20b32be/inc/functions/setup.php

The child theme CSS should now be loaded after the WooCommerce css.

[MonikaTS]

:-) you are the hero of the day => and it is monday (=murpheys day)
yes child css is loading last, before the first js

[jameskoster]

OK. I will leave this a few hours to give others an opportunity to contribute. Otherwise I'll prepare the update tomorrow morning.

[opportus]

@jameskoster

We have to load the parent styles for the RTL css to be included. If you don't want to include the parent css you should dequeue that manually in your child theme. We can document this.

If I dequeue it manually from my child theme with:

wp_dequeue_style( 'storefront-style' );

The style id "storefront-style-inline-css" (which, I think, is containing the storefront customizer style) still doesn't load...
Which lead to the same results as when I removed (for test purposes) :

wp_enqueue_style( 'storefront-style', get_template_directory_uri() . '/style.css', '', $storefront_version );

in the storefront setup.php.

So if that "issue" was in fact an expected behavior (because it's not very clear to me), what would you suggest to us for adapting our child themes to that new code in function storefront_scripts(), expecting customizer and child styles to load properly as in 1.5.1 ?

[jameskoster]

@opportus if you want to disable the Storefront core CSS but still have the Customizer controlled css load you'll need to attach it to a different stylesheet. You can see how it's included in core here; https://github.com/woothemes/storefront/blob/master/inc/customizer/display.php#L206

Your best bet would be to plug that function (storefront_add_customizer_css()). Essentially copy and paste it into your child theme but change the handle that wp_add_inline_style() references on line 206 to match your own stylesheet instead of storefront-style.

[ereckers]

@jameskoster I tested your fix in comment 4 and it does work. However, since this is a new conditional in setup.php, it leads to loading the storefront-style twice for those of us enqueuing the storefront stylesheet in our functions.php file, ie.:

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), $VER );

So, it would be a 2 step fix for me:

1. adding your fix in setup.php
2. removing my wp_enqueue_style of the storefront stylesheet from my functions.php file

[opportus]

Thanks @jameskoster.

If you want to disable the Storefront core CSS but still have the Customizer controlled css load you'll need to attach it to a different stylesheet. You can see how it's included in core here; https://github.com/woothemes/storefront/blob/master/inc/customizer/display.php#L206
Your best bet would be to plug that function (storefront_add_customizer_css()). Essentially copy and paste it into your child theme but change the handle that wp_add_inline_style() references on line 206 to match your own stylesheet instead of storefront-style.

This will probably fix the case for those of us not enqueuing the storefront stylesheet in our child theme.

However, I wonder which direction will take the next update... do we have to adapt to this new behavior which, from what I understand, is the good practice, or will you revert back to the 1.5.1 behavior ?

[smcjones]

I'm not sure I agree with logic of removing the child theme functionality from hooks.php. WordPress' documentation states that most themes will automatically load a child theme.

https://codex.wordpress.org/Child_Themes

[smcjones]

In any case, for those still struggling, this code from the same page I referenced above in your functions.php child theme file should take care of issues:

function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

[jameskoster]

Closing this, should be fixed by 17b69e6

[TassieTanzi]

Thank you smcjones it's amazing how little correct info is out there.
Now I just need my sidebars to go across lol but your code gave me major improvement!

[ArcodeFire]

I see this is an old post and closed because it has supposedly been fixed, however I just installed storefront 2.0.5 and I am having the same issues of the colors reverting back to default on my child theme.

Has this issue not been fixed in the theme yet?

Secondly, I see there is a fix by pasting code into the setup.php file, however I cannot seem to find that file on my server with my wordpress/theme install. Where does this file exist? I don't seem to have the path referenced in this post.

Thanks for the help!

[opportus]

Since the release v2.0, the theme has been heavily restructured, no setup.php anymore. But you can find the enqueuing style functions here.

[ArcodeFire]

Thank you for the reply.

So as I understand it, this issue was not fixed in the latest version of storefront and I need to update code in the class-storefront.php to get my child theme to work properly?

If that is the case, then do I copy and past all of the code in the link your provided or just a snippet? Please be specific so I fix the problem and don't make it worse.

Thanks for the help!

[opportus]

I didn't mean that will fix your issue. Anyway you shouldn't touch the Storefront original files since your modifications will be deleted the next update.
Just adapt your child theme or custom CSS to the new way Storefront is working.

[ArcodeFire]

I have to disagree that it is working, which is the reason for my post....unless I have a special case here.

I created a storefornt child theme and my colors are reverting back once I view my site. I did not have this issue until I created the child theme. I fixed the header by modifying the .css file but I would rather not have to do that for all of the colors (backgrounds, links, texts, etc.) on my site.

Is modifying the .css file that only fix? If so, is there a list somewhere of all of the css code to make these modifications?

Thanks for your help!

[opportus]

@ArcodeFire, are you manually loading your child theme main CSS file ? If that's the case, try deleting the line enqueueing it in your functions.php. Also are you sure the Customizer settings are not overwriting your custom CSS ? If that's the case, modify first what you can modify in the Customizer, then make the rest of the changes to your custom CSS.

[ArcodeFire]

The only thing I did was click the Create Child Theme button on the Storefront 2.0.5 theme. Ever since then, none of my color settings have been sticking.

[opportus]

I don't understand where do you see this button ?

[ArcodeFire]

[opportus]

I don't have this button, are you sure it doesn't come from a tier unupdated plugin ?

[ArcodeFire]

This is the auto generated code in my style.css file @import url("../storefront/style.css");

This is the custom code that I added to the custom css section to get my background to stay: .site-header { background-color: #363545; }

Not sure what to do at this point...

[ArcodeFire]

I don't have this button, are you sure it doesn't come from a tier unupdated plugin ?

This is from the Wordpress theme page. Click Themes under Appearance and then click Theme Details on Storefront and you will see the button on the bottom. This is the only way I know how to create a child theme. Is there another way?

[ArcodeFire]

Thank you for your continued help (sorry, I am a bit new to WP).

try deleting the line enqueueing it in your functions.php

I do not see any enqueueing lines in my /themes/storefront/functions.php file. Am I looking in the right file?

Why do I feel like I have a completely different version of WordPress than you!?

[BurlesonBrad]

@ArcodeFire Github is for BUGS, not support. But before @jameskoster Locks and Limits this issue (because some of us ❤️ to see closed issues!), let's give this one last try 👍

Go to your admin area, WooCommerce > System Status

Now click the button labelled "Get System Report"

Now click the button labelled "Copy For Support"

(which again is not what GitHub is for. That IS what https://wordpress.org/support/theme/storefront IS for)

After you click the button labelled "Copy For Support" in the above screenshot, you'll get this tooltip:

The NEXT post (before @jameskoster gets a chance to Lock and Limit this issue and move it to "closed") needs to be you pasting your System Report information. 😎

[jameskoster]

That child theme creation button is not coming from WordPress core.

This is the auto generated code in my style.css file @import url("../storefront/style.css");

That is bad and will not work for Storefront. If you're running a child theme, Storefront automatically recognises this an loads the stylesheets for you. So remove that line.

I created a storefornt child theme and my colors are reverting back once I view my site

Switching themes resets your Customizer settings, FYI.

I'm locking this, please post in support if you're still having problems :)