Hello! I need help with changing the color of the underline for links in paragraph blocks. I want to change the color from #EC5038 to #1E6F78. I’d also like to have the color change to #4A423B with a hover.
To change the default link decoration color, I’ve tried using this additional CSS for paragraph blocks with no luck:
a:link {text-decoration: #1E6F78 !important}
This topic was modified 4 days, 9 hours ago by akanelittle.
This topic was modified 4 days, 9 hours ago by akanelittle.
This topic was modified 4 days, 9 hours ago by akanelittle.
This topic was modified 4 days, 9 hours ago by akanelittle.
The page I need help with: [log in to see the link]
Hi, thanks for the details. The underline colour on links is set by the theme’s stylesheet rather than by the Styles panel, so it does not follow the palette or the link colour setting. You can override it with a few lines of CSS.
In the Site Editor, open Styles, click the three-dot menu at the top of the Styles panel and choose Additional CSS. Paste this and save:
body a { text-decoration-color: var(--wp--preset--color--tertiary); }
body a:hover { text-decoration-color: var(--wp--preset--color--contrast-dark); }
Those two variables are Loam’s teal (#1E6F78) and dark brown (#4A423B), so the underline will keep following your palette if you change it later. You can also paste the hex values directly instead.
One more thing: there is already a rule in your Additional CSS that reads :root :where(pa:link){text-decoration: none !important}. That selector has a typo and would remove the underline entirely rather than recolour it, so delete it before adding the above.
I am also pushing a small update to the theme that will make overwriting these styles easier in the future.
If you would like the teal everywhere the orange appears, the quicker route is to change the palette itself: open Styles, then Colors, then Palette, and set Primary to #1E6F78. That recolours the link underline, the quote border, buttons and the accent band in one go. Buttons and the accent band use dark text, which is harder to read on teal, so after that also open Styles, then Blocks, then Button and set its text colour to Base.
If you only want the underline and the quote border changed, use the CSS above instead and leave the palette as it is.