child theme css changes

I am also having similar problems with regards to using a child theme and the parent overwriting my child theme, where can I edit to make the child theme only look at the child theme CSS files?

Hi there,

There is no need to import other stylesheets in your child themes style.css. The Bootstrap recognizes that there’s a child theme, uses the child theme’s style.css, and adds its own stylesheet and the default Bootstrap styles as dependencies.

@konstantin Obenland: As per the Forum Welcome, please post your own topic. Posting in an existing topic prevents us from being able to track issues by topic. Added to which, your problem – despite any similarity in symptoms – is likely to be completely different.

Thank you Konstantin. I still can’t change the css. I have made child themes for other themes which all work well. Below is my style.css code

/*
Theme Name: The Bootstrap Child
Version: 1.0
Theme URI:
Description: A child theme for The Bootstrap
Author: pgb
Template: the-bootstrap
*/

@import url(../the-bootstrap/style.css);

#page {
    background-color: #0656a2;
}
h1 {
    font-size: 30px;
}

The background color doesn’t change and the h1 doesn’t get smaller.
Do you have any other suggestions? Thanks.

I am having the same issue as well.
It doesn’t matter what changes I make to the child style.css there is no change to the website at all.

@pgb, In your code sample, you’re still importing the parent theme’s style. As Konstantin explained, you don’t need to do that.

Please post a link to the site.

Hi, it appears that for some reason functions.php is not listing style.css
To test, I copied the below in between tw-bootstrap and the-bootstrap and deleted {$suffix}, and it loaded style.css .
I wouldn’t suggest this as a fix as I really don’t know enough about bootstrap or php to even be dangerous.

wp_register_style(

			'the-bootstrap',

			get_template_directory_uri() . "/style{$suffix}.css",

			array('tw-bootstrap'),

			$theme_version
		);

I’m working locally. I’m giving up with this theme. Although it’s very good I’m not getting anywhere with it. I can’t make any changes.

It works for me if I edit style.min.css, did you try that?

@malissas, The parent theme uses style.min.css, a minified version of style.css. But if you have to edit style.min.css, that suggests you aren’t using a child theme. Are you using a child theme or are you editing the-bootstrap directly?

@pgb, this is the top of my child theme’s css

/*
Theme Name: Custom Bootstrap
Theme URI:
Author: jmjf
Author URI:
Description: My customized version of The Bootstrap theme
Version:
Tags:
Text Domain: 

Template: the-bootstrap
*/

#page {background-color:#555;}

I added the #page setting to test the issue you describe. (I also change the size of h1-h6 in my child theme, among other changes.) When I reload the page after saving this, the content area is dark gray. I’m not sure what, but if you have something similar in your child theme’s style.css and it doesn’t work, my best guess is that something is configured strangely in your WordPress environment.

Thank you everyone, perhaps jmjf is right, maybe something is configured strangely in my WP environment. I’m trying other themes with child themes and they all work well. I’ll give up on The Bootstrap now.

@pgb

You are missing the Apostrophe’s:

wrong:
@import url(../the-bootstrap/style.css);

right:
@import url(‘../the-bootstrap/style.css’);