Hi! I’ve used theme styles to style my links, but I would need body links to be different from headers that are links. I’m aware that this can be done with custom CSS, but is there a way to achieve this site-wide in Bricks? For example, I’d like my body links to be underlined in the default state and go lighter on hover, whereas heading links should not be underlined by default but get underlined on hover. Any hints appreciated!
Let me clarify: By heading links, I mean links that are wrapped in <h1>, <h2>, … tags, across the entire site (so, not just the site header, but all headings, anywhere).
You could try something like this in the global css area of Bricks or Wordpress (don’t try this on your live site straight away!):
/* style text links */
body a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a) {
text-decoration: underline;
color: red;
}
/* style text links on hover */
body a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a):hover {
color: pink;
}
/* style heading links */
body a:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a) {
text-decoration: none;
}
/* style heading links on hover */
body a:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a):hover {
text-decoration: underline;
}
This will apply to all text links and headings even in the header and footer. If you don’t want this, then you can either change ‘body’ to be ‘main’ (and the header and footer are not in main) or add ‘footer a, header a’ into the :not statement.
1 Like
Hi simon! Thank you very much, that’s really kind! Alright, so this can’t be done by mere clicking in the Bricks builder UI, but the CSS you so kindly provided is for sure going to do the trick.