You need to use the !important tag.
For example,
.comment-author a:hover,
.comment-list .pingback a:hover,
.comment-list .trackback a:hover,
.comment-metadata a:hover {
color: #ff0000 !important;
}
I did that in the child CSS:
.comment-author a:hover,
.comment-list .pingback a:hover,
.comment-list .trackback a:hover,
.comment-metadata a:hover {
color: #e5080d !important;
}
It didn’t change the color…
On the other hand, changing the following did:
.entry-meta a:hover {
color: #e5080d !important;
}
Which I had in the child CSS, without the “!important” on the line.
Just out of curiosity…
Why do you have to add the “!important” in the child CSS? If it wouldn’t be important, I certainly wouldn’t put in there. Isn’t the purpose of the child theme CSS to override the base theme CSS? This doesn’t make much sense…
Thanks for pointing me to the right direction…
No problem.
The CSS in the child theme does override the CSS in the parent theme only if the !important tag is used which is why the !important tag comes into play. Without that tag, the child theme CSS will NOT override that of the parent theme’s.
For example, if in the stylesheet in the parent theme it says:
h1 {
color: #000;
}
Then in the stylesheet in the child theme it says:
h1 {
color: #f2f2f2;
}
Without the !important tag, the parent theme styling will override that of the child theme styling.
Basically, when it comes to CSS, the styling in the child theme will not override the parent theme’s styling without the !important. This is not true though for PHP files as a header.php in the child theme will override that of the parent theme’s.
Hope that made sense. 🙂
I understand and thank you for the explanation…
To my understanding of the child theme purpose was/is to override the style of the base theme. In WP 2011 child theme, there was no need to use the “!important” tag to override the base theme. At least in my child theme…
With the child theme for WP 2014, this seems to, how should I say it, disorganized and inconsistent?
The necessity of using the “!important” tag in the 2014 child theme seems to relate to the “color:” tag the most. For example to change the “h1” color, the child theme should include it:
h1.entry-title {
color: 8f08e5 !important;
font-weight: 300;
font-size: 28px;
font-family: tahoma;
}
Note that other tags do not require the “!important” tag and they override the base theme just fine.
Other changes to the color does not require the “!important” tag in the child CSS. For example:
.site-footer {
background-color: #fbafd3;
font-size: 13px;
position: relative;
z-index: 3;
}
.site-info {
color: #8f08e5;
}
In my view, this is messy and hard to follow. Not understanding just how the style actually cascades makes it hard to create a child theme. At least for me…
Again, thanks for your help….
Sorry, I forgot to mark the post as “Resolved”…
The CSS in the child theme does override the CSS in the parent theme only if the !important tag is used which is why the !important tag comes into play. Without that tag, the child theme CSS will NOT override that of the parent theme’s.
That’s completely untrue.
From the How to Create a Child Theme codex page:
Note: The child theme’s stylesheet is included after the parent theme’s and styles will therefore override those in the parent theme’s stylesheet
That aside, the !important declaration shouldn’t be used reactively. You’re hitting CSS with a sledgehammer to solve a small issue.
My understanding was that the child theme’s stylesheet loads first, that loads the base theme’s stylesheet prior to actually loading the changes in the child theme’s stylesheet. The last step in the process is the one that actually does the overwriting the base stylesheet.
That aside, the !important declaration shouldn’t be used reactively. You’re hitting CSS with a sledgehammer to solve a small issue.
In light of the very agreeable sentences, at least for me, how could one change the “entry-meta” text color without using the “!important” declaration?
TIA…
The last step in the process is the one that actually does the overwriting the base stylesheet.
That’s right.
how could one change the “entry-meta” text color without using the “!important” declaration?
Are you able to post the URL of the site?
I can create a new child of TwentyFourteen and easily change the colour using your block of CSS but without the !important declaration. There must be something else in play at your site.
Yes, the site is still under development…
Thanks…
OK I just took out all the unnecessary !important declarations, and your site remained the same.
What screen size are you viewing your site at? I ask because you’re making changes to the links etc within a media query block that would only apply to screens in excess of 1008px.
I am viewing the site on 24″ or 27″ monitors. The actual centered page size is 1,262px on these monitors, based on the screen capture size in Photoshop.
Is that what you’re asking for?
Thanks…
OK that should be larger than 1008px (although users on smaller devices are still going to see the parent rules).
Since you’re still developing, my suggestion is to copy then backup your existing child theme style sheet, then strip out the !important declarations completely and run with the copy. We’ll then see where we’re at without all the sledgehammer nonsense.
Huh! How come stripping the !important declaration didn’t change the desired color? I did before, strange…
On smaller devices, or just resizing the browser window, the parent color scheme returns. Maybe it’s another posting, but…
How do I retain the larger display’s color scheme for the smaller devices?
Thank you very much for your help…
Just remove the media query lines:
@media screen and (min-width: 1008px) {
and then the closing
}
There’s no reason for them to be there that I can see.
