[Support request] Button Is a Different Colour To What Selected

[Ella]

Hey, not a major issue but just wondering if this indicates I need to update my theme or something?

As on here: https://wordpress-623989-2736800.cloudwaysapps.com/ The “Register Your Interest” button on the bottom banner – I selected a colour for the text and whatever I selected it as, it was still not showing and only showing in white. I then deleted it and created another one – selecting the button to be white, with black text, and now it seems to have pink text on white… So at least it’s now readable but it’s not what I wanted and I don’t know why it’s happening.

I’ve updated to the latest WordPress and that’s not made a difference.

What else should I try please?

Thanks,
Ella

[Leo]

Hi there,

Can you try creating the button with GB’s Buttons block?
https://docs.generateblocks.com/article/buttons-overview/

The current button is created with WP’s core button block which doesn’t offer the same options and not nearly as good:
https://wordpress.org/support/article/button-block/

Let me know if this helps 🙂

[Ella]

I could try it but it would mean changing all of the other buttons on the site to match that one then, and I’ve had no issues with any of the others! They’ve all been working perfectly. Is there not anything else I can try? It’s not like a glitch or anything?

Thanks,
Ella

[Fernando]

Hi Ella,

The color of that Block is being changed in Appearance > Customize > Colors. Try Content > Link or Body > Link colors.

We can try altering it with CSS instead. Add my-colorto the CSS class list of the block in its block settings. Then, add this CSS in Customize > Additional CSS:

.my-color {
    color: #000 !important;
}

Replace the color value to your preference.

[Ella]

Hi Fernando, thanks for getting back to me. The black colour code is #000000 so I kept it as that and added the above code in, but it didn’t do anything. I also tried updating it on Appearance – Customise – Colors and changed it under button text colour. It worked in the fact that it changed any other button colours from white to black, but they actually need to be white anyway, so I swapped it back. It still didn’t update the colour of the button on the homepage however, even when changing these, so I think we need to stick with the code route, but perhaps try different code?

Thanks,
Ella

[Ying]

Hi Ella,

In order to make Fernando’s CSS work, you need to add the my-color class to the button block first.
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

I noticed that all the buttons on your homepage are built with Buttons block from the GenerateBlocks plugin, only this one is built with WP core Buttons block.

So can you try using the Buttons block from GB instead?

[Ella]

The additional CSC attached to that element is
is-style-fill
I don’t know where this is coming from or if it was making a difference?

I deleted it and added my-color
then went onto customise – additional CSC and added:
.my-color {
color: #000 !important;
}

… and that’s still not worked.

See: https://wordpress-623989-2736800.cloudwaysapps.com/ now.

I also tried adding the other button option but as you’ll see – I really don’t like it. You can’t curve the box. You can’t centre the box (without creating columns presumably). I really just want to get this one odd button fixed as the rest are working fine!

[Ying]

I also tried adding the other button option but as you’ll see – I really don’t like it. You can’t curve the box. You can’t centre the box (without creating columns presumably)

The buttons block from GenerateBlocks can do all these, and all your other buttons are built with GB buttons block(they all have border-radius which means rounded corner).

The is-style-fill class is added by the WP buttons block.

But if you prefer to use the WP buttons, go ahead 🙂

Try change the CSS to:

.my-color a {
    color: #000 !important;
}

[Author]

Posts