WordPress.org

Forums

[Child theme] New styles not showing (4 posts)

  1. Jan-Jaap
    Member
    Posted 1 year ago #

    Hello!

    I'm trying to get a child of the TwentyEleven theme to work on my site (which is here: http://blog.jappie.net/). I have:

    • made a folder for my theme in /wp-content/themes/twentyeleven-child
    • uploaded into it a style.css file with the content:
      /*
      Theme Name:     Twenty Eleven Child
      Theme URI:
      Description:    Child theme for the Twenty Eleven theme
      Author:         Jan-Jaap Severs
      Author URI:     http://blog.jappie.net/
      Template:       twentyeleven
      Version:        0.1.0
      */
      
      @import url("../twentyeleven/style.css");
    • Activated the child theme in the Manage Themes section of the admin panel

    Now, this gives me a look just like TwentyEleven, which is correct.

    Next, I try to add some new styles using the Appearance Editor in the admin panel. My style.css now looks like this:

    /*
    Theme Name:     Twenty Eleven Child
    Theme URI:
    Description:    Child theme for the Twenty Eleven theme
    Author:         Jan-Jaap Severs
    Author URI:     http://blog.jappie.net/
    Template:       twentyeleven
    Version:        0.1.0
    */
    
    /* Note that I did delete the @import on purpose */
    
    .singular.page .hentry {padding:0;}
    .singular .entry-header,
    .singular .entry-content,
    .singular footer.entry-meta,
    .singular #comments-title {
        margin: 0 auto;
        width: 90%;
    }
    
    pre {
    	font-size: 10px;
    }
    
    .reddish {
    	color: red;
    }

    Saving this does not change the width of my posts, nor do I get red text when I use the reddish class in a span tag. In the page source of my pages I see that the correct style.css is being referenced in the head (the one in the twentyeleven-child folder). However, when I open that css file in my browser by clicking the link, the contents show as:

    /*
    Theme Name:     Twenty Eleven Child
    Theme URI:
    Description:    Child theme for the Twenty Eleven theme
    Author:         Jan-Jaap Severs
    Author URI:     http://blog.jappie.net/
    Template:       twentyeleven
    Version:        0.1.0
    */
    
    @import url("../twentyeleven/style.css");

    Note that the @import command has returned, even though I deleted it.

    When I download that same file using FTP, the contents show as:

    /*
    Theme Name:     Twenty Eleven Child
    Theme URI:
    Description:    Child theme for the Twenty Eleven theme
    Author:         Jan-Jaap Severs
    Author URI:     http://blog.jappie.net/
    Template:       twentyeleven
    Version:        0.1.0
    */
    
    .singular.page .hentry {padding:0;}
    .singular .entry-header,
    .singular .entry-content,
    .singular footer.entry-meta,
    .singular #comments-title {
        margin: 0 auto;
        width: 90%;
    }
    
    pre {
    	font-size: 10px;
    }
    
    .reddish {
    	color: red;
    }

    It seems as though what I edit using the Appearance Editor is not what is used on my pages, but is saved to the webserver as I can download it using FTP. What could be going on here?

    Thanks for any help!

  2. Andrew
    Forum moderator
    Posted 1 year ago #

    Note that the @import command has returned, even though I deleted it.

    Don't delete it anyway, you want to be inheriting from the parent theme.

    First deactivate all plugins and then clear your cache. If that fails, talk to your hosting providers to see whether they do some server-side caching and ask them why your file isn't updated.

  3. WPyogi
    Forum Moderator
    Posted 1 year ago #

    Do you have caching enabled on your site or server? Have you cleared your browser cache?

    Your child theme seems to be working fine for me - adding styles in Firebug works fine.

  4. Jan-Jaap
    Member
    Posted 1 year ago #

    Thank you for the replies. It turns out that my hosting company is indeed using a server-side cache for files like images and css. I found out how to force a fresh copy of the css file into the browser, and now my changes to the css seem to be showing.

    Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic