Child theme CSS isn't loading, Unicode breaks

  • Resolved Southwest

    (@southwest)


    9 years, 11 months ago

    When I switch to a child theme of Lovecraft, using the functions.php and style.css below, my custom CSS doesn’t appear to do anything. Furthermore, the “gear” icon to the left of Site Meta links is replaced with a misencoded Unicode character.

    lovecraft-child/functions.php:

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array('parent-style')
    );
    }

    lovecraft-child/style.css:
    /*
    Theme Name: Child of Lovecraft
    Description: Child theme of Lovecraft. Lovecraft "is a beautiful two-column theme for bloggers" with "responsive design, great typography, a full-width header image (which is replaced with the post thumbnail on single posts/pages), custom accent color support, custom logo support, editor style support, a Flickr widget, recent posts and recent comments widgets with thumbnails, and a full-width template". I'm just tweaking it.
    Author: Spencer Dub (child), Anders Norén (parent)
    Author URI: https://spencerdub.me/
    Template: lovecraft
    Version: 1.0.0
    Tags: gray, black, red, white, light, two-columns, right-sidebar, responsive-layout, custom-colors, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
    */
    /* Theme customization starts here:
    -----------------------------------------------------------------*/
    ul.compact_archive li.compact_archive_year{
    list-style-type: none;
    }
    h2.blog-title{
    font-color: red;
    /* (just for testing) */
    }

    If you go to my site, which is currently running this child theme, you can see that the title is not red, and if you look at the Site Meta widget in the sidebar, you can see that the gear icons are not displaying correctly.

    How do I fix each of these problems? Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)

  • For your first issue, font-color isn’t a CSS property, and you also need to target the <a> tag instead:

    h2.blog-title a {
    color: red;
}

    For your second issue, your theme is (mistakenly?) coded to use get_stylesheet_directory_uri() to look for the Genericons stylesheet, which fails for a child theme. You could replace the code in your child theme’s functions.php with this code instead to correctly load the Genericons stylesheet:

    <?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
    wp_enqueue_style( 'child-genericons', get_template_directory_uri() . '/genericons/genericons.css' );
}
    Thread Starter Southwest

    (@southwest)

    For your second issue, your theme is (mistakenly?) coded to use get_stylesheet_directory_uri() to look for the Genericons stylesheet, which fails for a child theme. You could replace the code in your child theme’s functions.php with this code instead to correctly load the Genericons stylesheet:

    That solved that issue. Thank you!

    For your first issue, font-color isn’t a CSS property, and you also need to target the tag instead:

    Oof. You can tell it’s been a long week when I start making up CSS properties.

    Unfortunately, even when I correct my sloppy CSS as you suggested, I’m still not seeing anything different. My other line of CSS, for the list style, is also not working, and that refers specifically to a class that I made.

    I thought it might be a specificity issue, so I set both of those properties to !important just to test that. Even with those properties set to !important, I didn’t see their effects. It’s as if my custom CSS just isn’t being loaded.

    Thread Starter Southwest

    (@southwest)

    I looked at the source and checked out the <head>. For some reason, this was being used as the stylesheet URL:

    […]/blog/wp-content/themes/lovecraft-child/style.css?ver=4.1.1

    Note the ?ver=4.1.1 at the end.

    I don’t know why it was doing this, and if I can make it stop, I’d be happy, but removing the version line from the theme info at the beginning of my style.css made the stylesheet begin to work.

    I’ll keep this open for a few days in case anyone can help me figure out how to remove that ?ver=4.1.1.

    Thread Starter Southwest

    (@southwest)

    I take that back, it’s not totally resolved.

    The CSS seems to be cached somewhere, thanks to that ?ver=4.1.1, and I don’t know how to update that cached CSS file. I edit my CSS and reupload it to my server, but if I follow the link in the <head> to the ?ver=4.1.1 style sheet, it doesn’t reflect my edits.

    Thread Starter Southwest

    (@southwest)

    Resolved the caching issue. CloudFlare was caching my CSS files. I diagnosed this by selectively purging the CSS file from the cache, and then solved the issue by turning on “Development Mode”, all via the CloudFlare dashboard.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Child theme CSS isn't loading, Unicode breaks’ is closed to new replies.