Child theme broken after parent theme update – WHY?

  • Resolved Bad_Egg

    (@bad_egg)


    10 years, 4 months ago

    I am working from a child theme of Clean-Box.

    After a recent update to the parent theme, my child theme’s menu in responsive design broke. If I reactivate the parent theme, all is fine again.

    The only files I have altered in the child theme are the CSS and the content-page.php. Specifically, from content-page.php I removed

    <header class="entry-header">
			<h1 class="entry-title"><?php the_title(); ?></h1>
		</header><!-- .entry-header -->

    as I didn’t want the page name replicated on the page. This strikes me as a benign change.

    In the CSS, I changed the font size of the body text, the color of the menu hover/active page font, removed the thin grey line around the otherwise invisible boxes, and increased some padding. Again, these strike me as benign changes.

    But now the menu is broken in responsive design: when clicked, the menu opens to a blank space.

    My only guess is that the updated files include changes to the CSS so now my child CSS is incompatible with the updated remainder of the parent site.

    My understanding of using child themes is that this sort of thing is supposed to be prevented by the user not making changes to the parent theme.

    But now I wonder: when using child themes, and when modifying the CSS, does one only add/delete those sections of the CSS that are modified, or does one use a modified version of the whole, which is what I have been doing?

    The site in question is: http://new.mademers.com

    All help appreciated.

Viewing 1 replies (of 1 total)
  • Thread Starter Bad_Egg

    (@bad_egg)

    10 years, 4 months ago

    Fixed it. The solution, I discovered, was this:

    1. When making a child theme, change in the CSS only those lines of code that are modified; do not use an entire CSS from the parent with modifications.

    For example, if you change the color and font size in the following:

    body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

    Your child theme’s CSS should only read:

    body,
button,
input,
select,
textarea {
	color: #202020;
	font-size: 16px;
}

    This is because if the parent theme’s CSS has additions when updated (as this theme did), then those changes will not be in your child theme and something will break.

Viewing 1 replies (of 1 total)

The topic ‘Child theme broken after parent theme update – WHY?’ is closed to new replies.