I am new to WordPress, so please bear with me if this is a rudimentary question – I’ve been scratching my head for a few hours and I am not getting something about the relationship between Child and Parent sheets. Please help!
I started out attempting to follow a tutorial which details setting up a child style.css file to change the header background color. I got everything set-up as the tutorial instructed, but the alterations specified in the child CSS file were being ignored when the page loaded.
Tutorial theme used: (http://www.presscoders.com/designfolio-free-download/)
I knew that the child CSS page was in the correct spot, as I was able to select it via the WordPress Admin section of the site and load it. I’m also sure that the Import URL address at the top of the child CSS file was correct, as if I removed it, all of the CSS styling was lost when I reloaded the page. So it was correctly referencing the parent “style.css” file.
Additionally, as part of the tutorial involves using Google Chrome Dev Tools to inspect the page elements, I was able to see that after adding alterations to the child CSS page, they were in fact showing up in the Dev Tool inspector. However, they were struckthrough, as is visible in this screenshot: http://s18.postimage.org/y2u94e0wp/copy.jpg. When I made the screenshot, I also noticed that the stylesheet being referenced to supply the #header-container attribute value was NOT the parent main “style.css” file but rather a totally different “default.css” file buried further down in the parent theme includes folder, one that specifically handles colors for the theme.
Realizing that the attribute I was trying to change was not in the parent style.css file, I tried changing one that WAS – altered the header-container padding at the top of the page – and lo and behold the change worked!
So how do I handle this situation? The page attributes are spread across multiple CSS files in this theme, and I’m assuming my header-container color change did not work because the color “default.css” file was not imported in the child style.css file. Does this mean that each css file needs to be imported separately in the child style.css file? Please help clear up my confusion.
- The topic ‘Child CSS Not Overriding Parent Stylesheet/s’ is closed to new replies.