WordPress.org

Forums

[resolved] How to process a change in a theme-child (15 posts)

  1. netadminoh
    Member
    Posted 1 year ago #

    test site: http://www.leproject.org
    WP 3.9.1 - Theme - Twenty Fourteen
    have created - \wordpress\wp-content\themes\twentyfourteen
    also - \wordpress\wp-content\themes\twentyfourteen-child
    The child folder has - style.css

    the child style.css contents are:
    /*
    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
    -------------------------------------------------------------- */
    p {
    margin-bottom: 1em;
    }
    ---------- END of Child Style.css -----------------------

    I need to know if I am understanding process correctly: the explanaton below is an example. Actual syntex is not the focus.
    if I don't want the style.css in the twenty fourteen theme to have the margin bottom at 5em and want it to be changed to 1em, I can just go to the original style.css and copy then past the margin bottom to the child style.css and change the 5em to 1em.
    once the child style.css has been saved, then the child style.css will override the original style.css

    Am I correct in this process of thinking? If not, please correct for me.
    Thank You.

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    I can just go to the original style.css and copy then past the margin bottom to the child style.css and change the 5em to 1em.

    Yes.

    once the child style.css has been saved, then the child style.css will override the original style.css

    Yes. The stylesheet & template files in the child theme always take precedence.

  3. netadminoh
    Member
    Posted 1 year ago #

    Thank you for your quick response.
    As you see, I have in the child folder just one document being style.css. Should I be creating stylesheet & template files the same way or do I cut and paste, and where do I find stylesheet and & template files.
    Thank You.

  4. netadminoh
    Member
    Posted 1 year ago #

    Here is a small test to show that child style.css works.

    /*
    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 -----------------

    When I change max-width: 474px to 100%px in the "Original" style.css, I get the expected results of a wide text body display. However, when I leave the "Original" style.css at the default max-width: 474 and change the child max-width: 100%px, the text does not change and remains at the 474.
    Process was copy from original and past to child. Then change child to 100%px. Suggestions on how to test this out?

  5. Pioneer Web Design
    Member
    Posted 1 year ago #

    Did you use '100%px' or the proper '100%'? Also, make sure to clear both server cache and refresh your browser on each edit.

  6. netadminoh
    Member
    Posted 1 year ago #

    Please help with syntex:

    Which one is right or type what I need please

    1. max-width: 100%px;
    2. max-width: 100%?;

  7. netadminoh
    Member
    Posted 1 year 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 ----------------

  8. netadminoh
    Member
    Posted 1 year 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?

  9. netadminoh
    Member
    Posted 1 year ago #

    A Forum moderator clearly says copying all orininal style.css to child is not a good idea. So I'm back to square one. the answer lies in the syntex.

    In the child style.css, the code below is not sufficient. So what is?
    .page-content {
    margin: 0 auto;
    max-width: 950px;
    }

  10. esmi
    Forum Moderator
    Posted 1 year ago #

    You can use the classes and ids of the parent elements to provide greater selectivity and over-write the parent theme. That said, where is this .page-content class being generated? I can't see it in your page.

  11. netadminoh
    Member
    Posted 1 year ago #

    esmi - I'm a quick learner so first i need to study classes and ids to dialog with you correctly. I will followup with you on this. another member - pyjamaman - gave me a recommendation and it seems to work. So with best practice in mind, here is the code for the theme-child. Let me know If I'm on track. Thanks again.

    /*
    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
    -------------------------------------------------------------- */
    body {
    border: 10px solid red !important;
    }
    .site-content .entry-content {margin: 0 auto;max-width:950px;}
    ---------------End of Code -----------------------

  12. esmi
    Forum Moderator
    Posted 1 year ago #

    What you have in your child theme's stylesheet is immaterial if there is no no such class to apply the CSS to on the page. So where is this class in the generated markup.

  13. netadminoh
    Member
    Posted 1 year ago #

    esmi - just took a quick course in Class and ID's. Still weak on the subject, but realized that I cannot enter into the child a partial command. See if below is more on track. I tested and it does work at the 950px width. Also I learned that using percentage syntax is (max-width: 100%) not max-width: 100%px)

    /*
    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
    -------------------------------------------------------------- */
    body {
    border: 10px solid red !important;
    }
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    margin: 0 auto;
    max-width: 950px;
    }

  14. esmi
    Forum Moderator
    Posted 1 year ago #

    That looks a lot more reasonable. :-)

    Have you tried using Firefox with the Firebug add-on for this kind of CSS work. It could make it a lot easier to find out what CSS is already being applied and what classes/ids are available for use. Or use whatever developer tool is available in your web browser.

  15. netadminoh
    Member
    Posted 1 year ago #

    I'll look into Firebug. I've seen others talking about it. My universe is actually in networking development. I was forced to deal with a web server and IIS 7 so one thing led to another.

    I'm moving on to paragraph issues. I welcome your coaching there as well if your so enclined.
    thread - "Remove space between paragraphs in theme"
    esmi - Thank You for your time. I'm closing this thread.

Topic Closed

This topic has been closed to new replies.

About this Topic