WordPress child theme style overridden by parent stylesheet

1
votes

I have followed official and unofficial guides, and yet I simply cannot seem to be able to get certain styles in a child theme to overwrite its parents styles.

The only solution for me right now is to directly modify the main stylesheet, which is quite annoying as that gets overwritten every time there's an update for said theme.

I know the child-sheet works as some styles I set there do get shown.

The theme I'm using is Twenty Thirteen with a custom child theme. I only have the default WP plugins active. WordPress core, themes and plugins are up-to-date.

In both Chrome and Firefox I see the style, it's just ignored I guess.

I'm trying to change the background-color of the footer, I tried multiple selectors (ID, class, parent-child, element...

This may very well be something really simple I'm overseeing but I just can't figure it out.

Thanks in advance.

PS: sorry if I sound frustrated (I am, lol)

2
csswordpresswordpress-theming
You must ensure that the path to your parent theme’s css file is correct, and that the “Template:” parameter correctly identifies the name of your parent theme. - Luís P. A.
Like I said, I know the child theme loads as some other styles I set in said child theme do work. The link I get when I check the source also correctly links to the child's sheet, not the parents. - Ghosty
"Inspect Element" in Chrome is your friend for things like this. Right click on an element that isn't styling the way you think it should, choose "inspect element", and take a look at the "styles" tab on the right. It will show you all the style rules for each element, and which ones are in use. - cpilko
I am very well aware of that, and used this function (be it in Firefox). It does show the style, it's just striked. - Ghosty
HARD REFRESH FIREFOX! sorry for screaming <ctrl> + <shift> + <R> on Linux and think Windows! - Sydwell

2 Answers

1
votes

After a lot of trial and error, I found a solution to my problem.

A classmate suggested trying to use the selector you get when inspecting the element (be it with Opera, Firefox or Chrome), instead of the same selector used in the main theme's style.css.

I find this odd, as the child theme should overwrite the parent's theme style anyway, right?

Either way, short solution: use a more specific selector than the one in the parent's style.css.

-1
votes

I had the same problem and it was caused by Chrome caching the css. I renamed the style.css in the parent theme and refreshed my page and to my surprise nothing changed. Using F12 to inspect the element the styles section had a link to styles.css (even though I had renamed it) I was able to right click and open styles.css in a new tab.

The Ctrl-F5 shortcut clears the cache. Doing this totally messed up my page because now it was not reading the parent style.css. Then all I had to do was rename it back and it correctly loaded it but also had the correct entries from the child style.css.

You might be able to just Ctrl-F5 (all the renaming bit was just exploration to force it not to load)