overriding Parent files with Child files

have you got the correct stylesheet selected in the header.php?

You only need to use the regular child theme structure — but you may need to use more specific selectors in the child theme style.css file to override existing styles (no matter where they are from).

Without a link to your site, there is no way to give specific help with CSS issues like this, so if you can do that, someone can likely help further.

Also, be sure that you’ve cleared any caches (browser/server)!

Cache is clear.

I have no stylesheet connected in my headed.php. I assume, as it is with the parent, all style sheets are pull in with some query. The child theme’s style.css is working, so I assume it must be connected correctly. Don’t no about the layout.css though, the parent is reading it, so it must be connected there. Should I make a direct link to that in my child?

The site is https://www.essentialopals.com.

Thanks.

Your child theme stylesheet should not have a copy of any other stylesheets in it — it only contains the changes that will override existing (parent) styles.

Actually, I just looked again at your site and there is a built in Custom CSS file — so why are you not using that?

The child theme stylesheet doesn’t have a copy of any other stylesheets in it. It only has the parents style.css imported as per the wp documentation.

regarding the custom css file, I didn;t know it was there until after I have already created the child theme and made modifications, so I decided to persevere with it this way – as far as I know, it shouldn’t make any difference and I need to change the html too – structure divs, move menus around, so I need a child anyway. I know there is a section in the wp cms to input custom html too, but that doesn’t make any sense to me as how will the cms know where to put the html.

Also i’m not sure what you mean by ‘use more specific selectors’. do you mean, for example the I might need to put #wrapOverall #content #sidebar {width…}. (This is the first site i’ve ever build and just learning as i go, especial php, which I have never dealt with before). If it was just html and css i’s be find, but with nearly everything being created with queries, it’s very difficult to find where changes need to be made.

Also with the child’s style.css, will it only override the parent’s style.css, or will it override all stylesheets it the parent’s directories (e.g. including the layout.css). I copied the layout.css into my child because I assumed I would need to override it directly. Perhaps I should use the custom css to override the layout.css.

The child theme stylesheet doesn’t have a copy of any other stylesheets in it. It only has the parents style.css imported as per the wp documentation

So you have 785 lines of changes? Okay, just making sure.

And sure, fine to use child over custom CSS, and yes, if you are changing php file, definitely the way to go.

use more specific selectors’. do you mean, for example the I might need to put #wrapOverall #content #sidebar {width…}

Yes, if styles are not “working” it’s usually due to selectors not being specific enough.

Are you using Firebug to work with the CSS — it shows you the CSS that is affecting a specific area/element on a page. Also, this is a good CSS reference:

https://www.w3schools.com/css/default.asp

Actually I don’t have 785 lines of changes. I think I misunderstood you before. I thought you mean’t that I might have linked the whole parent style sheet to the child instead of importing it. Anyway, I did actually copy and paste all the “SITE STRUCTURE & APPEARANCE” styles from the parent, as I wasn’t yet sure which ones I would be changing. I thought I would just copy them all then change them as I go.

Of all this, I have only changed one attribute – on line 591 i change the background to none, though I didn’t have any effect, the background is still there.

My custom styles are working though, from line 519 up. These where previously from my custom theme. I actually had a basic website set up before, then I wanted to add the shop, but that out of my league, so I needed to start again, with a new template and the ecommerce framework set up. Now I trying to customise the theme to look like the site I intended it to be.

I am using firebug to find the CSS and html elements, (but editing in dreamweaver). This is how I found the layout.css file.

oh, regarding copying the parent css into the child, I would thing this would solve any issues of the selectors not be specific enough, as I any only overriding the attributes so selector that are already set up.

Anyway, I did actually copy and paste all the “SITE STRUCTURE & APPEARANCE” styles from the parent, as I wasn’t yet sure which ones I would be changing. I thought I would just copy them all then change them as I go.

That’s not the best way to go — it creates duplicate styles and makes it much harder to keep track of what you have changed, etc. I’d suggest you remove all of it except the code you have changed.

If you use Firebug, it’s easy to see the code you need to copy (or create) into your child stylesheet. You don’t usually need to worry about where the styles are coming from (i.e. different stylesheets) — unless they are inline or internal and then you may have a specificity/cascade issue — but then you can use more specific selectors and/or use !important to override.

Ok, will remove all the duplicate css and include only my changes.

when including these changes, for example, If I wanted to change the look of my shop items, instead I simply modifying the “.product” selector, I might need to put in “#content #main .products .product”.

How/where do I use !important.

Yep, that’s the concept of increasing the specificity of the CSS selectors — more specific will override less specific.

!important will force an override no matter what the specificity. It’s best to use it only as a last resort, but it can come in handy — say when you have an inline style that has come from a plug-in or iframe or something else — where you can’t, for the life of you, figure out where to change that style – so then you can use !important to do so. So for example, let’s say you had this HTML:

<p class="mytext" style="color: red; font-size: 12pt;">Content here</p>

Normally, any external (stylesheet) CSS won’t override those styles, because inline will take precedence, but you can force it by adding !important like this:

p.myclass {
   color: blue !important;
}

Ok. Thanks very much.

I tested this out on the top menu background, which I am trying to clear.

According to Firebug, the location is:

<body class="archive post-type-archive post-type-archive-product logged-in admin-bar gecko alt-style-default layout-right-content theme-eotheme woocommerce woocommerce-page customize-support parent">
      <div id="WrapOverall" class="parent">
            <div id="top" class="parent">

the CSS is:

#top:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
}
#top {
    background: none repeat scroll 0 0 #F7F7F7;
    margin: 0 -3.631em;
    padding: 0 3.631em;
}
#top {
    background: none repeat scroll 0 0 #F7F7F7;
    margin: 0 -1.618em;
    padding: 1.618em;
}

The bottom #top (from parent’s style.css) is struck out. I assume that means it is been over written by the above #top (which is in the CSS/layout.css file). Don’t know why. Perhaps something in the WP CMS.

I don’t know want the class=”parent” refers to. It doesn’t show up anywhere.

I copied the #top code and pasted it in my Child theme’s style.css, then removed the colour – #F7F7F7. (I don’t really understand why the Background say ‘none’, but then has other attributes).

Then this happened.

#top {
    background: none repeat scroll 0 0 #F7F7F7;
    margin: 0 -3.631em;
    padding: 0 3.631em;
}
#top {
    background: none repeat scroll 0 0 transparent;
    margin: 0 -3.631em;
    padding: 0 3.631em;
}
#top {
    background: none repeat scroll 0 0 #F7F7F7;
    margin: 0 -1.618em;
    padding: 1.618em;
}

The bottom two, including mine, now struck out and the layout.css still overriding.

So I tried:

#wrapOverall #top {
    background: none repeat scroll 0 0;
    margin: 0 -3.631em;
    padding: 0 3.631em;
}

and

#wrapOverall.parent #top {
    background: none repeat scroll 0 0;
    margin: 0 -3.631em;
    padding: 0 3.631em;
}

but both times now my css did not show up at all in firebug.

Now I don’t think it is appropriate to use !important here, as it is not inline, but something is preventing this layout.css code from being overridden. There is several classes in the boby tag, but I wouldn’t know where to start there. I did notice that the background in question does protrude outside my <div #wrapOverall>

On a side note, when overriding, is it necessary for me to copy all the #top attributes (including margin and padding) or will the only the background suffice and thus the margin and padding will still link to the original.

Ok, worked it out. Sorry. I had a conflict with the capitalisation of the #WrapOverall selector and wrote #wrapOverall.

Thanks again for your help.