Colour of quotes

Hi! I can help you change the color using CSS if you want.

There’s also a quick workaround: if you group your quote, you’ll be able to change the text’s color inside the group. Here’s a little animation where I show you how to do it. Caveat: as you can see, this method inserts a little padding on the left side.

• This reply was modified 3 years, 1 month ago by Javier Arce.

Thanks. I tried the ‘group’ method in your video which enabled me to access the option to change the colour. But although on the edit page it appears to have worked, when I preview the post the colour has reverted to the default.

Please do let me know about using CSS to change the colour as the workaround didn’t work!

Ok, here’s something you could do:

You could create some custom CSS classes that control the color of your quotes, and then apply the class name you need to the quotes you want.

For example with the following code you could have green and red quotes.

.wp-block-quote.is-green {
 color: #3CB371;
}

.wp-block-quote.is-red {
 color: #FF4500;
}

Of course, this is just an example. You can change the colors and the names of the CSS classes (so, for example, instead of is-green, you could write is-important, is-special, is-intro-quote, etc.).

Place the previous code inside the “Additional CSS” textarea of the customizer (see example) and then add the name of the custom class to your quote block (see example).

If you then save the page or post and visit it, you should see your quotes with the colors you want.

Thanks for explaining. I’ll give it a go, but I find it so frustrating that something I used to do without any problem and with only a couple of quick clicks is now such a performance! Why update a programme to reduce its functionality?