Changing the text colour of links in table blocks

I’ve got a table block (using the 2023 theme) and I want to change the colour of the links I have scattered throughout the text in this table. They currently appear dark green in the table block, instead of the blue colour I have set them to throughout the rest of the page.

The Table block does not have the link color option that other blocks (like the Paragraph or Group block) have. So it’ll inherit the colors of a parent container.

It doesn’t seem possible to be able to change the link colour using the block styles editor.

It does… or, I should say, it should.

Where is your blue link color defined? You did not provide a live link, so I’m unable to tell.

Remember, the table block is an HTML TABLE element. So if your blue link color is defined for PARAGRAPHS (ie paragraph block), the table block cannot inherit this color.

Try setting the default link color on the generic CONTENT block in the global styles editor, where the default green link color is defined in the TT3 theme. This should apply sitewide for all text from all blocks… unless something downstream (eg group, column, row, or an individual content block overrides it).

If the above suggestion doesn’t work for you, you’ll need to provide the link to the page where this is happening so we can take a look and help you.

Standing by.

Thanks so much for the above George.
I did a bit more digging and found a simple solution by editing the HTML code of the table block. With a bit of help from ChatGPT, I noticed that all I needed to do was add this code to change the link colour: style=”color: #2B2BEA;”.

I’m glad you found a solution that worked for you, though that’s not the approach I would take.

The problem with this approach is that you’ll have to do this for every link you insert into every table block (and possibly other blocks) — instead of setting it once in the style editor for all links. And if you change your link color or change your theme — then you’ll have to track down every page and every link where you did this and update the color. Oh, and a teeny tiny mistake in the code… and the entire page could be broken.

I agree, it’s not a scalable solution. However it’s good enough for the time being.
I took a good look into how to do this in the style editor prior, but I couldn’t figure out how to do it without affecting the colour of the links that take people to the blog posts themselves.
Appreciate you sharing the downsides of the solution. Thanks for your generosity. I’ve made a note to revisit this again if it becomes an ongoing problem at scale.

@dean197 You can try using some css code like this

.entry-content * a {
  color: var(--wp--preset--color--secondary);
}

And then set the secondary color in the global styles as the color you want. If you want to leave the current secondary color as-is, you can use another color in the color palette, and use the variable that corresponds to that color. This help article on styles has a lot of information about how to set colors.

Thanks for that. I had a read of that article and more of a play around, but I can’t figure out how to change the link colour for the entire site, without it affecting the black link colour of the titles of the articles on my articles page here.
Using the site editor, I tried changing the global link colour on multiple pages on the site, but the link colour would always default to the dark green. I can’t figure out what is causing this.
I also tried creating a new post after making each of these changes and adding a link to the text and it would still default to the dark green.

Quite mysterious!

If you change the global link color, you can set a different link color for the Title block, which is used to create post titles. There is a section called ‘Blocks’ under the Styles panel, where you can assign styles to individual blocks.

Thanks @properlypurple that makes sense.
That still doesn’t address the fact that whenever I add a new link, it still defaults to the dark green colour. Once I solve this issue, then I can apply your solution to keep the title links in the black colour.

Any other thoughts on how I can get to the root of what is causing the links to always default to dark green?

Any other thoughts on how I can get to the root of what is causing the links to always default to dark green?

This is coming from the CONTENT block’s styling… which you can easily customize in the Style editor.

And I pretty much told you this in my very first response 3 days ago!

I found what you were referring to @gappiah and it’s now fixed! It didn’t click that I needed to search for the Content block in the global styles editor (even though you’d already said it) and that this is what was causing the link colour to default to dark green.
All done, all fixed. Really appreciate your help!!

• This reply was modified 11 months, 1 week ago by dean197.