Editing CSS in Twenty Seventeen Child Theme

If all you’re doing is modifying CSS, use the customizer. It’s a whole lot easier than making a child theme.

If your changes in style.css didn’t take, it’s probably because you put them in too soon and they’re overridden by something beneath. The customizer stuff loads after all CSS files have been linked.

—if I want to modify the code for personal use? How often will that theme need updates, which would of course remove my changes?

Very often. Every time WordPress updates, every trivial, minor and major version, your changes will be wiped clean.

Also, if you need help in future and you’ve modified the theme’s files, then your chances of receiving help will be far less. Why? With CSS, volunteers have to wade through thousands of lines of code to see the problem instead of dozens. With PHP, you can customise your theme so much that we no longer consider it Twenty Seventeen and we won’t support you, as we don’t support custom themes.

Thank you for the feedback.

Regarding Steve’s comment, I entered the CSS at the very bottom of my style.css, which has nothing in it so far, other than the skeleton text at the top.

• This reply was modified 7 years ago by Christopher Nawoichik.

Then your CSS was not sufficiently specific to override something above.

I’ve been working with the custom CSS panel, but still cannot make changes from style.css. Style.css has nothing in it but the enqueuing code.

I’m wondering: (1) Did I enque the child theme over properly? I used the updated code from the WordPress repository on properly enqueuing scripts, which says not to use the @import “hook”—which slows it down:

function my_theme_enqueue_styles() {

    $parent_style = 'twentyseventeen-style'; // This is 'twentyseventeen-style' for the Twenty Seventeen theme.

    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_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

*Also, (2) what about responsive CSS? Every time I try @media queries before the code—in both custom CSS panel and Style.css—it gives me error messages. Thus I am entering the rules in properly.

Here’s a link to my 2017 child theme so you can see how I enqueued CSS. (You can ignore the line that loads Google fonts.)

https://github.com/sterndata/sds_2017/blob/master/functions.php

Thanks for your help. I looked over your code carefully, but realized it matches what I entered.

I am still perplexed as to why I cannot enter CSS into style.css without an error message. Nevertheless, @media hooks do not work on the custom CSS panel.

Is there additional code required to enqueue ‘responsive’ @media hooks?

No, no additional code is needed. What is the exact error message and what is the CSS you’re trying to enter?

For example:

@media screen and (min-width: 48em)
.wrap {
max-width: 1200px;
padding-left: 1em;
padding-right: 1em;
}

It opens the red-lined “error” box saying an error exists, and asks whether I want to proceed even though it may break the site. It will not go away until I delete the entire top line (@media rule).

That CSS is incorrect. The correct CSS is

@media screen and (min-width: 48em) {
 .wrap {
    max-width: 1200px;
    padding-left: 1em;
    padding-right: 1em;
 }
}

Okay, that was the problem. I am learning CSS, and didn’t know about the need for those extra curly brackets.

Thanks.

Another question on the child theme:

Is it wise to make identical copies of all the files or templates from the parent—and insert them into the child theme so that I have access to any custom changes I want to make in the child? Will this cause any speed problems?

This is for organizational purposes, assuming I can actually get the child’s style.css to override the parent.

You only copy files to override parent files, and only use CSS to override parent CSS.