Change color on font?

  • Resolved adeb

    (@adeb)


    10 years, 10 months ago

    Hi

    Thanks for a great plug! I’m using it to change color of both the navbar and menu. I have found a set of colors that works great but my problem is that the menu font have turned black. It’s just in the crossing of changing from white to black but I want it to still be white! It should look great, I know it!

    Is there any chance that I can urge you to implement a way of controlling the color of the fonts?

    Many thanks
    //Per

    https://www.ads-software.com/plugins/fourteen-colors/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Nick Halsey

    (@celloexpressions)

    I tend to prefer the white text for borderline cases too, but the plugin actually calculates whether higher visual contrast is achieved with white or black. If black provides higher contrast and white provides a contrast ratio that is below the 4.5:1 minimum required by the WCAG 2.0 guidelines, black is used.

    The best way to override this behavior is probably with some custom CSS (via a custom CSS plugin). Just note that this would cause accessibility issues potentially.

    This is the css to change the color back to white when the contrast color calculation leads to the color being changed to black:

    .site-description,
.secondary-navigation a,
.widget,
.widget a,
.widget_calendar caption,
.site-header a,
.site-title a,
.site-title a:hover,
.menu-toggle:before,
.site-footer,
.site-footer a,
.featured-content a,
.featured-content .entry-meta,
.slider-direction-nav a:before,
.hentry .mejs-container .mejs-controls .mejs-time span,
.hentry .mejs-controls .mejs-button button {
	color: #fff;
}

.slider-control-paging a:before {
	background-color: rgba(255, 255, 255, .33);
}

.widget-title, .widget-title a {
	color: #fff;
}

.secondary-navigation li {
	border-color: rgba(255, 255, 255, .2);
}

.secondary-navigation {
	border-color: rgba(255, 255, 255, .2);
}

.widget input,
.widget textarea {
	background-color: rgba(255, 255, 255, .01);
	border-color: rgba(255, 255, 255, .2);
	color: #000;
}

.widget input:focus, .widget textarea:focus {
	border-color: rgba(255, 255, 255, 0.4);
}

#supplementary + .site-info {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

    (There is an additional set of CSS to override black text against the accent color, but it sounds like you were talking about the contrast color)

    Thread Starter adeb

    (@adeb)

    Hi Nick

    What is a “custom CSS plugin”? I’m using a child theme and I have tried to put the css in to the style.css file without success. Could you please explain more in detail where to put the css?

    Thanks
    Per

    Plugin Author Nick Halsey

    (@celloexpressions)

    There are several [https://www.ads-software.com/plugins/search.php?q=custom+css custom css plugins] that will let you add custom css. The problem with putting it in a child theme is that this plugin’s css is output in <style> tags in the <head>, so you need to make sure your CSS overrides it.

    Alternatively, you could just and !important to all of the styles, or make the selectors more specific.

    Thread Starter adeb

    (@adeb)

    Hi Nick
    Thanks for all the help! But I have managed to fix two problems by purchasing a drop down-menu (UberMenu) that overrides the original menu-css. I can now change the color to what I want and I got a menu that works great on touch screen devices like iPad and iPhone. I’m so happy:-)

    Thanks
    Per

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change color on font?’ is closed to new replies.

Tags