Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
1  
The documentation may clarify lots of things: codex.wordpress.org/Child_Themes –  brasofilo Mar 24 '13 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. –  Chip Bennett Mar 25 '13 at 13:12

2 Answers 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;
}
share|improve this answer
    
So wherever i want to ignore some css rules i have to just put "zero" price or "none"? –  Charitos Mar 25 '13 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." –  Chip Bennett Mar 25 '13 at 13:10

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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