Can't make changes to Child Theme

  • yahboyvinchi

    (@yahboyvinchi)


    9 years, 9 months ago

    Hello,

    I am currently trying to learn how to customize my WordPress Child Theme. This is the guide that I am following, http://www.presscoders.com/wordpress-theme-customization-guide/#chapterseven.

    I downloaded the Designfolio theme, created a child theme for it, activated that child theme, and used the Chrome Dev Tool (the Inspect element function) to find the CSS style code of the header of my child theme, and I changed the color in the code using a different hex number (the change appeared as I chose a different hex number). Then I copied the new code with the new hex number, went to Dashboard > Appearance > Editor. The style sheet originally looked like this:
    /*
    Theme Name: My Child Theme 1 (7/14, 10:09AM)
    Theme URI: http://www.presscoders.com/designfolio
    Description: Child theme for the Designfolio theme.
    Author: Vince Dao
    Author URI: http://www.presscoders.com
    Template: designfolio
    Version: 0.1.0
    */

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

    I copied the following code under the @import url line:

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

    According to the guide I posted above, I should be able to see the changes after I hit Refresh on my child theme page. However, I don’t see any. More strangely, I checked the CSS codes using Chrome Dev Tool and this is what I found

    media=”all”
    #header-container, .footer-widget-container {
    /* background: #253944; */ <- Default color
    }

    media=”screen”
    #header-container, .footer-widget-container {
    background: #880B56; <- My new color
    }

    So the style sheet was updated but the changes weren’t applied. Can you please help me on this one? Thanks a bunch!

    Btw, I would love to provide a link to my site for you guys to see, but I created my site locally. Will provide a link as soon as I got my site online. 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 9 months ago

    So this doesn’t work either:

    body {
    border: 10px solid red !important;
}

    ??

    Thread Starter yahboyvinchi

    (@yahboyvinchi)

    9 years, 9 months ago

    @andrew:
    Wow! That works instantly! Does this mean something is wrong with the code that I copied into my style sheet?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 9 months ago

    Maybe you’re using the wrong selectors. Are you using Firebug or another browser tool to see the HTML of the page, to see what you need to target?

    Thread Starter yahboyvinchi

    (@yahboyvinchi)

    9 years, 9 months ago

    @andrew: thanks a lot for your fast replies!
    I am using Google Chrome Dev Tool to see the HTML of the page (it’s a part of Google Chrome, accessed by right click on a web page > Inspect element), then all of the code should appear.

    Here’s the video that guided me on this one:
    https://www.youtube.com/watch?v=BmOyxceYAO4

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can't make changes to Child Theme’ is closed to new replies.