Join the Webstudio community

Updated 7 months ago

Remove Underline from Links Sitewide

At a glance

The community member is trying to remove the underline from links sitewide in Webstudio, but the CSS they tried doesn't work. Other community members suggest using a token for the links or adding custom CSS in an HTML embed, but note that the latter approach may not show the real values in the style panel.

The community member shares a Loom video showing the issue, and another community member provides a project link to help troubleshoot. It turns out the issue was that the HTML embed was disabled, not just hidden. Once the community member realized this, the CSS solution worked as expected.

The community members also discuss some suggestions for improving the Webstudio interface, such as making the switch to enable/disable the HTML embed more specific to the switch itself rather than the entire row.

Useful resources
HI everybody,
I want to remove all the underline on links sitewide, I added the a:-webkit-any-link because I saw Webstudio is using while inspecting the page, but it doesn't work, I tried with the !important and it doesn't work, I also tried to turn the "Run script on canvas" on and still doesn't work, this code is in an embed :
<style>

a, a:-webkit-any-link{
text-decoration: none ;
}

</style>

So I guess my question is, how can apply CSS sitewide at the very beginning of my project?
Thanks in advance
O
K
26 comments
create a token for your links and use it with your links
Ok, so custom CSS is not possible in Webstudio?
it is, but then you will not see that value in the style panel, so not very recommended
text decoration is on hover, that's why you didn't see the effect
To clarify:
  1. you can totally add classes, they are in settings panel
  2. you can use them to create custom animations with CSS or use with GSAP for selectors
  3. You can totally write any custom CSS in html embed, the only downside is that by doing so, you are not seeing the real values in the style panel. Same thing happens in Webflow
I'm sorry but it doesn't work: here's a loom: https://www.loom.com/share/86eae7c13181489986df0a123ffed1d5?sid=7755f777-95d4-4fdf-9296-d2a8eaa5ffa3

If you can record a loom on how it works for you, I'll share it to help the platform, honestly I'm a big fan and want to build my projects with Webstudio, but getting stuck on something as basic as adding 1 line of CSS is scary
it does work in general
you seem to have something special there, so share your project link
lol, I got it
That's the show switch that is turned to off, but I dind't know
you disabled your html embed
fuck, I spent 5 minutes trying to understand
I thought it was only hiding the element, not disabling the code itself
And it works in the Designer directly, I thought it would be working only on the live site
actually you don't even need that swtich for styles
that's only for scripts if you want to run them on canvas
And 1 suggestion here, you should make it that you have to click on the switch directly and now the whole row where the switch is, because I clicked it by mistake many times.
In the case of the embed I really hid it thinking it was a display:none
Agree regarding not switching with label, but specifically with a switch.
Both have been fixed now and getting released soon
Add a reply
Sign up and join the conversation on Discord