Docs

[Nilesh L]

Based on ideas from this thread https://community.theme.co/forums/topic/child-theme-renew-css-is-not-overriding-parent-theme-css/

I am using renew. I cut from customizer and put that all in a custom.css file in child theme.

Then I added this segment to style.css in x-child

@import url( '../x/framework/css/dist/site/stacks/renew.css' );
@import url( 'custom.css' );

I still do not see any custom.css overrides on my site https://be.a.cloudgeni.us

What am I missing?

[Jade]

HI Nilesh,

The thread you have referred to is an older thread.

You can get the child theme here. Then you can install and activate it. Once it’s activated, you can add all the custom CSS in the style.css file.

Hope this helps.

[Nilesh L]

I have the latest child.

When I migrate css from customizer into style.css or into separate custom.css, they do not take effect.

The only way I can see the effect is to add in customizer.

What do I need to do to make custom.css or style.css work?

[Darshana]

Hi there,

It should be because of the priority. The highest priority is given for the Customizer. You will have to add the !important parameter to increase the precedence.

Example:

.blog .h-landmark {
    font-weight: 600 !important;
}

Hope that helps.

[Nilesh L]

I want to delete all from customizer and save it all in custom.css and make a reference in style.css like this.

@import url( 'custom.css' );

How to I give important pri to everything (a lot of things) that I have in custom.css?

[Friech]

Hi There,

Please read about CSS Specificity (https://css-tricks.com/specifics-on-css-specificity/), the more specific your selector is the better. Just keep in mind external stylesheets can not override embedded styles and inline styles unless you declared your styling as !important.

That is !important > inline-style > embedded styles > external stylesheets

The style.css and your custom.css, and the default stylesheet of the stacks (e.g. renew.css) are all external stylesheets. This is where the specificity comes in.

The style on the Customizer is embedded styles that is why it can easily override the default stylesheet of the theme/stack.

Why not place your CSS on child theme’s style.css instead of creating another stylesheet file?

So it will only the child theme’s style.css vs the default stack stylesheet, that is less complex and less one stylesheet file for your site to request.

If there is any styling that you can’t override no matter now specific your selector is, please let us know and we will check what is happening on it.

Thanks.

[Author]

Posts