Creating a child theme modifies the looks of without any changes

This does not happen when I do the same with the twentyfifteen theme.

I just created a child theme for Zerif Lite using the code above and it seems to work fine. The only difference was that the header was black instead of white, and the logo image in the header was missing because it tries to look for the logo image under the child theme folder instead of the parent theme folder. Can you post a link to your site with the child theme active? You didn’t copy over and modify any of the parent theme files into the child theme folder?

Did you see what I pasted? https://imgur.com/92i8jrc,xheS2Dg#0 That’s how it looks. Basically what you said. Black/smaller header, logo is bugged out and the post title loses the bold thing. I think that is a valid reason to say it isn’t working as it should..

The problem seems to be that the order in which the parent theme’s style.css file comes is different than when the child theme is active. That is, if you do a view source on your site when the parent theme is active, versus when the child theme is active, you’ll see that the parent’s style.css file is listed in a different order.

What does that mean as far as CSS goes? Just focusing on the background color of the header, when the parent theme is active, this rule, in the parent theme’s style.css file, comes into play:

.navbar {
	background: #FFF;
	border: 0;
	border-radius: 0 !important;
	text-align: left;
}

However, when the child theme is active, this rule, from bootstrap.css, is used:

.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}

The reason why this second rule is used when the child theme is active is because in the child theme, bootstrap.css comes after the parent theme’s style.css file. When the parent theme is active, bootstrap.css comes before the parent theme’s style.css file. The rules for CSS state that when two or more rules for the same element have the same selector, or if their selectors have the same specificity, then the rule which comes last will take precedence.

So, to fix this, you need to make sure the parent’s stylesheet, when the child theme is active, comes in the same order as it did when the parent theme was active. If you do a view source on the site when the parent theme is active, then you’ll see that the style.css file comes after a stylesheet with an ID of zerif_pixeden_style-css. What you should do, then, is alter the call to wp-enqueue-stylesheet in your functions.php file so it looks like this:

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array('zerif_pixeden_style'), 'v1' );
}

So you are basically adding a third parameter to the wp_enqueue_style function, which says that this stylesheet is dependent upon the zerif_pixeden_style stylesheet, so it needs to come after it.

Well, that actually made a lot of sense. I understand the rules of CSS but didn’t really think of that before. I’ll try it out. Just to confirm, I need to remove what I have on my php file and put in what you sent here, right? I don’t know anything about php so I didn’t quite understand what you did there.

Yes, substitute what you have in your child theme’s functions.php file with what I posted. It should be the same except for the two extra parameters at the end of the third line of code starting with array.

Yeah, got it. It’s working. Thanks a lot really!

Hey, by the way. I know that this is kind of offtopic, but is there an easy way of finding out what I have to add in the css to change something? For example, how do I find the element that cointains the “Home” title?
Thanks again

You can use Firebug.