Join the Webstudio community

Updated 3 months ago

section colors

At a glance

The community member is asking how to set the color and styling for hyperlinks in an entire Box component, as they cannot find the option in the typography section. The comments suggest using CSS variables to set the link color globally, or applying custom CSS to style all links within the component. Another community member suggests using the "content embed" feature if the content is pulled from a CMS. However, there is no explicitly marked answer to the original question.

How can I set the color and styling for hyperlinks for an entire Box? I can't find anything in the typography section (where I'd expect to find this as a dumb WordPress user) so I'm wondering what the best approach is.
J
c
6 comments
How to change the color of links per section.
  1. add global root var
    • eg: --color: black
  2. section with link
  3. add token to link
  4. add var(--color) to link token
  5. duplicate section with link
  6. redefine --color var on the section, it will update each child like color
Thank you, but this just shows how to apply it to a "link" component. My issue is that I have an entire article in plain HTML with let's say 15 hyperlinks within a single HTML component. Splitting that up into 15 HTML components + 15 Link ones would be hard to manage.

I also plan on creating templates with the markdown component where it would pull entire articles (which will include hyperlinks etc) from a headless CMS. Then I would be in the same situation: I need to apply selective CSS (ie. for 'a', 'td', 'ul', etc.) to everything that's inside the component.

Like a single "inner content" or "article" div so to speak.
You would apply that var to anything within the sections.

If you just want to style all links without tokens you'll need to write custom CSS.
But if you're pulling content from a CMS, you can use the "content embed" feature. Look for that on the Webstudio YouTube channel.
Thanks for pointing this out - I'll take a look! Haven't attached a data source at all yet and just testing this as an SSG for now to figure out all the basics first. Btw thanks a lot for taking so much time to answer my questions - highly appreciated! πŸ™‚
Add a reply
Sign up and join the conversation on Discord