Looks alright from here. Your child theme’s stylesheet is imported into your website, and it even validates alright.
How can you tell that it doesn’t work?
Thanks very much for checking Emily!
For instance I recently made some font changes and the post navigation links were in the wrong font.
I went right through style.css removing the rogue font but it made no difference. I tried adding font code specifically to the navigation in style css, like this:
.nav-next {
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
float: right;
text-align: right;
width: 50%;
}
And it made no difference. But when I put the same code in custom.css I get the desired effect. This is just an example. I haven’t been able to facilitate changes from my style.css for some time.
I think I’m beginning to see where you’re coming from.
Sometimes CSS isn’t easily replaced. As far as I understand (CSS minification really doesn’t make it easy for me), the navigation uses Arial, while your headlines use “Helvetica Neue”.
I wasn’t able to find the class “nav-next” in your HTML output. Your navigation uses Arial, though, because it is being declared like this:
li, a {
font-family: 'Arial' !important;
}
There’s no way of overriding what is !important unless you say it’s !important as well, like so:
li, a {
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif !important;
}
This is not an issue with your child theme, but with CSS hierarchy.
Goodness! Thanks so much for figuring all that out!
Yes, I’m minifying CSS because of memory/page load issues. Seems every solution creates another issue!!
Thanks for your input I’ll try and figure something out.
No problem, figuring it out is my job. 🙂
Let me know if this works for you.
Even when I added !important to the code in the style.css the changes weren’t implemented. The only other thing I can think of doing is disabling minification, making the changes, then re-enabling. But I’m worried this might have other repercussions…..
If you’re really only disabling and enabling minification, there shouldn’t be any repercussions involved. All minification is supposed to do is remove comments and white space in your style sheet. So if there are repercussions, this might a good thing, because it will tell you that you need to look for a better minification tool. (I am half kidding here.)
Here’s what you can do whenever you have a bad feeling about making changes: Make a copy of the css contents elsewhere, and when you find that your site looks all weird afterwards, just override your changes with that copy. You might be back to where you started, but at least you’re not stuck with a broken site.
WordPress and some plugins also support version control. This means you can make changes to a file in the admin panel, and when you find those changes broke something, you can switch back to the earlier version of your file. You can check if your tool supports version control.
I’d love to be of better help in this, but for one, I’m confused by your website (I can’t read Hebrew), and second, I still fail to find a class that goes by the name nav-next anywhere on your website. Are you sure .nav-next is the right selector?
Thank you! With your reassurance I was confident to turn off css minification. Then I made the changes I wanted to style.css and they worked! When I turned minification back on, the changes are still there!
So it seems I need to turn off minification when I want to change style.css. Seems a bit curious but I’ll see what happens.
About .nav-next. I found it by hovering over the links in Firebug and indeed they selectors .nav-next and .nav-prev appear in my original style.css.
Thanks so much for your help Emily!
Aha, you got me. I didn’t check hover states. 😀
But I’m glad this worked out after all. 🙂
Oh dear! Sorry to re-open this thread but I find I again can’t make any changes to my child theme via style.css. But the same changes take effect if I put them in custom.css.
I have turned off all minification for css.
I want to re-vamp my site and make a lot of changes and every addition to custom.css increases the page load time.
E.g.
h1, h2, h3 {
color: #990000 !important; }
In style.css makes no change but in custom.css, without the !important, works a treat.
http://www.photomobil.co.il
Thank you in advance for any help.
What I saw at first sight is that there is already a declaration in style.css saying that your h1, h2, and h3 should be black in colour. Try overriding that to #990000 and see if that already fixes the issue.
Do you mean this declaration:
/* Headings */
h1, h2, h3 {
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
color: #000
I overrode it with #990000 and it didn’t work. Not with !important, either.
It’s so strange – I can’t seem to make any changes via this file. I’m wondering if I’ve somehow overriden the file. Though indeed I was able to make one change last week, after you gave me the tip about turning off minifying. But now it’s resisting me completely!!
This is what I see when I inspect the element in Firebug:
h1, h2, h3 {
color: #000;
font-family: Arial,Helvetica,"Nimbus Sans L",sans-serif;
font-weight: bold;
text-rendering: optimizelegibility;
But in fact in style.css it has been changed to:
h1, h2, h3 {
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
color: #990000 !important;
font-weight: bold;
text-rendering: optimizelegibility;
The changes in style.css are being ignored. Any suggestions as to why that could be?
Thank you.
I think I might have found what the problem is but I would very much like an expert opinion.
Because of memory problems I have a caching plugin on my website. If I make changes to text, add pictures etc., I see them immediately. But is it possible that changes in CSS don’t show up because of the caching?
All of a sudden all of the experimental changes I was trying to make in style.css have appeared in one browser (Google Chrome), but the site looks as it did before in other browsers, no matter how many times I delete the browsing history.
Does this sound typical of problems caused by caching? Do I need to disable caching while I am trying to make changes to the css?
Thank you.
