Hi @editorialteam – those blocks pick up the global link colour, and don’t have individual colour controls.
To override that on these specific blocks, you can add this custom CSS in the site-wide CSS editor, or your child theme, or wherever you typically add custom CSS in your site.
Here’s some CSS you can try:
/* Archives & categories list, tag cloud */
.wp-block-archives-list a,
.wp-block-categories-list a,
.wp-block-tag-cloud a {
color: #000000;
}
If that doesn’t do the trick, could you please provide a link to a page or post on your site where I can see these three blocks in action? Thanks!
Hi @zoonini,
Many thanks. The CSS code seems to work. Would you know the CSS code, if I want to change only the tag cloud text colour to another color (I can work out the hex value), yet keep the other blocks black?
Sure, in that case, you can replace what I gave you previously with this version instead:
/* Archives & categories list */
.wp-block-archives-list a,
.wp-block-categories-list a {
color: #000000;
}
/* Tag cloud */
.wp-block-tag-cloud a {
color: #bb00bb;
}
You can swap out #bb00bb for your preferred colour. Let me know how it goes.
Thanks @zoonini. I’ll try that a little later. Much appreciated.
I’ve entered the new hex value: #072ae3 in the ‘Tag Cloud’ Additional CSS:
/* Tag cloud */
.wp-block-tag-cloud a {
color: #072ae3;
}
It shows the correct colour in the FSE but not when you open the page in another browser. It shows as black not blue.
I’ve inserted a Tag Cloud block in the footer.
Thank you for your patience.
@editorialteam – could you please provide a link to your site so I can see what’s going on and troubleshoot directly there? Thanks!
Hi @zoonini, It’s a staging site which is not public facing. But thanks anyway.
I think I know what may be happening. 🙂 I just realized you said:
I’ve entered the new hex value: #072ae3 in the ‘Tag Cloud’ Additional CSS:
That’s not the right spot for the CSS I gave you. 🙂
This CSS needs to go in the site-wide CSS editor, not the Tag Cloud-specific block CSS editor. The per-block CSS editor expects only a property: value pair.
Since the code I wrote includes CSS selectors, it needs to go in the site-wide CSS editor, as shown here. I explain the distinctions between the site-wide editor and the per-bock CSS editor in more depth in this video. The CSS portion of the workshop starts around the 45:06 mark and runs for about 10 minutes.
Let me know how it goes!
Many thanks @zoonini. Your suggestion worked well.
You’re welcome, glad to hear!
