Implementing child theme's style.css

17 Replies ·

  1. I use JetPack for the contact form and the Custom CSS module. That’s all I use it for.

    I want to deactivate and delete JetPack.

    When I transfer all of the CSS from the Custom CSS to my stargazer-child theme’s style.css file and then deactivate JetPack the site looses some of its styling.

    I’m now thinking there is something wrong with my child theme’s style.css

    Here is the beginning information at the top of my child theme’s style.css:

    /*
     * Theme Name: stargazer-child
     * Theme URI: https://tibesar.com/wp-content/themes/stargazer-child/
     * Description: Stargazer Child Theme
     * Version: 1.0.0
     * Author: Marcus Tibesar
     * Author URI: https://tibesar.com
     * Tags: beautiful colors
     * License: GNU General Public License v2.0 or later
     * License URI: http://www.gnu.org/licenses/gpl-2.0.html
     * Template: stargazer
     */
     @import url('../stargazer/style.css');
     
    /* Add your custom CSS below this line. */
    
    /*
    Welcome to Custom CSS!
    
    To learn how this works, see http://wp.me/PEmnE-Bt
    */
    /********************************************************************************************************
     * 2 - Fun Zone
     *
     * This section of the stylesheet is what I call the fun area.  For the most part, you should feel free 
     * to overwrite the following in your child theme's <code>style.css</code> file if your design calls for it.  
     * Specifically, this deals with fonts and colors.  Those things are really the things that give your 
     * child theme its uniqueness.  Have fun with it.  Go wild!
     ********************************************************************************************************/
    /**

    Have I done anything wrong please?

    Thank you very much!

  2. Justin Tadlock

    First, remove this line of code:

    `
    @import url(‘../stargazer/style.css’);
    `

    Stargazer automatically loads the parent `style.css` for you. Loading a second time will slow down the site and may be the cause of your issues.

    I’m also assuming Jetpack outputs CSS directly in ``. It’s possible that the CSS is more specific than what’s output in a separate stylesheet file. Theoretically, some CSS might just need to be more specific. It’s hard to say without knowing the exact style issue.

  3. Marcus Tibesar

    Thanks Justin for the quick reply.

    I removed the extraneous line from the child theme’s css but that did not improve styling.

    There are many style issues with the transition.

    For example the Header fonts are the wrong font and color.

    The background colors are a different color.

    The header and footer background colors have returned to black.

    The content is the wrong font.

    The photos are not ‘framed’ any longer (box shadow i believe).

    etc. etc. etc.

    Could you tell me what you mean by “some CSS might just need to be more specific” please.

    Once I understand that I should be able to tackle each styling issue one-by-one.

    Thank you very much Justin!

  4. Justin Tadlock

    I’ll try to keep this as simple and brief as possible. It really has to do with understanding how CSS works.

    CSS stands for “Cascading Style Sheets”. It works on the principles of specificity. So, let’s look at some code for example:

    `
    #site-title a { color: #000; }

    #site-title a { color: #333; }

    a { color: #eee; }
    `

    See, the first thing that’s going to happen if we’re looking at styling the site title link is that the browser has to figure out the most specific.

    `#site-title a` is more specific than `a`. So, it will take precedence.

    However, `#site-title a` is not more specific than `#site-title a`. The two CSS selectors are identical. The only way the browser can choose between them deals with the “Cascade” part of CSS. So, the last rule overwrites the first rule.

    How does this apply to our situation? See, Jetpack is going to consistently output things last, after all other style rules. Therefore, it’s going to win in the cascade. However, your child theme might not be winning in the cascade. So, it has to deal with specificity. There’s a good possibility that some other style rule is more specific than it. Or, if not more specific, it gets output later.

    Jetpack is good for some basic things, but it can give you a false sense of how CSS works because of this.

    With Stargazer, the theme outputs things directly in `` that will come after the child theme’s `style.css` file is loaded. So, it’s going to win in the cascade. This is intentional.

    ***

    Basically, we’d need to work through things one by one to figure them all out.

    For example, the site title link color is handled via the “Header Textcolor” option via Customize > Colors. So, some CSS is output after the child theme stylesheet. It’s best just to do that via the customizer.

    But, if you really wanted to change the color via CSS, you need to have something more specific than this:

    `
    #site-title a { color: #000; }
    `

    This will work:

    `
    #site-title a { color: #000 !important; }
    `

    Using `!important` is usually frowned upon by devs, but it gets the job done. You could also do this:

    `
    #header #site-title a { color: #000; }
    `

  5. Marcus Tibesar

    Wow, that’s such a great explanation and it’s crystal clear Justin.

    I can now fix each styling issue one-by-one and get off of JetPack’s heroin once and for all.

    Thank you very much!

    I’ll follow up and let you know how it all turned out. Should take me a few hours (days) – ha!

    Cheers!

  6. Justin Tadlock

    I doubt it would help. That deals with WP stylesheet file priority, which is a slightly different issue. Not to mention, it’s a Genesis-specific issue, which is a whole other can of worms. 🙂

    What you’re dealing with are inline styles printed to ``, which will always come after your stylesheet files are loaded. The same cascading and specificity rules still apply. It’s just a different situation than the order stylesheet files are loaded.

  7. Marcus Tibesar

    @ Justin – Ok Justin thank you! I love this specificity example of yours. I’ll use it as a guide when transitioning from JetPack Custom CSS to my child-theme style.css.

    #header #site-title a { color: #000; }
    
    #site-title a { color: #000 !important; }
    
    #site-title a { color: #000; }
    
    #site-title a { color: #333; }
    
    a { color: #eee; }

    @Shapeshifter 3 – I think you idea is great however, I would not give the installers the option to choose including the child-theme or not. I’d just include it. Thanks for the tip about the plugin in your ticket.

    @Mike – Yes, I copy colors all the time! Once (and I mean once) I painted my house. It turned out awful. I have no creative ability. On a scale of zero to ten, I am at about a -5. I learned then to copy colors. I took a professional painter over to the beautiful southwestern golf course and told him to paint the interior of my house the same as that clubhouse. Turned out beautiful. As a professional photographer you have a keen and creative eye. But don’t worry Mike, in a few months I’ll have something different! I’ve had over 20 or so themes and I never stop looking and changing! Btw, I enjoy your thebackcountry.org site – nice work there too!

  8. David Chandra

    hi justin.
    maybe unrelated:

    what do you think if HC have custom css feature (via customizer).

    this is something that I would not consider in the past but lately I think it’s a good idea.

    it will solve a lot of problem.
    I got a lot of support questions for my themes and most can be solved with several lines of css code.
    it’s just take to much time to explain to them about child theme etc. and I think for child theme author it’s even more complicated to explain that their mod will get over written.

    it will be a lot easier to day “go to customizer > custom css and paste this code..”

    external plugin can solve this, but if it’s a problem caused by theme I think it’s best to be solved by theme.

    it’s also a good customizer project.

    what do you think?

  9. Justin Tadlock

    I’m not sure if there’s anything Hybrid Core needs to do. We’re just talking a basic textarea in the customizer, which WP supports out of the box. The feature could be useful though. Themes could easily add it.

    What would you look from out of HC for such a feature?

  10. Marcus Tibesar

    Justin,

    It’s been a longgggggg day but I did notice something with my child theme style.css (annotated above).

    It’s all remarked out!

    Geez Louise!

  11. Marcus Tibesar

    Yep, it wasn’t even reading the Stargazer child theme style.css file.

    Removed the remarks; inserted the JetPack Custom CSS into the child theme style.css file; and shut off the JetPack Custom CSS module.

    Most of my styling is now appearing except for a couple of things which I’ll resolve tomorrow using your fixes Justin.

    Now I have only one more active JetPack module (Contact Form) to transition from!

    I am sorry for all the bother. I should have noticed the style.css lead-in code was remarked out.

    The good that came out of this is I am now using the Child Theme Configurator plugin and I have a great specificity chart for reference.

    Thank you @Justin @Mike and @Shapeshifter 3 – most appreciated!

  12. Justin Tadlock

    I always recommend a decent text/code editor so that you’ll be able to see things that are commented out. Personally, I use Notepad++: https://notepad-plus-plus.org/

    It’s simple to use, so it doesn’t seem like some foreign, advanced thing that you have to learn. Basically, if you can use regular ol’ Notepad on Windows, you should be able to use this.