WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] twentyfourteen-child is not working (11 posts)

  1. netadminoh
    Member
    Posted 8 months ago #

    Here is what the twentyfourteen-child style.css looks like:

    /*
    Theme Name: Twenty Fourteen Child
    Theme URI: http://wordpress.org/themes/twentyfourteen
    Description: Twenty Fourteen Child Theme
    Author: WPMU
    Author URI: http://wpmu.com
    Template: twentyfourteen
    Version: 1.0.0
    */
    @import url("../twentyfourteen/style.css");
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    .page-content {
    margin: 0 auto;
    max-width: 100%px;
    }
    --------------------End of code ---------------------

    The default max-width is 474px. On the original style.css if I change max-width: 100%px; then the text on page shows wider. when I leave the original at 474 and change the child to 100%, nothing happens.

  2. jnhghy
    Member
    Posted 8 months ago #

    Because this is a css issue sharing the website url can help.
    What I can assure you is that max-width: 100%px; is an invalid css rule and using it will cause unexpected results in different browsers.
    Here are some info about max-width

  3. netadminoh
    Member
    Posted 8 months ago #

    Based on recommendation that 100%px is invalid, changed to 950px.
    the original theme style.css = max-width: 474px;
    the child theme style.css = max-width: 950px;
    Each time I change oode in style.css, I restart Web Server Service and clear browser cache.

    2 Tests conducted
    1st without child style.css.
    on original style.css = max-width: 950px;
    web page showed wider text as expected.

    2nd with child style.css.
    on original style.css = max-width: 474px;
    on child style.css = max-width: 950px;
    Web page stays at 474 and does not go to 950px as expected

    here is child style.css code
    /*
    Theme Name: Twenty Fourteen Child
    Theme URI: http://wordpress.org/themes/twentyfourteen
    Description: Twenty Fourteen Child Theme
    Author: WPMU
    Author URI: http://wpmu.com
    Template: twentyfourteen
    Version: 1.0.0
    */
    @import url("../twentyfourteen/style.css");
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    .page-content {
    margin: 0 auto;
    max-width: 950px;
    }
    --------------------------End of Code ----------------

  4. Andrew
    Forum moderator
    Posted 8 months ago #

    If your Child Theme is not working try testing it with something more obvious like:

    body {
     border: 10px solid red !important;
    }
  5. netadminoh
    Member
    Posted 8 months ago #

    added body code and red boarder did appear. this means that the child style.css is setup correctly. If this assumption is wrong, let me know.
    Next - I commented out the code that I copied and manally typed in.
    Test did not change width of text as expected. here is child style.css

    /*
    Theme Name: Twenty Fourteen Child
    Theme URI: http://wordpress.org/themes/twentyfourteen
    Description: Twenty Fourteen Child Theme
    Author: WPMU
    Author URI: http://wpmu.com
    Template: twentyfourteen
    Version: 1.0.0
    */
    @import url("../twentyfourteen/style.css");
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    /*
    .page-content {
    margin: 0 auto;
    max-width: 950px;
    }
    */
    body {
    border: 10px solid red !important;
    }
    .page-content {margin: 0 auto;max-width: 950px;}

  6. pyjamaman
    Member
    Posted 8 months ago #

    The actual code from twentyforteeen's stylesheet is this:

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    margin: 0 auto;
    max-width: 474px;
    }

    That's 5 items having their max-width set to 474px. If you use the equivalent in your child stylesheet the max-width will probably change. I'm betting this might work too:

    .site-content .entry-content {
    margin: 0 auto;
    max-width: 950px;
    }

  7. netadminoh
    Member
    Posted 8 months ago #

    This may not be best practice but here is a test that worked.
    Since the process of child entries is a copy from original and paste to child or add other code, I copied the complete style.css original and pasted to the child. Then I changed .page-content max-width: 950px. I left the red boarder so that I know I'm looking at the child and not the original. this seems to have worked. Is there any issue with this approach?

  8. netadminoh
    Member
    Posted 8 months ago #

    Since we have confirmed that that child is working. I'm going to close this thread. Thanks everyone for your help.

  9. esmi
    Forum Moderator
    Posted 8 months ago #

    I copied the complete style.css original and pasted to the child

    No - that's completely the wrong way to go about it, The child theme's stylesheet should only contain your changes and nothing else.

  10. netadminoh
    Member
    Posted 8 months ago #

    esmi - thank you for your help. I have removed original code from child to follow best practice. I'm continuing this discussion on thread "How To Process a change in a theme-child". Please join me there. Thank You.

  11. netadminoh
    Member
    Posted 8 months ago #

    pyjamaman - thank you for your help. It appears your recommendation worked. Please go to new threard, "How To Process a change in a theme-child". I'll finish up discussion there. Thanks again.

Reply

You must log in to post.

About this Topic