WordPress.org

Support

Support » Themes and Templates » CSS Help! Child Theme

CSS Help! Child Theme

  • I have created a child theme for Oxygen. I have been having trouble changing the font on some elements so I used Firefox’s plugin Firebug to try to locate the issue. Below are the results. I’ve been trying to change fonts to “Times” for testing purposes. Firebug does not tell me what file this style is coming from. I’ve looked in the parent theme style.css but I do not see the font that I can’t get rid of: “Abel”. I even changed the name of the parent style.css to style.txt to eliminate that file.

    Site:
    http://hn.k12.oh.us/testsite

    Firefox Firebug plugin says the style is coming from
    /testsite/ #2 (line 58)

    Screen Shot of Firebug
    http://hn.k12.oh.us/testsite/2013/01/01/oxygen-theme-font/

Viewing 11 replies - 1 through 11 (of 11 total)
  • Clear your browser’s cache, your font is Times.

    WPyogi

    @wpyogi

    Forum Moderator

    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 http://codex.wordpress.org/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. http://codex.wordpress.org/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 http://codex.wordpress.org/Child_Themes. WPyogi what needs changed?

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    WPyogi

    @wpyogi

    Forum Moderator

    Glad to hear it’s working right now.

    melhopkop

    @melhopkop

    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.

    paulwpxp

    @paulwp

    Font hero

    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
    http://www.w3.org/TR/selectors/#specificity

    melhopkop

    @melhopkop

    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.

    paulwpxp

    @paulwp

    Font hero

    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 );
    melhopkop

    @melhopkop

    Thanks, Paul. That’s really brilliant.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘CSS Help! Child Theme’ is closed to new replies.