[Resolved] Setting link colors in customizer is causing problems with button text colors

[James]

After I changed the link color in the customizer, I found that the white text on my red buttons suddenly turned to the link color that I had set in the customizer. If I edit those pages and manually set button text color to white, then it becomes white again but will change color when hovered over like a normal link.

I also found that if I set a color for button text in the block editor, but don’t set a background color then the text color setting has no effect and will always be white (even when hovered over).

I appears that the CSS styles generated by the customizer are conflicting with the styles specified for buttons in the block editor. I would like for the button color and link colors options set in the customizer to not interfere with the text and background button colors set in the block editor when making buttons.

I made an example page showing the problems. Please see the link below.

[Ying]

Hi James,

Looks like if you don’t set background color for buttons in block editor, then customizer button color setting will take over, including background and text color.

If you want to overwrite the customizer button color settings, then you’ll have to set colors for both background and text color in block editor.

This might be something we need to fix – I’ll try to replicate this on my end.

For now, I would highly recommend trying the buttons block from GenerateBlocks plugin, it is much better than the core buttons block WordPress offers.
https://wordpress.org/plugins/generateblocks/

Let me know!

[James]

Hi Ying,

Thanks for your reply.

If you want to overwrite the customizer button color settings, then you’ll have to set colors for both background and text color in block editor.

The other problem is that if I set a Link Hover color in the customizer, then the button text color will also take on that color when hovered. So setting both background and text color doesn’t solve my problem. I want the button text color to stay the same when hovered over, not take on the color of hovered links.

Thanks for the suggestion about GenerateBlocks, but I found that most of these block plugins are adding additional CSS and sometimes javascript to the front end of my site and I’m trying to cut down on that and cut down on plugins in general.

I think I will have to disable the color selections for link and link hover in the customizer and use some custom CSS instead.

Could you suggest some CSS that would set the link and link hover colors only for regular links and not for button text?

[Leo]

Hey James,

Thought I’d chime in here.

Thanks for the suggestion about GenerateBlocks, but I found that most of these block plugins are adding additional CSS and sometimes javascript to the front end of my site and I’m trying to cut down on that and cut down on plugins in general.

The issue you’ve pointed out is one of the reasons why we decided to built our own block plugin. We built the plugin with performance as a top priority (just like GeneratePress itself) and it should better than any other block plugins you’ve tried.

It’s using dynamic CSS so only added when you needed – it would really be the same of us giving the CSS to fix this problem:
https://www.screencast.com/t/AnFByojtxkf

Any chance you can give the plugin a shot first? You can run it through a speed test afterwards – I doubt you will see any changes there.

We have many sites that are using the plugin our site library and we welcome the speed test challenge 🙂
https://www.screencast.com/t/FBAgoZuqiqtC

[James]

Hi Leo,

Thanks for the information. I’m already pretty far along developing my site and I already added many buttons. I don’t really want to go and edit all those pages again just to replace the buttons.

Regarding dynamic CSS, I prefer to keep the static files on my site as consistent as possible between different pages. When I combine all CSS and JS together with Autoptimize, I don’t want to have different files generated for every page. Browser caching and will be more efficient if the same CSS and JS combined files can be used across different pages as much as possible.

It’s not really about page speed scores, I have specific reasons for needing to optimize this specific site as much as possible. I will definitely try out GenerateBlocks on some other sites. I have tested some sites from the site library on another server and they are very nice looking.

[James]

I just realized that there are 2 separate settings for Link and Link Hover. One setting in Colors > Content and another in Colors > Body (which cannot be cleared).

I actually had both sections selected with the same colors. I cleared the colors in “Content” section and left the ones in “Body” section (which cannot be cleared). Now everything is working as expected. The links color does not apply to button text anymore.

What exactly is the difference between these 2 settings. The link color seems to be based on Colors > Body section. Changing the color in the Colors > Content section doesn’t have any effect except messing up the button colors.

[James]

Anyway, marking this as resolved now. Thanks for your help.

[Leo]

Glad we could help 🙂

[Author]

Posts