WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Child Theme - style.css ignored for site title and description (9 posts)

  1. phyllwill
    Member
    Posted 2 years ago #

    I have a problem with a child theme. The parent them is Twenty Ten v1.2.

    Everything I've specified in the child theme stylesheet seems to work except for any changes to #site-title or #site-description ie only those items within the branding div.

    The only way to effect changes I have found is to directly edit them in the parent them's stylesheet.

    Can anyone help me understand what is going wrong and is there a better way to deal with it then the work-around of hacking the parent stylesheet? Is there a problem in header.php for example? I've not put a header.php in the child theme folder.

    The website I'm working on is http://oxfordmindfulness.org

    Thanks.

  2. peredur
    Member
    Posted 2 years ago #

    This is the style rule for the site title:

    #site-title {
      color: #002147;
      font-size: 2.5em;
      margin: 0;
      width: 540px;
    }

    If you check it in Firebug, you'll see that it's being taken from your child theme's style sheet.

    There are some style rules that are coming from the parent, but this is to be expected, if you haven't overwritten them. For example, the rule that floats the title left comes from the parent.

    So what are you expecting to see? For example what rule in the child theme style sheet is not being applied?

    For us to help, you'll have to leave the style sheet in the unsatisfactory state (with the rule omitted from the parent's style sheet) in order for us to see what's going on. Unless you do that, we're guessing.

    HTH

    PAE

  3. phyllwill
    Member
    Posted 2 years ago #

    Peredur, Thank you for your offer of help.
    I tried to revert the parent theme to the original and have achieved a different scenario.

    What I saw before using firebug was that the site-title was using the rules from the parent stylesheet in particular width: 700px; but the site description was using the rules from the child stylesheet width 400px; Since this was within a 940px wide element this caused it to be displayed below the site title and not alongside as I intended.

    Having changed the parent stylesheet as a work-round and now changed it back (to show you) it now seems to be using the definitions from the child stylesheet in both cases as I intended.

    This may have been the end of it except that now the #header padding, which is defined as padding: 0; in the child stylesheet but as padding: 30px 0 0 0; in the parent stylesheet is displaying with the 30px padding at the top.

    I am so confused. I've tried clearing the browser cache in case it is actually a local problem. I've double-checked the syntax in the stylesheets. What next?

    Here are the relevant bits from the 2 stylesheets (copied and pasted so syntax is as is):

    /* extract from child theme stylesheet*/
    #header {
    padding: 0;
    }
    #site-title {
    color: #002147;
    margin: 0;
    font-size: 2.5em;
    width: 540px;
    }
    #site-title a {
    color: #002147;
    }
    #site-description {
    margin: 0px 0 4px;
    width: 400px;
    text-align: right;
    }

    /* This is the custom header image */
    #branding img {
    border-top: 2px solid #002147;
    }

    /*extract from parent theme stylesheet*/
    /* =Header
    -------------------------------------------------------------- */

    #header {
    padding: 30px 0 0 0;
    }
    #site-title {
    float: left;
    font-size: 30px;
    line-height: 36px;
    margin: 0 0 18px 0;
    width: 700px;
    }
    #site-title a {
    color: #000;
    font-weight: bold;
    text-decoration: none;
    }
    #site-description {
    clear: right;
    float: right;
    font-style: italic;
    margin: 15px 0 18px 0;
    width: 220px;
    }

    /* This is the custom header image */
    #branding img {
    border-top: 4px solid #000;
    border-bottom: 1px solid #000;
    display: block;
    float: left;
    }

  4. peredur
    Member
    Posted 2 years ago #

    I can't think of any reason why it should be behaving like this, I have to confess.

    BTW, you do know that your child style sheet should only contain your new and modified style rules, don't you? The parent style sheet is imported at the top in the @import statement. So you don't need to repeat any rules in the child style sheet that are already specified in the parent.

    I don't think this is making any difference, but I thought you'd like to know.

    Cheers

    PAE

  5. RonStrilaeff
    Member
    Posted 1 year ago #

    This thread is not closed so I thought I'd ask the OP ...

    What did you do to resolve this? Did you copy the whole original style.css into your child theme folder?

    I'm having a similar issue on one of my sites. At some point in time the #header id property on my canvas child theme gets ignored. Other custom styles are not ignored. I can reset it by activating canvas and then reactivating my child theme, but obviously that's unacceptable.

    I just wonder why it seems to revert back to the original, but only for the #header id ?

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It's better to start a new thread -- you will more likely be helped when there is only 1 post on your thread.

    It's "normal" for some CSS to get picked up from the parent CSS file and others from the child CSS file -- it depends on the specificity of the CSS code in question. But it sounds like you may have something else going on. If you post a link to your site, someone can likely help you sort out what's going on and how to fix it.

    And no, you don't need to and should not just copy the entire parent CSS to the child version.

  7. phyllwill
    Member
    Posted 1 year ago #

    Just to answer Ronstrilaeff...
    Sorry to have left his hanging. It took me a while to track down the answer and I forgot to get back to close off here.
    The issue is to do with css specificity rules.
    I found this blog explained in a helpful way.
    http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
    The basic thing seems to be that if you have this problem be as specific as necessary when defining the css in the child theme.

    So, for example, this didn't work:

    .latestnews {
    background: none repeat scroll 0 0 #F9F9F9;
        border: 1px solid #CCCCCC;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
        padding: 2px;
        margin:0;
        width="150";
    	height="150";
    }

    but this does:

    #wrapper .latestnews {
    	background: none repeat scroll 0 0 #F9F9F9;
        border: 1px solid #CCCCCC;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
        padding: 2px;
        margin:0;
        width="150";
    	height="150";
    }

    Hope this helps :)

  8. RonStrilaeff
    Member
    Posted 1 year ago #

    Hi, Thanks both for replying. I sometimes resort to !important to get things working but I know I should understand the precedence and specificity rules better.

    I'm still not sure why the rule I put in my child theme took effect for a while then apparently got over-ruled, so it but it's probably a caching issue. When I see that again, I'll probably dig in a little deeper with that good reference that phyllwill left. I also like Chris Coyier for his clear examples and explanations. His site is becoming cartoony because of his overuse of css-"tricks". :-)

  9. phyllwill
    Member
    Posted 1 year ago #

    Marking this as resolved now.

Topic Closed

This topic has been closed to new replies.

About this Topic