Yeah, this is a particularly nasty instance of insufficient contrast between the accent and contrast colors. Fortunately these only affect a few spots, but the automatic contrast adjustment can lead to awkward almost-white colors. You can override it with the following custom css:
/* Higher contrast Accent Color against contrast color */
.site-navigation .current_page_item > a,
.site-navigation .current_page_ancestor > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a,
.site-navigation a:hover,
.featured-content a:hover,
.featured-content .entry-title a:hover,
.widget a:hover,
.widget-title a:hover,
.widget_twentyfourteen_ephemera .entry-meta a:hover,
.hentry .mejs-controls .mejs-button button:hover,
.site-info a:hover,
.featured-content a:hover {
color: #000;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-overlay:hover .mejs-overlay-button,
.slider-control-paging a:hover:before,
.slider-control-paging .slider-active:before,
.slider-control-paging .slider-active:hover:before {
background-color: #000;
}
For your site I think using black (#000) would be the best option, but you can change it to anything that works.
Thread Starter
lofaro
(@lofaro)
Hi Nick!
It works thank you!
Just two questions:
– why did I need to install custom css from Jetpack to insert your css tweaks instead of simply putting those lines in my child theme? Indeed, it doesn’t work if I simply modify my child theme but I do not understand why…
– as I’ve activated custom css, will your tweaks be persistent if I update my theme?
Thank you!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
why did I need to install custom css from Jetpack to insert your css tweaks instead of simply putting those lines in my child theme? In
You don’t need to, this is a management choice. You should choose which is easier to manage.
Indeed, it doesn’t work if I simply modify my child theme but I do not understand why…
Maybe you have a syntax error or aren’t using specific enough selectors? Jetpack’s custom CSS may be loading later on in the page giving it more weighting to override styles.
Fourteen Colors loads its CSS in a <style> tag in the <head> of your site. Custom CSS plugins do the same thing. Child themes load their stylesheets from external files. The “cascading” part of CSS (cascading style sheets) basically means that CSS loaded later will override CSS loaded earlier, and <style> tags are loaded after external files. So, in this case, your child theme’s stylesheet is loading before Fourteen Colors, which is loading before Jetpack Custom CSS. So, to override part of Fourteen Colors’ output you’d need to put the CSS in the CSS plugin if you use the same selectors as Fourteen Colors.
To make the child theme override the plugin here, you would need to use more specific CSS selectors then those that the plugin uses (which are pasted above).
