WordPress.org

1. phyllwill
   Member
   Posted 5 months 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 5 months 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 5 months 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 5 months 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

Reply

You must log in to post.