WordPress.org

Ready to get started?Download WordPress

Forums

Child CSS Not Overriding Parent Stylesheet/s (21 posts)

  1. Fishpaws
    Member
    Posted 1 year ago #

    I am new to WordPress, so please bear with me if this is a rudimentary question - I've been scratching my head for a few hours and I am not getting something about the relationship between Child and Parent sheets. Please help!

    I started out attempting to follow a tutorial which details setting up a child style.css file to change the header background color. I got everything set-up as the tutorial instructed, but the alterations specified in the child CSS file were being ignored when the page loaded.

    Tutorial theme used: (http://www.presscoders.com/designfolio-free-download/)

    I knew that the child CSS page was in the correct spot, as I was able to select it via the WordPress Admin section of the site and load it. I'm also sure that the Import URL address at the top of the child CSS file was correct, as if I removed it, all of the CSS styling was lost when I reloaded the page. So it was correctly referencing the parent "style.css" file.

    Additionally, as part of the tutorial involves using Google Chrome Dev Tools to inspect the page elements, I was able to see that after adding alterations to the child CSS page, they were in fact showing up in the Dev Tool inspector. However, they were struckthrough, as is visible in this screenshot: http://s18.postimage.org/y2u94e0wp/copy.jpg. When I made the screenshot, I also noticed that the stylesheet being referenced to supply the #header-container attribute value was NOT the parent main "style.css" file but rather a totally different "default.css" file buried further down in the parent theme includes folder, one that specifically handles colors for the theme.

    Realizing that the attribute I was trying to change was not in the parent style.css file, I tried changing one that WAS - altered the header-container padding at the top of the page - and lo and behold the change worked!

    So how do I handle this situation? The page attributes are spread across multiple CSS files in this theme, and I'm assuming my header-container color change did not work because the color "default.css" file was not imported in the child style.css file. Does this mean that each css file needs to be imported separately in the child style.css file? Please help clear up my confusion.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Nope, multiple CSS files is totally normal. What you need to do is use specific enough selectors so that your CSS will take precedence. Because CSS is read top-down, you usually only need to use the same selectors from the other stylesheets (no matter which one) in your child theme -- and then change the styles in the copied CSS.

    It's kind of hard to explain theoretically, so if you have a concrete example and a link to your site, that might be easier to address.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Re: your image, I'm not sure that's the child theme CSS (it may be the parent) unless it's some that you added? Without looking at the site, no way to say for sure.

  4. irestmyshowcase
    Member
    Posted 1 year ago #

    Tested the starter child-theme from the link u provided? May help.
    I have also been trying out child-themes, and I used this tutorial, a really good one: http://themeshaper.com/2009/04/17/wordpress-child-theme-basics/

    They got loads of info on this!

    But me and child-themes, I ended up making my own theme, we will see how it goes.

    Peace

  5. Fishpaws
    Member
    Posted 1 year ago #

    Thank you all for your replies. Right now the file is a local instillation I'm running through Easy PHP. I will try and find time to upload it today.

    WPyogi - re: screenshot. The code circled in red is the original code for the template that resides in a file called "default.css" in the "Includes" folder for the theme. The code circled in green is the code that I added to the child "style.css" file. My point in including this was to show that I've copied the original code and placed it in the child file, and yet the child values are not taking precedence.

    In "default.css":

    #header-container, .footer-widget-container {
    background: #253944;
    }

    What I placed in the child "style.css":

    #header-container, .footer-widget-container {
    background: #E01B6A;
    }

    Why is the child "style.css" attributes not overriding the exact same attribute in the "default.css" sheet? Instead, as you see on the screenshot, it's struckthrough.

    Right now my understanding is that the only URL import I need to add is the primary /theme/style.css link.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It's hard to say for sure without seeing the site live, but it may be that the default.css file is being loaded/read after your child theme file. Look in the View Source code for the page -- in the head section you can see the links to CSS files - is the default.css file after the child theme file? If so, you can override that by either adding another selector to the child theme style (increasing specificity) or using the !important -

    #header-container, .footer-widget-container {
    background: #E01B6A !important;
    }

    It's also possible you have an error in your child theme style.css file -- any syntax error will render subsequent CSS non-functional. So validating for errors would be a troubleshooting step as well:

    http://jigsaw.w3.org/css-validator/

  7. Fishpaws
    Member
    Posted 1 year ago #

    Well first, off, adding !important after the attribute in the Child "style.css" file worked immediately. So I see that this is the sure-fire way to determine priority.

    I took a look in the source code as you suggested to see what order the themes are being interpreted. Here's what I found:

    <link rel="stylesheet" href="http://127.0.0.1/modules/asenville/wp-content/themes/designfolio-child/style.css" type="text/css" media="screen" />
    <meta name='robots' content='noindex,nofollow' />
    <link rel='stylesheet' id='fancybox-stylesheet-css'  href='http://127.0.0.1/modules/asenville/wp-content/themes/designfolio/api/js/lightboxes/fancybox-1.3.4/jquery.fancybox-1.3.4.css?ver=3.5.1' type='text/css' media='all' />
    <link rel='stylesheet' id='color-scheme-stylesheet-css'  href='http://127.0.0.1/modules/asenville/wp-content/themes/designfolio/includes/css/color_schemes/default.css?ver=3.5.1' type='text/css' media='all' />
    <script type='text/javascript' src='http://127.0.0.1/modules/asenville/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
    <script type='text/javascript' src='http://127.0.0.1/modules/asenville/wp-content/themes/designfolio/api/js/html5/modernizr/modernizr.custom.97935.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://127.0.0.1/modules/asenville/wp-content/themes/designfolio/api/js/html5/modernizr/pc_modernizr_custom.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://127.0.0.1/modules/asenville/wp-content/themes/designfolio/api/js/misc/superfish-1.4.8/js/superfish.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://127.0.0.1/modules/asenville/wp-content/themes/designfolio/includes/js/pc_superfish_init.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://127.0.0.1/modules/asenville/wp-content/themes/designfolio/api/js/lightboxes/fancybox-1.3.4/jquery.fancybox-1.3.4.pack.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://127.0.0.1/modules/asenville/wp-content/themes/designfolio/api/js/presscoders/custom-fancybox.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://127.0.0.1/modules/asenville/wp-content/themes/designfolio/api/js/lightboxes/fancybox-1.3.4/jquery.easing-1.3.pack.js?ver=3.5.1'></script>
    <script type='text/javascript' src='http://127.0.0.1/modules/asenville/wp-content/themes/designfolio/api/js/lightboxes/fancybox-1.3.4/jquery.mousewheel-3.0.4.pack.js?ver=3.5.1'></script>
    	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    </head>

    Indeed, my child "style.css" file is first link listed, and the color-specifying "default.css" shows up 2 links later. So this seems to prove your intuition correct - that my child file was composed correctly, but it's instructions are being erased by subsequent instructions from the "default.css" file.

    So, what does this mean? I'm happy to use the workaround that you just showed me, but there's gotta be something else wrong here right? Or may is this theme just a piece of crap that doesn't compile correctly?

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yep, you don't really want to use !important unless absolutely necessary (just better coding practice).

    I'd suggest asking the theme author about this - you can post a theme question here:

    http://wordpress.org/support/theme/designfolio

  9. Fishpaws
    Member
    Posted 1 year ago #

    OK, I will. Thank you for all of your assistance and suggestions, I think I'm simply going to find a different theme to work with!

    J

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    LOL - well, that's always one way to go -- and with so many nice themes, have at it :). You're welcome, too.

  11. mehrshadk
    Member
    Posted 1 year ago #

    Dear WPyogi

    Thank you so much for information. This was really helpful to me.

    Regards

  12. Lhutch
    Member
    Posted 1 year ago #

    It maybe that you don't have this at the top of your child theme style.css:

    @import url("../twentytwelve/style.css");

    replace twentytwelve with your theme name, this should over-ride your parent style.ss

    It should be placed directly after this (any twenty twelve text replace with your theme name):

    /*
    Theme Name: Twenty Twelve Child
    Theme URI: http://example.com/
    Description: Child theme for the Twenty Twelve theme
    Author: Your name here
    Author URI: http://example.com/about/
    Template: twentytwelve
    Version: 0.1.0
    */

  13. ghslusher
    Member
    Posted 1 year ago #

    Fishpaws, I've been dealing with the exact same issue..I started back in January, got fed up, and just gave it another look. After carefully reviewing the code in chrome, I finally realized that the banner wasn't in the style.css file. So frustrating! I'm also fairly new to this, so if you stumble upon a tutorial for customizing the themes, and it's straight forward, please share.

    Thanks

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @ghslusher - what theme are you using? CSS is theme and site specific, so you can't use interchange any specific CSS rules.

  15. ghslusher
    Member
    Posted 1 year ago #

    It was the designfolio theme that was referenced in the original post from fishpaws. The bigger issue is customizing css that isn't part of the default style.css file. Like fishpaw said, this particular css file ("default.css") file was buried further down in the parent theme includes folder, one that specifically handles colors for the theme.

    The larger issue is how do you easily customize a theme when the site is using css outside of the standard style.css file?

  16. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    In general, it doesn't matter where the styles are coming from - you just use CSS in the child theme that will override the existing styles. If, as in this theme, the stylesheet is being loaded after, then you have to increase the "specificity" of the styles - which will then override even later styles. A quick example of that might be:

    <div class="content">
    <h2 class="entry-header">My Header Text</h2>
    <p class="article-text">.....</p>
    </div>

    and the CSS (buried in the theme or even from a plugin or someplace else) is:

    .entry-header {
       color: red;
    }

    So then you can't just use the same CSS - but you could override it by using:

    .content h2.entry-header {
       color: green;
    {

    Once is a while, even that won't work and then you could use the !important rule mentioned above. But the better solution would be to change the order those stylesheets are enqueued in the theme...

    CSS is definitely a bit tricky sometimes - but you can usually make it work if you know a bit more about how it works.

    All that said, there are some themes that won't work with a child theme - but in those cases, nothing will work in, so it's pretty clear right away.

    This is a good CSS reference site if you're interested:

    http://www.w3schools.com/css/default.asp

    And Firebug is also the best tool for working with it - lots of good info on their website as well.

  17. octobermisfit
    Member
    Posted 11 months ago #

    I, too, was following the same tutorial listed in this post. I was frustrated to discover that the CSS was being overridden even though I followed the tutorial instructions. I was able to resolve the issue for this particular setup by editing the parent theme header file head tag thusly:

    <head>
    <meta charset="utf-8" />
    
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <?php PC_Hooks::pc_head_top(); /* Framework hook wrapper */ ?>
    
    <meta name="viewport" content="width=device-width">
    
    <?php wp_head(); ?>
    
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
    </head>

    In short, I moved the <?php wp_head(); ?> ahead of the stylesheet reference. This then allowed the includes folder to be called before the stylesheet. Now I don't have to worry about using !important any time I want to change a color with this theme.

    Thanks WPyogi for determining the order issue! And thanks Fishpaws for posting this in the first place...I was glad I was not the only one with this issue!

  18. niallolaoghaire
    Member
    Posted 10 months ago #

    Indeed, thanks to all. I just used this method with the mystile theme & it worked!!

  19. Perfexionist
    Member
    Posted 10 months ago #

    ...it may be that the default.css file is being loaded/read after your child theme file.

    I'm experiencing that problem. The code I'm trying to use in my child theme's style.css is:

    img {
         margin: 15px !important;
         border: solid black 1px !important
    }

    How would you guys recommend fixing the problem? I'm using !important now as a temporary fix, but understand that it's not good coding practice.

    Also, I am trying to avoid solutions that modify any files in the original theme because if I do that, all of my changes will be lost during a theme update--correct?

    Thanks for all the help in this thread!

  20. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    I'd recommend starting your own thread and including a link to your site - as it's not possible to help with CSS without seeing your site.

    And yes, you should be using a child theme for any changes.

  21. brunchinaustin
    Member
    Posted 6 months ago #

    Thanks for this thread! Moving <?php wp_head(); ?> ahead of the stylesheet definitely did the trick.

Topic Closed

This topic has been closed to new replies.

About this Topic