Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
It sounds as though you’re not using specific-enough selectors to override your parent styles.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I dont think that’s the problem, since in some cases, all I am doing is CHANGING a style- for example- from red in the parent style, to blue in the child theme. I dont think that would be a problem of specificity.
There are a whole bunch of css files in this theme, though. Could it be that not all elements are editable in style.css? Maybe I have to go into other css files to make the changes??
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
What specifically doesn’t change the way you want, on your website?
Looking at your site, some of the other stylesheets are being loaded after your child theme file — so that also makes a difference — but specificity in selectors should still be able to override that code. Or if all else fails, try using !important.
Thanks for your help.
Andrew- For example, I put in my style.css
#container{
background-color:green;
}
And nothing changes.
WPyogi- Which stylesheets are being loaded after my child theme file? That would make a big difference!
Thanks for trying to help me!
Use View Source and look at the list of linked stylesheets in the head section of the page.
“container” is a class not an id – use a period not a hashtag.
Thank you for your help.
I looked at style.css for the parent theme, and it has #container, with the styles for container there. That’s why, on my child theme, I also wrote #container, and tried to make changes to it.
I’m so confused- how should I know where to find the styles I want to edit, if not in the style.css of the parent??!
Thanks again for your help…
Try using Firebug to look at the actual page — IMHO, it’s impossible to work with CSS without a tool like that.
Yes, I see that #container is used in the regular style.css file — but if you search the rendered HTML — there is no id="container" which is rather odd.
There IS definitely this HTML: <div class="container"> .
Frankly, for me, that kind of thing would raise a few questions about the theme — though since I have not looked at it in detail, there may be something else going on.
Another thing- how do I get the files on my child theme to show up in appearance-editor, in my dashboard? I copied a file from the parent theme to my child theme, and put it into my child theme folder, via ftp. But I dont see those files when I check in appearance-editor.
Your site shows this:
.container {
color: green;
}
change it to this:
(I assume you want the background to change, not the text color)
.container {
background: green;
}
You can always add an !important to force the property.
background: green !important;
