Child Theme style.css not loading

  • Hi,
    I am new to wordpress and I am having the same issue that others have when trying to implement a child theme, I’ve read through many posts here and elsewhere and still can’t figure out what’s wrong.
    I am following the tutorial by presscoders found here:
    https://www.presscoders.com/wordpress-theme-customization-guide/#chapterseven

    This is what I have:
    my style.css in the child theme folder looks have the following code:

    [ Moderator note: please wrap code in backticks or use the code button. ]

    /*
Theme Name:     Designfolio Child Theme
Theme URI:      https://www.presscoders.com/designfolio
Description:    A child theme of Designfolio.
Author:
Author URI:     https://www.presscoders.com
Template:       designfolio
*/
@import url("../designfolio/style.css");
/* Add your custom css below this line */
#header-container, .footer-widget-container {
background: #E01B6A;
}

    The folder structure is:
    wp-content/themes/designfolio
    wp-content/themes/designfolio-child

    the designfolio-child folder has the following files:
    style.css
    functions.php (empty)

    this is the url of my site:
    https://holamultimedia.net/wp/?page_id=14

    I am using Dreamweaver CS6 to edit the style.css and uploading to the server via ftp. Have tried to edit the child’s style.css via the appearance editor in the dashboard but that doesn’t work either.

    Any ideas? Any help is greatly appreciated.

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

  • Any time I see Dreamweaver, my first inclination is that it’s done something to the file which is causing the problem.

    What I would recommend is copying the text you posted above for your child style sheet into a plain text editor and save with with the name ‘style.css’, then upload that to your server.

    I’d bey money that will solve your problem.

    you have actually not reported yet what makes you believe that there is something wrong; i.e. what formatting are you trying to change and what is the result?

    style.css of the child theme gets loaded;

    have you made sure that the styles are specific enough to overwrite whatever you trying to overwrite?

    your problem is that for instance the #header-container background gets formatted in https://holamultimedia.net/wp/wp-content/themes/designfolio/includes/css/color_schemes/default.css?ver=3.6 which gets loaded after style.css of your child theme.

    try using a browser inspection tool (such as Firefox’ web developer add-on) to investigate those problems.

    try making the CSS edits using a custom CSS plugin which (usually) gets loaded after all other stylesheets.

    Alchymyth has some great points and, to add to that, the My Custom CSS plugin is an excellent choice for adding custom styles.

    Firefox has great development tools, but I prefer Chrome as it has a few other features and extensions that make doing web design easier. Either one will server you well.

    Thread Starter marilenis

    (@marilenis)

    thanks kcrusher and alchymyth, I’ll try your suggestions and report back..

    Thread Starter marilenis

    (@marilenis)

    @alchymyth, to answer your question about what formatting I’m trying to change and what is the result, these lines on the css
    #header-container, .footer-widget-container {
    background: #E01B6A;
    }

    should change the header and footer background. I copied these lines from the tutorial I’m following
    https://www.presscoders.com/wordpress-theme-customization-guide/#chapterseven
    I didn’t come up with them on my own..

    I find it interesting that the styles I am trying to modify get formatted (like you said above) in https://holamultimedia.net/wp/wp-content/themes/designfolio/includes/css/color_schemes/default.css?ver=3.6 which gets loaded after style.css of your child theme.

    So, what do you think is the right place to customize the stylesheet of a child theme? Wherever I look they say I need to create a subfolder and make the changes on the style.css there… This is confusing, I wonder if godaddy is my problem..

    Thread Starter marilenis

    (@marilenis)

    Well, I just installed My Custom CSS and added the simple lines

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

    and it worked! the color of the header is now a bright pink as intended. Thanks so much for the tip, although I am still curious about the style.css in the child theme folder.. oh well, we’ll use this for now..

    Thanks so much for the help ??

    No need to do anything to the style.css in your child theme – My Custom CSS does everything you need without having to work with the actual child theme style.css file.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Child Theme style.css not loading’ is closed to new replies.