Webstudio

Log inLog into community

Join the Webstudio community

Updated 11 months ago

Remove Underline from Links Sitewide

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

basic css

To clarify:

you can totally add classes, they are in settings panel
you can use them to create custom animations with CSS or use with GSAP for selectors
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

https://apps.webstudio.is/builder/7bdea1b5-202f-43dd-8891-579b7e9803e4?authToken=bed1507d-8217-4844-b998-728e598beb6c&mode=preview

published: https://new-4m8cxt.wstd.io/

it does work in general

you seem to have something special there, so share your project link

.https://apps.webstudio.is/builder/2b9872b5-5330-41ec-845c-b842bd101c60?authToken=b93fa039-30af-4941-966c-541ed857715b&mode=preview

duuude

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

Attachment

Attachment

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.

https://github.com/webstudio-is/webstudio/issues/3751

https://github.com/webstudio-is/webstudio/issues/3750

Both have been fixed now and getting released soon

Add a reply

Sign up and join the conversation on Discord