Button text colors in TwentyFourteen theme

We need to see your site to help with something like this – which is likely a CSS question.

@wpyogi

The website is: https://www.tycoonje.com

Looks like you added custom CSS that’s changed that background color?

Try adding color to it:

button, .contributor-posts-link, input[type="button"], input[type="reset"], input[type="submit"], .search-toggle, .hentry .mejs-controls .mejs-time-rail .mejs-time-current, .mejs-overlay:hover .mejs-overlay-button, .widget button, .widget input[type="button"], .widget input[type="reset"], .widget input[type="submit"], .widget_calendar tbody a, .content-sidebar .widget input[type="button"], .content-sidebar .widget input[type="reset"], .content-sidebar .widget input[type="submit"], .slider-control-paging .slider-active:before, .slider-control-paging .slider-active:hover:before, .slider-direction-nav a:hover {
    background-color: #204788;
    color: #FFFFFF;
}

I assume you are already using a child theme of TwentyFourteen? Because the color of the button should be green and in your case you see it black.

You can change the color of the button in the style.css:

.content-sidebar .widget input[type="button"],
.content-sidebar .widget input[type="reset"],
.content-sidebar .widget input[type="submit"] {
	background-color: FFFFFF; // this will make the color white if you place the plugin in the content
}

and

.widget button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"] {
	background-color: #ffffff; this will make the color white if you place the plugin in the sidebar
}

I did not implement any CSS modifications, nor that I use any child theme. However I’ve installed the “Fourteen Colors” plugin to help me change the theme’s color (Just remember that).

(Link to Plugin: https://celloexpressions.com/plugins/fourteen-colors/

Upon deactivating the plugin the text turned white. Does this mean I have to contact the plugin developer instead of opening the thread here?

Looks like it’s that plugin’s custom CSS – but it looks like you have JetPack, so you can use the custom CSS option there to add your own – add the code above under Appearance > Edit CSS – see if it works.

I’ve added WPyogi’s code to the Custom CSS section, but it didn’t work.

I don’t see that on your site. But go back to that plugin, it may well have a place to change that text color? See if there’s a way to change the CSS directly there.

I’ve saved the code as given, I’ve doubled checked again.

Kindly check the link below that will direct you to a video of what I am doing. The first part of the video is to show you how I am saving the CSS file. The second segment shows where could I change the theme’s colors using the “Fourteen Colors” plugin; There is no option related to button text color.

https://screencast.com/t/tnfilJiqF

That CSS got messed up for some (unknown reason) – the quote marks got corrupted:

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.tycoonje.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Try taking that out and using this instead:

.widget button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"] {
	color: #ffffff;
}

It didn’t work, I’ve removed everything and copied the one you’ve provided, but nothing is altered.

Looks like that code got garbled up the same way – not sure what’s going on with that. Are you just copying/pasting it from here?

Maybe try another custom CSS plugin – such as:

https://www.ads-software.com/plugins/custom-css-manager-plugin/

It can get garbled if you’re copying code from your email (when this forum sends you notifications via email that someone responded)

Heeeeeeey! It worked ??

It is by chaining the CSS plugin I got the results fixed.

Thank you all very much for your time and effort, I truly appreciate it!