1

I created a child theme and installed it but I don't know how exactly it works!

For example, in the parent theme I have the code below:

.header {
   margin-top: 10px;
   margin-bottom: 10px;
   width: 300px;
   height: 150px;
   background: white;
   border-width: 5px;
}

And I want to not include the width: 300px; , the background and the border-width (because i don't want background and border) and change the "margin-top: 10px;" to "margin-top: 15px;" in the child theme.

So normally in the child theme I would have:

.header {
   margin-top: 15px;
   margin-bottom: 10px;
   height: 150px;
}

The subject is that if I do that WordPress will automatically check first the style.css of the child theme and then the style.css of the parent theme. So it will execute the missing code (width: 300px; , the background and the border-width).

What should I do? I am a bit confused. Do I have to delete each line I don't want from the parent theme? But if I do that after an update it will add it again.

2
  • 1
    The documentation may clarify lots of things: codex.wordpress.org/Child_Themes
    – brasofilo
    Mar 24, 2013 at 22:59
  • This is actually a CSS question, though it may not appear to be, at first blush. Generally speaking, when creating a Child Theme, you start with a blank style.css file, add @import( '../parent-theme/style.css' ), and then progressively override any desired styles. Thus, this question ultimately becomes one of the CSS cascade, and overriding one style declaration with another. Mar 25, 2013 at 13:12

2 Answers 2

2

You are correct, that WordPress will load the style.css file from your parent theme first, and then the style.css from your child theme. These means because of how CSS itself works, you have to specifically override any rule you wish to override.

What this means is that you would need to modify the CSS within your Child Theme's style.css to be:

.header {
   margin-top: 15px;
   margin-bottom: 10px;
   width: 100%;
   height: 150px;
   background: none;
   border-width: 0;
}
2
  • So wherever i want to ignore some css rules i have to just put "zero" price or "none"?
    – Charitos
    Mar 25, 2013 at 9:36
  • WordPress will only automatically "load" the template (parent) Theme CSS file if the parent Theme is coded incorrectly. Otherwise, the only parent-Theme file loaded by WordPress is functions.php. That's why most Child Theme instructions begin with "add @import( '../parent-theme/style.css' ) to your Child Theme's style.css file." Mar 25, 2013 at 13:10
0

You may want to copy the header.php file to your child theme folder and look for and delete any style sheet imports from the parent theme. If you want the style sheets included import it in your child theme's style.css like so:

/* Import from parent theme styles first */
@import url('/path-to-parent-theme/style.css');

Then you can add all your CSS after. Your rules will override any of the ones from the parent.

You may also look at your functions.php for any importing of stylesheets. May look something like this:

wp_register_style( 'style',get_stylesheet_directory_uri() . '/style.css', false );
wp_enqueue_style( 'style' );

You can comment what you need out. You can use wp_deregister_style and wp_dequeue_style, but I've never gotten them to work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.