CSS Help! Child Theme

Clear your browser’s cache, your font is Times.

You don’t have a child theme set up correctly on that site. Your child theme style.css file should only have the changes to the CSS code, not the entire parent CSS file, and it must have the required comment section and @import line at the top of the file.

Review https://codex.www.ads-software.com/Child_Themes

I even changed the name of the parent style.css to style.txt to eliminate that file.

And no, don’t do the above either.

If your child theme is not set up right, it will continue to cause problems and/or defeat the purpose of using a child theme.

I think I figured out what /testsite/ #2 (line 58) is referring to and what I’ve been battling with fonts. The functions.php is pulling in several Google fonts which can be set within the theme’s setting in the WordPress admin panel.

I’m starting to redo my style.css now. https://codex.www.ads-software.com/Child_Themes does state that you do not have to import the parent style sheet. It’s optional.

I’m using the comment section in my style.css from https://codex.www.ads-software.com/Child_Themes. WPyogi what needs changed?

If you do not have the @import line, you are not using a valid child theme. Where does it say that that line is optional?

I started my style.css over with the @import line. It’s working well and my issue is fixed.

I interpreted this as the @import line being optional. This is located under the header “The required style.css file”

Note that a child theme’s stylesheet replaces the stylesheet of the parent completely. (The parent’s stylesheet is not loaded at all by WordPress.) So, if you simply want to modify a few small things in the styling and layout of the parent —rather than make something new from scratch— you have to import explicitly the stylesheet of the parent, and then add your modifications.

Glad to hear it’s working right now.

Hi there! I’m having a similar issue and I’m just wondering how you resolved this. (unfortunately, I can’t post a link to my site because I’m building my site on my local computer)

“The functions.php is pulling in several Google fonts which can be set within the theme’s setting in the WordPress admin panel.”

Exactly – I’d like to use a font that is not one of the choices in the back end. Because functions.php is pulling in the settings after the style sheets load, it’s coming in as an inline setting, so the Abel font is superceding the changes I’ve made in styles.css of the childtheme. I could individually style all elements with the correct font, I just wondered if there was a way to more generally override the Abel font.

In theme settings, I’d just select some generic font like Arial or Verdana. In child theme stylesheet only override element that wanted to change using higher CSS specificity.

This is what injected in from the theme:

h1, h2, h3, h4, h5, h6, dl dt,
blockquote, blockquote blockquote blockquote,
#site-title, #menu-primary li a {
	font-family: '<?php echo hybrid_get_setting( 'oxygen_font_family' ); ?>', serif;
}

So we could override h1 with this in child theme stylesheet:

html h1 { font-family: Tahoma; }

Calculating a selector’s specificity
https://www.w3.org/TR/selectors/#specificity

Thanks, Paul! That’s basically what I have been doing. I wondered if there was a way to make a more global change in the child theme but doing it the way you suggest isn’t taking me too long. Thanks so much for the quick reply.

I wondered if there was a way to make a more global change in the child theme

This is to totally remove theme’s google font business, via child theme’s functions.php.

// Oxygen child theme function to remove google font thingy

function mytheme_remove() {
	remove_action( 'wp_head', 'oxygen_customize_css');
	remove_action( 'wp_enqueue_scripts', 'oxygen_google_fonts' );
}
add_action( 'after_setup_theme', 'mytheme_remove', 11 );

Thanks, Paul. That’s really brilliant.