[Resolved] Editing CSS in a Child Theme

[2fer]

I did a search here for related information but none were quite as general and basic as my question. I’ve installed GP and the default Child Theme, all went super smooth.

I see that the only files in the Child Theme are an empty css sheet (with the default heading) and an empty functions.php page. I need to edit the header and the css and I need to know: do I copy the existing css from the parent theme or just copy the elements I want to edit and leave the default style.css where it is and use both of them? The header from the parent theme – do I leave it where it is and edit it there or copy it to the child theme for edits?

The static post on the home page uses a larger font size than the rest of the theme’s posts, pages, sidebar widgets, etc. It was styled using inline css and it is no problem for me to edit that out and convert the old xhtml to html5 (If I can add a class to the css) but it apparently has caused the widgets and everything to use this exaggerated font size. I have the Typography AddOn installed but I’m hesitant to set it to some other size if that will be applied sitewide. This is why I need to find out which css file I can edit without messing everything up. Add classes to the empty style.css theme or copy the entire parent theme style.css to the child theme to edit?

Sorry if it seems obvious, but I have never used a child theme before and other than this little question I’ve been very pleased with the theme and its options. Really appreciate all the skill and forethought put into it! Thank you!

[Tom]

Hi there,

The style.css and functions.php files in your child theme are meant to start empty, then you add to them. No need to copy the parent styles or functions over.

However, every other file that doesn’t exist in the blank child theme needs to be copied from the parent into the child theme if you wish to edit it. If you edit a file in the parent theme, your edits will be removed when you update the theme. Copying the file from the parent theme and adding it to the child theme allows you to make changes which won’t be touched when you update.

Not too sure what you mean by the second part, but if you have styles that are running into widgets, it’s most likely caused by a unclosed HTML element. For example, for every <div>, you need a </div>. For every <span>, you need a </span>. If one of these elements opens but doesn’t close, the styles of that element will run wild into other elements.

Hope this helps 🙂

[2fer]

Thank you Tom, that helps. I guess my confusion is that if I make a css edit in the Child Theme’s style.css file and it contradicts what is in the parent theme’s style.css file that it will use the Child Theme’s css rather than the duplicate alternate entry in the Parent Theme’s css. It uses both stylesheets with preference for the Child Theme’s variables?

For example the css for the hr element in the parent theme style.css:

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 40px;
	margin-top: 40px;
}

and then I add in the child theme’s style.css:

hr {
	background-color: #ccc;
 	border: 0;
	width: 90%;
	height: .2em;
	margin-bottom: 1.4em;
	margin-top: 1.4em;
}

will change only the <hr> element sitewide?

[Tom]

The CSS in your child theme is read after the parent theme, so your child theme CSS will be the one that actually takes effect.

That’s correct, that code in your child theme would overwrite the code in the parent theme, and would change the <hr> element site-wide.

Let me know if that makes sense or not (it’s late here!) 🙂

[Author]

Posts