WordPress.org

Ready to get started?Download WordPress

Forums

Oxygen
CSS Help! Child Theme (12 posts)

  1. ajcke
    Member
    Posted 1 year ago #

    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/

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  4. ajcke
    Member
    Posted 1 year ago #

    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?

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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?

  6. ajcke
    Member
    Posted 1 year ago #

    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.

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Glad to hear it's working right now.

  8. melhopkop
    Member
    Posted 9 months ago #

    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.

  9. paulwpxp
    Font hero
    Posted 9 months ago #

    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

  10. melhopkop
    Member
    Posted 9 months ago #

    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.

  11. paulwpxp
    Font hero
    Posted 9 months ago #

    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 );
  12. melhopkop
    Member
    Posted 9 months ago #

    Thanks, Paul. That's really brilliant.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic