Mystile Theme child header problem

On further looking, It looks like most of the style sheet is not carrying over. The layout on the child theme is all messed up.

I followed everything from the codex and I’m confused why there seems to be a disconnect.

Are you developing the new site in a subdomain where we can inspect it? I went to your production site and it looks like it’s not running WordPress. We can’t tell what is wrong just by looking at an image, better if we can inspect it directly with a web debugger like Firebug or Chrome Developer Tools.

Sorry should have included that. Here’s a link https://avenuebeads.com/blog/

When I do a view source on your page, I see the child style sheet being included twice, once at line 9, and again at line 108, with the parent stylesheet being included at line 107. So the main problem is the inclusion of the parent and child stylesheets at lines 107 & 108, because those styles are overriding the styles in the layout.css file, which is brought in at line 82. They should come before, so the layout.css rules override the parent & child styles.

While trying to do some research on creating a child theme for Mystile, this “official” YouTube video seems to take a slightly different approach to the WordPress codex. It says to make a complete copy of the contents of the parent style.css file into your child theme’s style.css file. Plus, there is no enqueuing of the parent/child stylesheets in the functions.php file. After viewing your web page’s source, I can see where this would make sense. It seems that the child theme is being automatically included at the top so there’s no need to enqueue it nor the parent theme in your functions.php file. However, I would disagree with the process of copying in all of the parent theme’s content. Instead, I would do it the “old style” way, by adding an import statement at the top of your child theme’s style sheet (after the comment and before your own CSS):

@import url("../mystile/style.css");

That way your child theme will pick up any updates to the parent theme’s style.css file automatically.

So to summarize, I would try removing the lines that enqueue the stylesheets from your functions.php file, then add the @import line at the beginning of your child theme’s style sheet.

Thank you for looking into this CrouchingBruin.

Going the @import method broke it even more.

Would the fact that the Mystile parent has a custom.css and style.css stylesheet be messing things up?

I put my site back on the parent theme and am using the Siteorigin css plugin to make my changes. Not how I want to do this but until I can figure out why the child doesn’t work…

The problem, as I alluded to earlier, was that your parent & child stylesheets were coming after the layout.css file, so if there were rules which have identical selectors, then the rule in the parent/child stylesheet would override the rule in the layout.css file.

For example, you mentioned that one of the problems was that the top level menu was hidden in your child theme. In the parent theme’s style.css file, there is this rule:

#top #top-nav {
  display: none;
}

And in the layout.css file, there is this rule:

@media only screen and (min-width: 768px) {
...
  #top #top-nav {
    display: block;
  }
...
}

The way this works is that the top navigation bar is hidden by default using the rule in the parent’s style.css file. However, there’s a media query in layout.css which displays the top navigation bar if the width of the screen/browser is greater than 768px wide. Without the child theme, it works because the rule in the layout.css file comes after the rule with the identical selector (#top #top-nav) in the style.css file.

However, in the child theme, the parent and child style.css files are coming after the layout.css file, meaning that the rule to hide the top navigation bar is going to take precedence (that’s the way that CSS works; when you have rules with identical selectors or specificity, then the rule which comes last takes precedence). So if you can figure out why the parent & child stylesheets are coming in after the layout.css file, and change it so it comes before, then it should work.

I would say that if you are only making CSS changes and not any changes to any of the PHP files, then using the theme’s Custom CSS option or a CSS plugin is a much easier proposition than making a child theme. You get the advantages of a child theme (i.e., your CSS changes are safe from theme updates) without the hassle of creating a child theme.

I also have had a problem having created a mystile-child theme, using the WordPress codex. The mystile-child theme activates no problem, but when you go to the website, its layout does not resemble that using the Mystile parent theme. I tried deleting the function.php file, which contained the equeue php code, leaving just the style.css file with the required header information, which should have produced a website exactly like the parent Mystile, but it didn’t, still all messed up. It is safe to say that the problem is not due to using ‘enqueue’ method, which is preferred over ‘@import’.
The solution is simple :-
In WordPress website Dashboard select Mystile-Child Theme – Settings
Under General Settings
The Theme Stylesheet is set to ‘default’
change this to any colour, i.e. red.css
Do not forget to select ‘Save Changes’ at the bottom of the page.
Now have a look at your website – It worked for me, just like the original Mystile parent.
I can’t claim I found this fix myself, but it as taken me many hours of reading blogs to find a solution.
The Mystile theme from WooCommerce is a great theme, and free, Thank You, but comes with no support. I would be interested if any one knows why altering a default setting – for a colour as such an impact on the child theme, which contains no changes to the parent. Note: the ‘default.css’ file contains no code, but the colour.css files do.